Menu with staggered item animations and smooth transitions on open/close.
Open the menu from the toggle. By default the menu fills its parent, so give the parent a position and a height, or set isFixed to cover the viewport.
| Prop | Type | Default | Description |
|---|---|---|---|
position | 'left' | 'right' | 'right' | Anchor position for the menu panel (left or right side). |
colors | string[] | ['#B497CF', '#5227FF'] | Colors used for staggered underlay layers. |
items | { label: string; ariaLabel?: string; link: string }[] | [] | Menu items rendered inside the panel. |
socialItems | { label: string; link: string }[] | [] | Social links displayed in the menu panel. |
displaySocials | boolean | true | Whether to display the social links section. |
displayItemNumbering | boolean | true | Whether to show numbering for menu items. |
logoUrl | string | '' | Path to the logo image. Nothing is rendered when empty. |
menuButtonColor | string | '#fff' | Color of the menu toggle button when closed. |
openMenuButtonColor | string | '#fff' | Color of the menu toggle button when open. |
accentColor | string | '#5227FF' | Hover accent color for menu items. |
changeMenuColorOnOpen | boolean | true | Whether to animate the button color when opening/closing. |
isFixed | boolean | false | Cover the whole viewport with position: fixed instead of filling the parent. |
closeOnClickAway | boolean | true | Whether to close the menu when clicking outside. |
| Prop | Type | Default | Description |
|---|---|---|---|
menu-open | () => void | - | Emitted when the menu opens. |
menu-close | () => void | - | Emitted when the menu closes. |
Keyboard shortcuts and ARIA behavior.
| Shortcut | Description |
|---|---|
| Tab | Moves focus to the toggle, then through the menu links. |
| Enter + Space | Opens or closes the menu from the toggle. |
