| HorizontalNav |
| switchToVertical | boolean | Switch menu orientation to vertical if set to true | false |
| hideMenu | boolean | Hide the menu when breakpoint size is reached on window resize. | - |
| breakpoint | xs | sm | md | lg | xl | xxl | always | Set when the sidebar should trigger responsiveness behavior | lg |
| breakpoints | Partial<typeof defaultBreakpoints> | Set custom breakpoints when the sidebar should trigger responsiveness behavior | - |
| customBreakpoint | string | Set custom breakpoint value, this will override breakpoint prop | - |
| customStyles | CSSObject | Set custom styling for the horizontal navigation | - |
| verticalNavProps | { width?: number; backgroundColor?: string; backgroundImage?: string; customStyles?: CSSObject; } | Change the look of the Vertical navigation when breakpoint is reached | width: {260} |
| verticalNavContent | { ({ children }: ChildrenType) => JSX.Element } | Change the content of the Vertical navigation when breakpoint is reached | width: {260} |
| Menu |
|
| triggerPopout | hover | click | If click, submenu popper will open/close when clicking on MenuItem | hover |
| browserScroll | boolean | Display Browser scroll or Perfect Scrollbar | false |
| transitionDuration | number | Transition duration (in ms) for the submenu | 300 |
| menuItemStyles | MenuItemStyles | Render method for style customization on MenuItem and SubMenu components | - |
| renderExpandIcon | (params: { level: number; disabled: boolean; active: boolean; open: boolean; }) => ReactElement | Render method for customizing submenu expand icon | - |
| renderExpandedMenuItemIcon | RenderExpandedMenuItemIcon | Render method for customizing MenuItem & SubMenu icons | - |
| textTruncate | boolean | If true, text will truncate in all the MenuItems and SubMenus | true |
| popoutMenuOffset | {mainAxis?: number | ((params: { level?: number }) => number)
alignmentAxis?: number | ((params: { level?: number }) => number)
} | Popout menu offset | - |
| verticalMenuProps | {verticalMenuProps?: Pick<
VerticalMenuProps,
| 'transitionDuration'
| 'menuSectionStyles'
| 'menuItemStyles'
| 'subMenuOpenBehavior'
| 'renderExpandIcon'
| 'renderExpandedMenuItemIcon'
| 'textTruncate'
| 'rootStyles'>} | Props to be passed to the VerticalMenu component when the menu is rendered vertically | - |
| rootStyles | CSSObject | Set custom styling for the menu | - |
|
| MenuItem |
| icon | ReactElement | Icon for the menu item | - |
| disabled | boolean | If true, the component is disabled | false |
| prefix | ReactNode | Add a prefix to the menuItem | - |
| suffix | ReactNode | Add a suffix to the menuItem | - |
| component | string | ReactElement | Router Link or NavLink component that will be used to handle routing | <a> |
| target | string | The link will open according to the target option | _self |
| rel | string | Set rel for your link | - |
| onActiveChange | (active: boolean) => void | Callback function called when menu item's active state changes | - |
| rootStyles | CSSObject | Set custom styling for menu item | - |
|
| SubMenu |
| label | ReactNode | Label for the submenu | - |
| icon | ReactElement | Icon for submenu | - |
| disabled | boolean | If true, the component is disabled | false |
| prefix | ReactNode | Add a prefix to the submenu | - |
| suffix | ReactNode | Add a suffix to the submenu | - |
| component | string | ReactElement | Component to render the submenu with | <a> |
| contentClassName | string | Custom class for submenu's content area | - |
| onOpenChange | (open: boolean) => void | Callback function called when submenu state changes | - |
| rootStyles | CSSObject | Set custom styling for submenu | - |