Skip to main content

Horizontal Menu Props with types

ComponentPropsTypeDescriptionDefault
HorizontalNav
switchToVerticalbooleanSwitch menu orientation to vertical if set to truefalse
hideMenubooleanHide the menu when breakpoint size is reached on window resize.-
breakpointxs | sm | md | lg | xl | xxl | alwaysSet when the sidebar should trigger responsiveness behaviorlg
breakpointsPartial<typeof defaultBreakpoints>Set custom breakpoints when the sidebar should trigger responsiveness behavior-
customBreakpointstringSet custom breakpoint value, this will override breakpoint prop-
customStylesCSSObjectSet 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
triggerPopouthover | clickIf click, submenu popper will open/close when clicking on MenuItemhover
browserScrollbooleanDisplay Browser scroll or Perfect Scrollbarfalse
transitionDurationnumberTransition duration (in ms) for the submenu300
menuItemStylesMenuItemStylesRender method for style customization on MenuItem and SubMenu components-
renderExpandIcon(params: { level: number; disabled: boolean; active: boolean; open: boolean; }) => ReactElementRender method for customizing submenu expand icon-
renderExpandedMenuItemIconRenderExpandedMenuItemIconRender method for customizing MenuItem & SubMenu icons-
textTruncatebooleanIf true, text will truncate in all the MenuItems and SubMenustrue
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-
rootStylesCSSObjectSet custom styling for the menu-
MenuItem
iconReactElementIcon for the menu item-
disabledbooleanIf true, the component is disabledfalse
prefixReactNode | ChipPropsAdd a prefix to the menuItem-
suffixReactNode | ChipPropsAdd a suffix to the menuItem-
componentstring | ReactElementRouter Link or NavLink component that will be used to handle routing<a>
targetstringThe link will open according to the target option_self
relstringSet rel for your link-
onActiveChange(active: boolean) => voidCallback function called when menu item's active state changes-
rootStylesCSSObjectSet custom styling for menu item-
SubMenu
labelReactNodeLabel for the submenu-
iconReactElementIcon for submenu-
disabledbooleanIf true, the component is disabledfalse
prefixReactNode | ChipPropsAdd a prefix to the submenu-
suffixReactNode | ChipPropsAdd a suffix to the submenu-
componentstring | ReactElementComponent to render the submenu with<a>
contentClassNamestringCustom class for submenu's content area-
onOpenChange(open: boolean) => voidCallback function called when submenu state changes-
rootStylesCSSObjectSet custom styling for submenu-