VerticalNav Props with types
Props | Type | Description | Default |
---|---|---|---|
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 | - |
Here is the defaultBreakpoints
props type:
defaultBreakpoints: Record<BreakpointType, string> = {
xs: '480px',
sm: '600px',
md: '900px',
lg: '1200px',
xl: '1536px',
xxl: '1920px',
always: 'always'
}