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#

Editable example

<SideNav defaultSelectedId="list">
  <SideNav.Level title="Components">
    <SideNav.Item href="#" navId="button">Button</SideNav.Item>
    <SideNav.Item href="#" navId="list">List</SideNav.Item>
    <SideNav.Item href="#" navId="menu">Menu</SideNav.Item>
    <SideNav.Level>
      <SideNav.Item
        href="#"
        navId="menuItem"
      >
        Menu.Item
      </SideNav.Item>
      <SideNav.Item
        href="#"
        navId="menuGroup"
      >
        Menu.Group
      </SideNav.Item>
      <SideNav.Level>
        <SideNav.Item
          navId="menuGroupProps"
          onClick={() => console.log('props')}
        >
          Props
        </SideNav.Item>
      </SideNav.Level>
    </SideNav.Level>
  </SideNav.Level>
  <SideNav.Level title="Utilities">
    <SideNav.Item href="#" navId="hidden">Hidden</SideNav.Item>
    <SideNav.Item href="#" navId="rover">Rover</SideNav.Item>
    <SideNav.Level>
      <SideNav.Item
        navId="roverProps"
        onClick={() => console.log('props')}
      >
        Props
      </SideNav.Item>
    </SideNav.Level>
  </SideNav.Level>
</SideNav>

<SideNav defaultSelectedId="list">
  <SideNav.Level title="Components">
    <SideNav.Item href="#" navId="button">Button</SideNav.Item>
    <SideNav.Item href="#" navId="list">List</SideNav.Item>
    <SideNav.Item href="#" navId="menu">Menu</SideNav.Item>
    <SideNav.Level>
      <SideNav.Item
        href="#"
        navId="menuItem"
      >
        Menu.Item
      </SideNav.Item>
      <SideNav.Item
        href="#"
        navId="menuGroup"
      >
        Menu.Group
      </SideNav.Item>
      <SideNav.Level>
        <SideNav.Item
          navId="menuGroupProps"
          onClick={() => console.log('props')}
        >
          Props
        </SideNav.Item>
      </SideNav.Level>
    </SideNav.Level>
  </SideNav.Level>
  <SideNav.Level title="Utilities">
    <SideNav.Item href="#" navId="hidden">Hidden</SideNav.Item>
    <SideNav.Item href="#" navId="rover">Rover</SideNav.Item>
    <SideNav.Level>
      <SideNav.Item
        navId="roverProps"
        onClick={() => console.log('props')}
      >
        Props
      </SideNav.Item>
    </SideNav.Level>
  </SideNav.Level>
</SideNav>

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.

Editable example

function Example() {
  const [selectedId, setSelectedId] = React.useState('list');

  return (
    <SideNav selectedId={selectedId} onChange={id => setSelectedId(id)}>
      <SideNav.Level title="Components">
        <SideNav.Item href="#" navId="button">Button</SideNav.Item>
        <SideNav.Item href="#" navId="list">List</SideNav.Item>
        <SideNav.Item href="#" navId="menu">Menu</SideNav.Item>
        <SideNav.Level>
          <SideNav.Item
            href="#"
            navId="menuItem"
          >
            Menu.Item
          </SideNav.Item>
          <SideNav.Item
            href="#"
            navId="menuGroup"
          >
            Menu.Group
          </SideNav.Item>
          <SideNav.Level>
            <SideNav.Item
              navId="menuGroupProps"
              onClick={() => console.log('props')}
            >
              Props
            </SideNav.Item>
          </SideNav.Level>
        </SideNav.Level>
      </SideNav.Level>
      <SideNav.Level title="Utilities">
        <SideNav.Item href="#" navId="hidden">Hidden</SideNav.Item>
        <SideNav.Item href="#" navId="rover">Rover</SideNav.Item>
        <SideNav.Level>
          <SideNav.Item
            navId="roverProps"
            onClick={() => console.log('props')}
          >
            Props
          </SideNav.Item>
        </SideNav.Level>
      </SideNav.Level>
    </SideNav>
  );
}

function Example() {
  const [selectedId, setSelectedId] = React.useState('list');

  return (
    <SideNav selectedId={selectedId} onChange={id => setSelectedId(id)}>
      <SideNav.Level title="Components">
        <SideNav.Item href="#" navId="button">Button</SideNav.Item>
        <SideNav.Item href="#" navId="list">List</SideNav.Item>
        <SideNav.Item href="#" navId="menu">Menu</SideNav.Item>
        <SideNav.Level>
          <SideNav.Item
            href="#"
            navId="menuItem"
          >
            Menu.Item
          </SideNav.Item>
          <SideNav.Item
            href="#"
            navId="menuGroup"
          >
            Menu.Group
          </SideNav.Item>
          <SideNav.Level>
            <SideNav.Item
              navId="menuGroupProps"
              onClick={() => console.log('props')}
            >
              Props
            </SideNav.Item>
          </SideNav.Level>
        </SideNav.Level>
      </SideNav.Level>
      <SideNav.Level title="Utilities">
        <SideNav.Item href="#" navId="hidden">Hidden</SideNav.Item>
        <SideNav.Item href="#" navId="rover">Rover</SideNav.Item>
        <SideNav.Level>
          <SideNav.Item
            navId="roverProps"
            onClick={() => console.log('props')}
          >
            Props
          </SideNav.Item>
        </SideNav.Level>
      </SideNav.Level>
    </SideNav>
  );
}

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 "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 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 "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 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 "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 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

On this page