Skip to main content

Side Navigation

Side navigation between different sections or pages.

http://localhost:3000
<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
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

SideNavigationFooter Props


as?The root element to be rendered

SideNavigationHeader Props


as?The root element to be rendered

SideNavigationMenu Props


as?The root element to be rendered

SideNavigationMenuGroup Props


as?The root element to be rendered