npm package: @izosa/website-menu
Description: <table>     <tr>         <td><img src="https://www.static.izosa.com/website/logo.svg" width="100" height="100"></td>         <td>         <h2>Menu</h2>         Website component for menu</td>     </tr> </table>
Latest version: 0.6.2

<table>
    <tr>
        <td><img src="https://www.static.izosa.com/website/logo.svg" width="100" height="100"></td>
        <td>
        <h2>Menu</h2>
        Website component for menu</td>
    </tr>
</table>

## Properties

<table>
    <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Options</th>
        <th>Default</th>
    </tr>
    <tr>
        <td>label</td>
        <td>string</td>
        <td>☑️⚙️</td>
        <td>''</td>
    </tr>
    <tr>
        <td>style</td>
        <td>string</td>
        <td>☑️⚙️</td>
        <td>clear (clear | fill | outline | underline)</td>
    </tr>
    <tr>
        <td>items</td>
        <td>MenuItem[]</td>
        <td>✅⚙️</td>
        <td>[]</td>
    </tr>
        <tr>
        <td>icon</td>
        <td>IconDefinition | null</td>
        <td>☑️⚙️</td>
        <td>faBars</td>
    </tr>
</table>

<hr>

```
<website-menu [items]="menu"></website-menu>
```

## CSS Properties

<table>
    <tr>
        <th>Name</th>
        <th>Default Value</th>
    </tr>
    <tr>
        <td>--direction:</td>
        <td>row</td>
    </tr>
    <tr>
        <td>--gap:</td>
        <td>2rem</td>
    </tr>
    <tr>
        <td>--py:</td>
        <td>0.5rem</td>
    </tr>
        <tr>
        <td>--px:</td>
        <td>1rem</td>
    </tr>
    <tr>
        <td>--text-color:</td>
        <td>#3f3f3f</td>
    </tr>
    <tr>
        <td>--text-color-invert:</td>
        <td>#ffffff</td>
    </tr>
    <tr>
        <td>--text-color-active:</td>
        <td>#c9851d</td>
    </tr>
    <tr>
        <td>--text-transform:</td>
        <td>uppercase</td>
    </tr>
    <tr>
        <td>--font-size:</td>
        <td>1rem</td>
    </tr>
    <tr>
        <td>--font-weight:</td>
        <td>700</td>
    </tr>
    <tr>
        <td>--font-familly:</td>
        <td>inherit</td>
    </tr>
    <tr>
        <td>--m-width:</td>
        <td>300px</td>
    </tr>
        <tr>
        <td>--transition-ms:</td>
        <td>150ms</td>
    </tr>
    <tr>
        <td>--transition-type:</td>
        <td>ease-in-out</td>
    </tr>
    <tr>
        <td>--m-text-color:</td>
        <td>#3f3f3f</td>
    </tr>
    <tr>
        <td>--m-text-active:</td>
        <td>#c9851d</td>
    </tr>
    <tr>
        <td>--m-font-size:</td>
        <td>1.5rem</td>
    </tr>
    <tr>
        <td>--m-font-weight:</td>
        <td>700</td>
    </tr>
    <tr>
        <td>--m-font-family:</td>
        <td>inherit</td>
    </tr>
    <tr>
        <td>--m-button-color:</td>
        <td>#3f3f3f</td>
    </tr>
    <tr>
        <td>--m-button-size:</td>
        <td>3rem</td>
    </tr>
    <tr>
        <td>--m-button-font-size:</td>
        <td>1.5rem</td>
    </tr>
    <tr>
        <td>--m-text-transform:</td>
        <td>none</td>
    </tr>
    <tr>
        <td>--backdrop-background:</td>
        <td>#3f3f3f3a</td>
    </tr>

</table>

<hr>

```
website-menu{
    --direction: row;
    --gap: 2rem;
    --py: 0.5rem;
    --px: 1rem;

    --text-color: #3f3f3f
    --text-color-invert: #ffffff;
    --text-color-active: #c9851d;
    --text-transform: uppercase;
    --font-size: 1rem;
    --font-weight: 700;
    --font-familly: inherit;

    --m-width:	300px;
    --transition-ms: 150ms;
    --transition-type: ease-in-out;

    --m-text-color:	#3f3f3f;
    --m-text-active: #c9851d;
    --m-font-size: 1.5rem;
    --m-font-weight: 700;
    --m-font-family: inherit;

    --m-button-color: #3f3f3f;
    --m-button-size: 3rem;
    --m-button-font-size: 1.5rem;
    --m-text-transform: none;

    --backdrop-background: #3f3f3f3a;
}
```