Skip to main content

VerticalNav Props with types

PropsTypeDescriptionDefault
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-

Here is the defaultBreakpoints props type:

defaultBreakpoints: Record<BreakpointType, string> = {
xs: '480px',
sm: '600px',
md: '900px',
lg: '1200px',
xl: '1536px',
xxl: '1920px',
always: 'always'
}