Skip to main content

Vertical Menu Props with types

ComponentPropsTypeDescriptionDefault
VerticalNav
widthnumberWidth of the sidebar260
collapsedWidthnumberWidth of the sidebar on collapsed state80
breakpointxs | sm | md | lg | xl | xxl | alwaysSet when the sidebar should trigger responsiveness behaviorlg
breakpointsPartial<typeof defaultBreakpoints>Set custom widths for each breakpoint-
customBreakpointstringSet custom breakpoint value, this will override breakpoint prop-
transitionDurationnumberTransition duration (in ms) for the whole navigation300
backgroundColorstringSet background color for sidebarwhite
backgroundImagestringUrl of the image to use in the sidebar background, need to apply transparency to background color-
backdropColorstringSet backdrop colorrgb(0, 0, 0, 0.3)
scrollWithContentbooleanShould Sidebar be scrolled along with content. It will be false by default, hence, Sidebar will be fixed by defaultfalse
customStylesCSSObjectSet custom styling for sidebar-
Menu
popoutWhenCollapsedbooleanShould display submenu as popout or not when sidebar is collapsedfalse
popoutMenuOffset{mainAxis?: number | ((params: { level?: number }) => number) alignmentAxis?: number | ((params: { level?: number }) => number) }Popout menu offset-
triggerPopouthover | clickIf click, submenu popper will open/close when clicking on MenuItemhover
browserScrollbooleanDisplay Browser scroll or Perfect Scrollbar for popoutfalse
transitionDurationnumberTransition duration (in ms) for the submenu300
collapsedMenuSectionLabelReactNodeRender menu section label when menu is collapsed-
menuSectionStylesMenuSectionStylesRender method for style customization on MenuSection-
menuItemStylesMenuItemStylesRender method for style customization on MenuItem and SubMenu components-
subMenuOpenBehavioraccordion | collapseSubmenu open styleaccordion
renderExpandIcon(params: { open: boolean; level: number; active: boolean; disabled: 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
rootStylesCSSObjectSet custom styling for the menu-
MenuSection
labelReactNodeTitle for Menu section-
iconReactElementIcon for the menu section-
prefixReactNode | ChipPropsAdd a prefix to the menu section-
suffixReactNode | ChipPropsAdd a suffix to the menu section-
rootStylesCSSObjectSet custom styling for menu section-
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 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
labelReactNodeTitle for the submenu-
iconReactElementIcon for submenu-
defaultOpenbooleanSet if the submenu is open by defaultfalse
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-
VerticalNavCollapseIcons
closeIconReactElementClose icon when breakpoint is reached-
lockedIconReactElementLocked icon when menu is expanded and locked-
unlockedIconReactElementUnlocked icon when menu is collapsed and unlocked/hovered-
onClick() => voidCallback invoked when the collapse icon is clicked-
onClose() => voidCallback invoked when the close icon is clicked-