Use navigation to let users navigate to the major areas of your site.

Usage

SidebarNavigationItem is a link used to take users to different parts of your application. The links should represent different areas of your applications, do not use this package for navigating a list of items such as Users.

NOTE: SidebarNavigationItem must be used inside SidebarNavigation.

Edit in Playroom

return (
  <SidebarNavigation>
    <SidebarNavigationItem
      navigationKey="home"
      label="Home"
      icon={HomeIcon}
      href="home"
    />
    <SidebarNavigationItem
      navigationKey="products"
      label="Products"
      icon={BoxIcon}
      href="products"
    />
    <SidebarNavigationItem
      navigationKey="users"
      label="Users"
      icon={BoxIcon}
      href="users"
      endElement={<Badge label="On" tone="positive" />}
    />
  </SidebarNavigation>
);

SidebarNavigationItemButton is used to perform a task from the navigation area which may or may not result the user being navigated to a different area of your application. It is usually used in the footer for actions like logout.

NOTE: SidebarNavigationItemButton must be used inside SidebarNavigation.

Edit in Playroom

return (
  <SidebarNavigation>
    <SidebarNavigationItemButton
      label="Help & Support"
      onClick={() => alert('Help & Support')}
    />
    <SidebarNavigationItemButton
      label="Logout"
      onClick={() => alert('Logout')}
    />
  </SidebarNavigation>
);

SidebarNavigationGroup is a logical grouping of navigation items and buttons to make navigation more convenient for the user.

NOTE:
SidebarNavigationGroup must be used inside SidebarNavigation.
Nesting navigation groups inside navigation groups is not supported.

Edit in Playroom

return (
  <SidebarNavigation>
    <SidebarNavigationItem
      navigationKey="home"
      label="Home"
      icon={HomeIcon}
      href="home"
    />
    <SidebarNavigationGroup
      groupKey="settings"
      label="Settings"
      icon={SettingsIcon}
    >
      <SidebarNavigationItem
        navigationKey="organisation_roles"
        label="Organisation roles"
        href="settings/organisation-roles"
      />
      <SidebarNavigationItem
        navigationKey="organisation_details"
        label="Organisation details"
        href="settings/organisation-details"
      />
      <SidebarNavigationItem
        navigationKey="product_roles"
        label="Product roles"
        href="settings/product-roles"
      />
    </SidebarNavigationGroup>
  </SidebarNavigation>
);

The selectedNavigationKey prop on SidebarNavigation is used to highlight the currently selected route by matching the navigationKey prop on SidebarNavigationItem.

The defaultExpandedGroupKey prop on SidebarNavigation is used to expand a navigation group by default by matching the groupKey prop on SidebarNavigationGroup. This prop is only used once on mount, after that the user is free to interact with the navigation groups. A change in this prop will not result in a navigation group expanding/collapsing, that would be terrible UX.

Edit in Playroom

<SidebarNavigation
  selectedNavigationKey="organisation_details"
  defaultExpandedGroupKey="settings"
>
  <SidebarNavigationItem
    navigationKey="home"
    label="Home"
    icon={HomeIcon}
    href="home"
  />
  <SidebarNavigationGroup
    groupKey="settings"
    label="Settings"
    icon={SettingsIcon}
  >
    <SidebarNavigationItem
      navigationKey="organisation_roles"
      label="Organisation roles"
      href="settings/organisation-roles"
    />
    <SidebarNavigationItem
      navigationKey="organisation_details"
      label="Organisation details"
      href="settings/organisation-details"
    />
    <SidebarNavigationItem
      navigationKey="product_roles"
      label="Product roles"
      href="settings/product-roles"
    />
  </SidebarNavigationGroup>
</SidebarNavigation>

Receipes

Sample code for putting together a side bar navigation panel with header, body and footer.

Edit in Playroom

