@lucyderojas/menu13-next/README.md

<div align="center">

<div align="center">


<!-- https://raw.githubusercontent.com/Lucy-de-Rojas/Menu13/master/src/Media/Logo.png -->
 <br />
 <img src='https://raw.githubusercontent.com/Lucy-de-Rojas/Menu13/master/src/Media/Logo.png' width='70%' />

 <br />
 <br />
 <img src="https://raw.githubusercontent.com/Lucy-de-Rojas/Menu13-Next/master/src/Next-logo.jpg" width="50%" />
<br />
component to for setting up menu with links to pages.



<br />
<br />

## React and Next versions:
React: 18.2.0. <br />
Next: 13.1.5


<br />

## Installation:
`npm i @lucyderojas/menu13-next`

## Import:

`import Menu from '@lucyderojas/menu13-next/dist/Menu';`

## Use with default values:
`<Menu />`
<br />

<img src='https://raw.githubusercontent.com/Lucy-de-Rojas/Menu13/master/src/Media/MenuBasic.png' width='80%'/>





<br />

<h1>Customise your <br />
<img src='https://raw.githubusercontent.com/Lucy-de-Rojas/Menu13/master/src/Media/Logo.png' width="30%"></h1>

You may need to restart your dev server after each change.
<!-- pages, width, cornerRadius, align, backgroundBasic, colorBasic, backgroundHover, colorHover, backgroundSelected, colorSelected -->


<div align="left">

>`<Menu ` <br />
>>`pages = {['page1', 'page2', ...]}` <br />
`width= '50%' || '600px'` <br />
`cornerRadius  = '50%' || '6px''`  <br />
`align  = 'left' || 'center' || 'right'`  <br /><br />


#basic colors: <br />
`backgroundBasic  = 'red' || 'rgb(1,2,3)' || 'hls(1,2,3)' || '#ffffff'`  <br />
`colorBasic =  'white' || 'rgb(1,2,3)' || 'hls(1,2,3)' || '#000000'`<br /><br />



#colours on hover: <br />
`backgroundHover = 'white' || 'rgb(1,2,3)' || 'hls(1,2,3)' || '#gggggg'` <br />
`colorHover =  'white' || 'rgb(1,2,3)' || 'hls(1,2,3)' || '#rrrrrr'`<br /><br />
#colours of selected item:<br />



`backgroundSelected =  'blue' || 'rgb(1,2,3)' || 'hls(1,2,3)' || '#333333'` <br />
`colorSelected =  'white' || 'rgb(1,2,3)' || 'hls(1,2,3)' || '#wwwwww'`

>`/>`

</div>





<br /><br />
# Github & NPM source code:
<a href="https://github.com/Lucy-de-Rojas/Menu13-Next" >
<img src="https://raw.githubusercontent.com/Lucy-de-Rojas/Menu13/master/src/Media/Github-logo.jpg" width="40%" />
</a>

<br />
<a href="https://www.npmjs.com/package/@lucyderojas/menu13-next" target="_blank">
<img src="https://raw.githubusercontent.com/Lucy-de-Rojas/Menu13/master/src/Media/NPM-logo.jpg" width="40%">

</a>

<br /><br />

# Comments Welcome
Any issues or suggestions welcome.


<br /><br />


# React version:

<img src="https://raw.githubusercontent.com/Lucy-de-Rojas/Menu13/master/src/React-logo.jpg" width="40%" />
<br />
<a href='https://www.npmjs.com/package/@lucyderojas/menu13'>
>> React Version <<
</a>


<br /><br />
# Colaboration
Always on look out for projects to get my hand dirty.
<br />

<img src="https://raw.githubusercontent.com/Lucy-de-Rojas/Menu13/master/src/Media/github-animation-final.gif" width="100%" />


</div>