Menu Component
A layout navigation menu component with support for hierarchical menu items. Manages submenu interactions and supports both horizontal and vertical orientations.
Usage
To import and use the Menu component in your application, use the following code snippet:
Demos
Explore the demos of the React Menu component. Refer to this page.
Props
The following table outlines the props for the Menu component:
| Name | Type | Default | Description |
|---|---|---|---|
| animation | { duration: 400, easing: 'ease', effect: 'FadeIn' } | Specifies the animation settings for the Menu open. | |
| closeOnScroll | boolean | true | Specifies whether to close the Menu when the document is scrolled. When set to true, scrolling the page will automatically close the menu. |
| hoverDelay | number | 0 | Specifies the delay time in milliseconds before opening the submenu when hovering. |
| itemOnClick | boolean | false | Specifies whether to show the sub menu on click instead of hover. When set to true, the sub menu will open only on mouse click rather than on hover. |
| orientation | 'Orientation.Horizontal' | Specifies the orientation of the menu layout. | |
| submenuRenderMode | 'inline' | Specifies where the submenu should be mounted in the DOM.
|
Events
The following table outlines the events for the Menu component:
| Name | Type | Description |
|---|---|---|
| onClose | (event: Event) => void | Specifies the callback function that triggers before closing the Menu. |
| onOpen | (event: Event) => void | Specifies the callback function that triggers before open the Menu. |
| onSelect | (event: MenuSelectEvent) => void | Specifies the callback function that triggers when selecting a Menu item. |