#SideNav
The <SideNav>
component renders a list of links (that can be structured into levels) used for navigation.
Bumbag's navigation you see on the left is built with <SideNav>
& it fits perfectly alongside the PageWithSidebar component.
#Import
import { SideNav } from 'bumbag'
#Usage
#Controlled
By default, the state of the SideNav
component is controlled by Bumbag. However, if you would like to control it yourself, provide the selectedId
and onChange
props.
#Props
#SideNav Props
defaultSelectedId
string
Sets the default selected nav item.
onChange
any
Function to invoke when the nav item is changed.
selectedId
string
Sets the selected nav item.
Inherits Navigation
props
Inherits Box
props
use
string | (ComponentClass<any, any> & { useProps: any; }) | (FunctionComponent<any> & { useProps: any; })
className
string
children
string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal | ((props: BoxProps) => ReactNode)
alignX
"left" | "right" | "center"
alignY
"bottom" | "top" | "center"
altitude
string
variant
string
colorMode
string
disabled
boolean
overrides
{ useCSSVariables?: boolean; altitudes?: AltitudesThemeConfig; borders?: BordersThemeConfig; borderRadii?: BorderRadiiThemeConfig; ... 94 more ...; Template?: TemplateThemeConfig; }
elementRef
((instance: any) => void) | RefObject<any>
themeKey
string
#SideNav.Level Props
title
string | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)>
Inherits List
props
isOrdered
boolean
Indicates if the list is ordered.
orientation
"horizontal" | "vertical"
Indicates the orientation of the list.
Inherits Box
props
use
string | (ComponentClass<any, any> & { useProps: any; }) | (FunctionComponent<any> & { useProps: any; })
className
string
children
string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal | ((props: BoxProps) => ReactNode)
alignX
"left" | "right" | "center"
alignY
"bottom" | "top" | "center"
altitude
string
variant
string
colorMode
string
disabled
boolean
overrides
{ useCSSVariables?: boolean; altitudes?: AltitudesThemeConfig; borders?: BordersThemeConfig; borderRadii?: BorderRadiiThemeConfig; ... 94 more ...; Template?: TemplateThemeConfig; }
elementRef
((instance: any) => void) | RefObject<any>
themeKey
string
#SideNav.Item Props
href
string
isActive
boolean
navId
string
Inherits ListItem
props
Inherits Box
props
use
string | (ComponentClass<any, any> & { useProps: any; }) | (FunctionComponent<any> & { useProps: any; })
className
string
children
string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal | ((props: BoxProps) => ReactNode)
alignX
"left" | "right" | "center"
alignY
"bottom" | "top" | "center"
altitude
string
variant
string
colorMode
string
disabled
boolean
overrides
{ useCSSVariables?: boolean; altitudes?: AltitudesThemeConfig; borders?: BordersThemeConfig; borderRadii?: BorderRadiiThemeConfig; ... 94 more ...; Template?: TemplateThemeConfig; }
elementRef
((instance: any) => void) | RefObject<any>
themeKey
string
#Theming
SideNav.styles.base
SideNav.Level.styles.base
SideNav.Level.Title.styles.base
SideNav.Item.styles.base
SideNav.Item.styles.active