Skip to main content

Side Navigation

Side navigation between different sections or pages.

http://localhost:3000
  • Track
  • Initiate
  • Shipments
  • Templates
  • Settings
<SideNavigation css={{ height: '100%' }}>
  <SideNavigationHeader logo={<Snowflake />} />
  <SideNavigationContent>
    <SideNavigationMenu>
      <SideNavigationMenuItem label="Track" startIcon={<Route />} />
      <SideNavigationMenuGroup defaultExpanded={true} label="Initiate" startIcon={<Carrier />}>
        <SideNavigationMenuItem label="Shipments" />
        <SideNavigationMenuItem label="Templates" />
      </SideNavigationMenuGroup>
    </SideNavigationMenu>
    <SideNavigationMenu>
      <SideNavigationMenuItem label="Settings" startIcon={<Settings />} />
    </SideNavigationMenu>
  </SideNavigationContent>
  <Dropdown placement="right bottom">
    <SideNavigationFooter
      avatarProps={{
        fallback: 'BC',
      }}
      subTitle="Brandon Clark"
      title="Manifest Design"
    />
    <DropdownMenu>
      <DropdownItem key="profile" startIcon={<Person />}>
        Profile
      </DropdownItem>
    </DropdownMenu>
  </Dropdown>
</SideNavigation>

Usage​

Controlled​

A sidnavigation's state can be fully controlled including both the navigation collapse and the menu group expansion.

http://localhost:3000
  • Track
  • Initiate
  • Settings
function Controlled() {
  const [isOpen, setIsOpen] = React.useState(true);
  const [isExpanded, setIsExpanded] = React.useState(true);

  return (
    <SideNavigation css={{ height: '100%' }} isOpen={isOpen} onOpenChange={setIsOpen}>
      <SideNavigationHeader logo={<Snowflake />} />
      <SideNavigationContent>
        <SideNavigationMenu>
          <SideNavigationMenuItem label="Track" startIcon={<Route />} />
          <SideNavigationMenuGroup
            isExpanded={isExpanded}
            label="Initiate"
            startIcon={<Carrier />}
            onExpandedChange={setIsExpanded}
          >
            <SideNavigationMenuItem label="Shipments" />
            <SideNavigationMenuItem label="Templates" />
          </SideNavigationMenuGroup>
        </SideNavigationMenu>
        <SideNavigationMenu>
          <SideNavigationMenuItem label="Settings" startIcon={<Settings />} />
        </SideNavigationMenu>
      </SideNavigationContent>
      <Dropdown placement="right bottom">
        <SideNavigationFooter
          avatarProps={{
            fallback: 'BC',
          }}
          subTitle="Brandon Clark"
          title="Manifest Design"
        />
        <DropdownMenu>
          <DropdownItem key="profile" startIcon={<Person />}>
            Profile
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </SideNavigation>
  );
}

Props​

SideNavigation Props​

as?The root element to be rendered

SideNavigationContent Props​

as?The root element to be rendered
css?CSSTheme aware style object

SideNavigationFooter Props​

as?The root element to be rendered
avatarPropsAvatarPropsProps passed to the avatar component
css?CSSTheme aware style object
titlestringThe title of the footer menu
subTitle?stringThe sub title of the footer menu
autoFocus?booleanWhether the element should receive focus on render.
endIcon?ReactElement<any, string | JSXElementConstructor<any>>Icon added after the button text.
href?stringA URL to link to if as="a".
excludeFromTabOrder?booleanWhether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.
isDisabled?booleanWhether the button is disabled.
rel?stringThe relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
size?ButtonSizeThe size of the button.Defaults to 'medium'
startIcon?ReactElement<any, string | JSXElementConstructor<any>>Icon added before the button text.
target?stringThe target window for the link.
type?"button" | "submit" | "reset"The behavior of the button when used in an HTML form.Defaults to 'button'
variant?ButtonVariantThe display variant of the button.Defaults to 'primary'

SideNavigationHeader Props​

as?The root element to be rendered
css?CSSTheme aware style object
logo?ReactNodeThe logo of the application.

SideNavigationMenu Props​

as?The root element to be rendered
css?CSSTheme aware style object

SideNavigationMenuGroup Props​

as?The root element to be rendered
css?CSSTheme aware style object
defaultExpanded?booleanWhether the menu group is open by default (uncontrolled).
iconProps?IconPropsProps pass to the end icon.
isExpanded?booleanWhether the menu group is expanded by default (controlled).
itemProps?MenuItemPropsProps passed to the root menu item.
labelstringThe text for the menu group label.
labelProps?TypographyProps<"span">Props passed to the label component.
onExpandedChange?(isOpen: boolean) => voidHandler that is called when the menu group's open state changes.
startIcon?ReactElement<any, string | JSXElementConstructor<any>>Icon added before the button text.