const selectedNavigationKey = 'organisation_details';
const defaultExpandedGroupKey = 'settings';
return (
  <AppSidebar>
    {/* Internal nav layout is controlled by consumer. */}
    <Stack as="nav" flex={1}>
      <NavigationHeader />
      <Divider />
      <NavigationBody
        selectedNavigationKey={selectedNavigationKey}
        defaultExpandedGroupKey={defaultExpandedGroupKey}
      />
      <Divider />
      <NavigationFooter />
    </Stack>
  </AppSidebar>
);
/** This should be an in-app side layout component that controls the width and other behaviours such as expand/collapse and fixed position.  */
function AppSidebar({ children }) {
  return (
    <Flex minHeight="100vh" width={300} background="muted">
      {children}
    </Flex>
  );
}
/** Optional in-app header component. */
function NavigationHeader() {
  return (
    <Inline alignY="center" gap="small" paddingX="large" paddingY="large">
      <EntityAvatar name="Cornersmith" type="Person" size="large" />
      <Heading level="4">Cornersmith</Heading>
    </Inline>
  );
}
/** Compose body using navigation components.  */
function NavigationBody({ selectedNavigationKey, defaultExpandedGroupKey }) {
  return (
    <Box flex={1}>
      <SidebarNavigation
        selectedNavigationKey={selectedNavigationKey}
        defaultExpandedGroupKey={defaultExpandedGroupKey}
      >
        <SidebarNavigationItem
          navigationKey="home"
          label="Home"
          href="home"
          icon={HomeIcon}
        />
        <SidebarNavigationItem
          navigationKey="products"
          label="Products"
          href="products"
          icon={BoxIcon}
        />
        <SidebarNavigationItem
          navigationKey="users"
          label="Users"
          href="users"
          icon={UserIcon}
        />
        <SidebarNavigationItem
          navigationKey="subscriptions"
          label="Subscriptions"
          href="subscriptions"
          icon={CheckCircleIcon}
        />
        <SidebarNavigationItem
          navigationKey="billing"
          label="Billing"
          href="billing"
          icon={CreditCardIcon}
        />
        <SidebarNavigationGroup
          groupKey="settings"
          label="Settings"
          icon={SettingsIcon}
        >
          <SidebarNavigationItem
            navigationKey="organisation_roles"
            label="Organisation roles"
            href="settings/organisation-roles"
          />
          <SidebarNavigationItem
            navigationKey="organisation_details"
            label="Organisation details"
            href="settings/organisation-details"
          />
          <SidebarNavigationItem
            navigationKey="product_roles"
            label="Product roles"
            href="settings/product-roles"
          />
        </SidebarNavigationGroup>
        <SidebarNavigationGroup
          groupKey="user_settings"
          label="Clare Smith"
          startElement={<UserAvatar name="Clare smith" size="small" />}
        >
          <SidebarNavigationItem
            navigationKey="profile"
            label="Profile"
            href="user/profile"
          />
          <SidebarNavigationItem
            navigationKey="email"
            label="Email"
            href="user/email"
          />
          <SidebarNavigationItem
            navigationKey="mfa_status"
            label="MFA"
            endElement={<Badge label="On" tone="positive" />}
            href="user/mfa"
          />
        </SidebarNavigationGroup>
      </SidebarNavigation>
    </Box>
  );
}
/** Compose footer using navigation components. */
function NavigationFooter() {
  return (
    <SidebarNavigation>
      <SidebarNavigationItemButton
        label="Help & Support"
        icon={GlobeIcon}
        onClick={() => alert('You clicked Help & Support')}
      />
      <SidebarNavigationItemButton
        label="Sign out"
        icon={LogOutIcon}
        onClick={() => alert('You clicked Sign out')}
      />
    </SidebarNavigation>
  );
}

Sidebar Navigation

Usage

Navigation items

Navigation buttons

Navigation groups

Highlighting a selected route and controlling navigation group expanded/collapsed state

Receipes

Complete side bar navigation