Vertical Menu Props with types

Component	Props	Type	Description	Default
VerticalNav
	width	number	Width of the sidebar	260
	collapsedWidth	number	Width of the sidebar on collapsed state	80
	breakpoint	xs | sm | md | lg | xl | xxl | always	Set when the sidebar should trigger responsiveness behavior	lg
	breakpoints	Partial<typeof defaultBreakpoints>	Set custom widths for each breakpoint	-
	customBreakpoint	string	Set custom breakpoint value, this will override breakpoint prop	-
	transitionDuration	number	Transition duration (in ms) for the whole navigation	300
	backgroundColor	string	Set background color for sidebar	white
	backgroundImage	string	Url of the image to use in the sidebar background, need to apply transparency to background color	-
	backdropColor	string	Set backdrop color	rgb(0, 0, 0, 0.3)
	scrollWithContent	boolean	Should Sidebar be scrolled along with content. It will be false by default, hence, Sidebar will be fixed by default	false
	customStyles	CSSObject	Set custom styling for sidebar	-
Menu
	popoutWhenCollapsed	boolean	Should display submenu as popout or not when sidebar is collapsed	false
	popoutMenuOffset	{mainAxis?: number | ((params: { level?: number }) => number) alignmentAxis?: number | ((params: { level?: number }) => number) }	Popout menu offset	-
	triggerPopout	hover | click	If click, submenu popper will open/close when clicking on MenuItem	hover
	browserScroll	boolean	Display Browser scroll or Perfect Scrollbar for popout	false
	transitionDuration	number	Transition duration (in ms) for the submenu	300
	collapsedMenuSectionLabel	ReactNode	Render menu section label when menu is collapsed	-
	menuSectionStyles	MenuSectionStyles	Render method for style customization on MenuSection	-
	menuItemStyles	MenuItemStyles	Render method for style customization on MenuItem and SubMenu components	-
	subMenuOpenBehavior	accordion | collapse	Submenu open style	accordion
	renderExpandIcon	(params: { open: boolean; level: number; active: boolean; disabled: 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
	rootStyles	CSSObject	Set custom styling for the menu	-
MenuSection
	label	ReactNode	Title for Menu section	-
	icon	ReactElement	Icon for the menu section	-
	prefix	ReactNode | ChipProps	Add a prefix to the menu section	-
	suffix	ReactNode | ChipProps	Add a suffix to the menu section	-
	rootStyles	CSSObject	Set custom styling for menu section	-
MenuItem
	icon	ReactElement	Icon for the menu item	-
	disabled	boolean	If true, the component is disabled	false
	prefix	ReactNode | ChipProps	Add a prefix to the menuItem	-
	suffix	ReactNode | ChipProps	Add a suffix to the menuItem	-
	component	string | ReactElement	Router 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	Title for the submenu	-
	icon	ReactElement	Icon for submenu	-
	defaultOpen	boolean	Set if the submenu is open by default	false
	disabled	boolean	If true, the component is disabled	false
	prefix	ReactNode | ChipProps	Add a prefix to the submenu	-
	suffix	ReactNode | ChipProps	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	-
VerticalNavCollapseIcons
	closeIcon	ReactElement	Close icon when breakpoint is reached	-
	lockedIcon	ReactElement	Locked icon when menu is expanded and locked	-
	unlockedIcon	ReactElement	Unlocked icon when menu is collapsed and unlocked/hovered	-
	onClick	() => void	Callback invoked when the collapse icon is clicked	-
	onClose	() => void	Callback invoked when the close icon is clicked	-