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>
  );
}