Skip to contentSkip to navigationSkip to topbar
Figma
Star

Sidebar Navigation

Sidebar Navigation controls both flat and hierarchical navigation structures within an application's sidebar.

Version 1.0.0
Github

Component preview theme
<Box backgroundColor="colorBackgroundInverse">
<SidebarBody>
<SidebarNavigation aria-label="main" hierarchical hideItemsOnCollapse>
<SidebarNavigationItem href="https://google.com" icon={<ProductHomeIcon decorative />}>
Home
</SidebarNavigationItem>
<SidebarNavigationDisclosure>
<SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureHeading icon={<ProductConnectionsIcon decorative />} selected>
Connections
</SidebarNavigationDisclosureHeading>
</SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureContent>
<SidebarNavigationItem href="https://google.com" selected>
Overview
</SidebarNavigationItem>
</SidebarNavigationDisclosureContent>
</SidebarNavigationDisclosure>
<SidebarNavigationDisclosure>
<SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureHeading icon={<ProductReverseETLIcon decorative />}>
Reverse ETL
</SidebarNavigationDisclosureHeading>
<SidebarBetaBadge as="span">Beta</SidebarBetaBadge>
</SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureContent>
<SidebarNavigationItem href="https://google.com">Overview</SidebarNavigationItem>
</SidebarNavigationDisclosureContent>
</SidebarNavigationDisclosure>
<SidebarNavigationDisclosure>
<SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureHeading icon={<ProductPrivacyIcon decorative />}>
Privacy
</SidebarNavigationDisclosureHeading>
</SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureContent>
<SidebarNavigationItem href="https://google.com">Overview</SidebarNavigationItem>
</SidebarNavigationDisclosureContent>
</SidebarNavigationDisclosure>
<SidebarNavigationDisclosure>
<SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureHeading icon={<ProductProtocolsIcon decorative />}>
Protocols
</SidebarNavigationDisclosureHeading>
</SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureContent>
<SidebarNavigationItem href="https://google.com">Overview</SidebarNavigationItem>
</SidebarNavigationDisclosureContent>
</SidebarNavigationDisclosure>
<SidebarNavigationDisclosure>
<SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureHeading icon={<ProductEngageIcon decorative />}>
Enagage
</SidebarNavigationDisclosureHeading>
</SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureContent>
<SidebarNavigationItem href="https://google.com">Overview</SidebarNavigationItem>
</SidebarNavigationDisclosureContent>
</SidebarNavigationDisclosure>
<SidebarNavigationDisclosure>
<SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureHeading icon={<ProductSettingsIcon decorative />}>
Settings
</SidebarNavigationDisclosureHeading>
</SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureContent>
<SidebarNavigationItem href="https://google.com">Overview</SidebarNavigationItem>
</SidebarNavigationDisclosureContent>
</SidebarNavigationDisclosure>
</SidebarNavigation>
</SidebarBody>
</Box>

Guidelines

Guidelines page anchor

About Sidebar Navigation

About Sidebar Navigation page anchor

Sidebar Navigation controls both flat and hierarchical navigation structures within an application's sidebar. The navigation components are presentational and can be used to create navigation structures ranging from simple lists to complex, deeply nested structures.

We recommend limiting the nesting depth to 3 levels. For navigation beyond this depth, consider also using the In-page Navigation.

Nested sidebar navigation uses the ARIA Disclosure pattern(link takes you to an external page).

  • You must provide an aria-label prop for screen reader software. aria-label="Main" is read as "Main Navigation", with the word "navigation" being pulled from the navigation element.
  • Additional controls or actions should be placed as siblings to each SidebarNavigationItem in the navigation, not nested within.
  • Every SidebarNavigationItem must implement an anchor element by assigning a valid URL to the href attribute.
  • A selected SidebarNavigationItem is designated as the "current page" via aria-current="page".

In its most basic form, Sidebar Navigation can be used to create a flat list of navigation items. This is ideal for smaller applications or single-product use cases.

Each SidebarNavigationItem should be provided with an href, a valid URL that the user will navigate to upon interaction. This facilitates opening links in new tabs via CMD/CTRL + clicking or right-clicking on the item, ensuring proper keyboard navigation for keyboard-only users.

The SidebarNavigationItem can be decorated with an icon by setting the icon property value to any valid Paste Icon.

To indicate the current page, the selected property should be set on the item that represents the user's current location in the application.

Component preview theme
<Box backgroundColor="colorBackgroundInverse">
<SidebarBody>
<SidebarNavigation aria-label="main">
<SidebarNavigationItem
href="https://google.com"
selected
icon={<ProductContactCenterAdminIcon decorative={false} title="Admin" />}
>
Admin
</SidebarNavigationItem>
<SidebarNavigationItem
href="https://google.com"
icon={<ProductContactCenterTasksIcon decorative={false} title="Agent dashboard" />}
>
Agent dashboard
</SidebarNavigationItem>
<SidebarNavigationItem
href="https://google.com"
icon={<ProductContactCenterTeamsIcon decorative={false} title="Teams view" />}
>
Teams view
</SidebarNavigationItem>
<SidebarNavigationItem
href="https://google.com"
icon={<ProductContactCenterQueuesIcon decorative={false} title="Queue stats" />}
>
Queue stats
</SidebarNavigationItem>
<SidebarNavigationItem
href="https://google.com"
icon={<ProductPrivacyIcon decorative={false} title="Privacy" />}
>
Privacy
</SidebarNavigationItem>
<SidebarNavigationItem
href="https://google.com"
icon={<ProductUsageIcon decorative={false} title="Insights" />}
>
Insights
</SidebarNavigationItem>
</SidebarNavigation>
</SidebarBody>
</Box>

Sidebar Navigation also supports hierarchical information architectures with nested navigation items. You can establish "groups" of navigation sections by using SidebarNavigationSeparator between groups of items.

Each SidebarNavigationDisclosure pairs a heading with its content. SidebarNavigationDisclosureHeading accepts a string as content, which describes the navigation items beneath it in the hierarchy. It should not contain clickable actions. For additional actions associated with a parent navigation item, refer to the Navigation item actions section below.

The icon and selected properties from SidebarNavigationItem can be used on the SidebarNavigationDisclosureHeading to display an icon and indicate the user's current section. When implementing multiple levels of navigation, ensure each selected parent item is displayed down the navigation tree. For instance, in the example below, I can see that I am currently on the "Send a Whatsapp message" item, which is a child page of "Try it out" and "Messaging".

SidebarNavigationItems are listed in the SidebarNavigationDisclosureContent and are displayed when the disclosure is expanded using the SidebarNavigationDisclosureHeading.

When creating a hierarchical navigation structure, ensure the SidebarNavigation component's hierarchical property is set, as it provides additional context for children placed within.

Component preview theme
<Box backgroundColor="colorBackgroundInverse">
<SidebarBody>
<SidebarNavigation aria-label="main" hierarchical hideItemsOnCollapse>
<SidebarNavigationDisclosure>
<SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureHeading icon={<ProductMessagingIcon decorative />} selected>
Messaging
</SidebarNavigationDisclosureHeading>
</SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureContent>
<SidebarNavigationItem href="https://google.com">Overview</SidebarNavigationItem>
<SidebarNavigationDisclosure>
<SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureHeading selected>Try it out</SidebarNavigationDisclosureHeading>
</SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureContent>
<SidebarNavigationItem href="https://google.com">Send an SMS</SidebarNavigationItem>
<SidebarNavigationItem href="https://google.com" selected>
Send a Whatsapp message
</SidebarNavigationItem>
</SidebarNavigationDisclosureContent>
</SidebarNavigationDisclosure>
<SidebarNavigationItem href="https://google.com">Services</SidebarNavigationItem>
<SidebarNavigationDisclosure>
<SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureHeading>Senders</SidebarNavigationDisclosureHeading>
</SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureContent>
<SidebarNavigationItem href="https://google.com">Addons</SidebarNavigationItem>
<SidebarNavigationItem href="https://google.com">Navigation Item</SidebarNavigationItem>
<SidebarNavigationItem href="https://google.com">Navigation Item</SidebarNavigationItem>
</SidebarNavigationDisclosureContent>
</SidebarNavigationDisclosure>
<SidebarNavigationDisclosure>
<SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureHeading>Settings</SidebarNavigationDisclosureHeading>
</SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureContent>
<SidebarNavigationItem href="#">
Addons
</SidebarNavigationItem>
<SidebarNavigationItem href="https://google.com">Navigation Item</SidebarNavigationItem>
<SidebarNavigationItem href="https://google.com">Navigation Item</SidebarNavigationItem>
</SidebarNavigationDisclosureContent>
</SidebarNavigationDisclosure>
</SidebarNavigationDisclosureContent>
</SidebarNavigationDisclosure>
<SidebarNavigationDisclosure>
<SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureHeading icon={<ProductLookupIcon decorative />}>
Lookup
</SidebarNavigationDisclosureHeading>
</SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureContent>
<SidebarNavigationItem href="https://google.com">Lookup a phone number</SidebarNavigationItem>
</SidebarNavigationDisclosureContent>
</SidebarNavigationDisclosure>
<SidebarNavigationSeparator />
<SidebarNavigationDisclosure>
<SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureHeading icon={<ProductVideoIcon decorative />}>
Video
</SidebarNavigationDisclosureHeading>
</SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureContent>
<SidebarNavigationItem href="https://google.com">Overview</SidebarNavigationItem>
</SidebarNavigationDisclosureContent>
</SidebarNavigationDisclosure>
</SidebarNavigation>
</SidebarBody>
</Box>

There may be situations where a combination of simple flat structures and nested pages is necessary. The components provided by Sidebar Navigation allow for easy, flexible composition to suit your navigation needs. Pair SidebarNavigationItems with SidebarNavigationDisclosures to create this form of navigation structure.

When mixing, you must ensure hierarchical is set on SidebarNavigation to achieve correct indentation.

Component preview theme
<Box backgroundColor="colorBackgroundInverse">
<SidebarBody>
<SidebarNavigation aria-label="main" hierarchical hideItemsOnCollapse>
<SidebarNavigationItem href="https://google.com" icon={<ProductHomeIcon decorative />}>
Home
</SidebarNavigationItem>
<SidebarNavigationDisclosure>
<SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureHeading icon={<ProductConnectionsIcon decorative />} selected>
Connections
</SidebarNavigationDisclosureHeading>
</SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureContent>
<SidebarNavigationItem href="https://google.com" selected>
Overview
</SidebarNavigationItem>
</SidebarNavigationDisclosureContent>
</SidebarNavigationDisclosure>
<SidebarNavigationItem href="https://google.com" icon={<ProductReverseETLIcon decorative />}>
Reverse ETL <SidebarBetaBadge as="span">Beta</SidebarBetaBadge>
</SidebarNavigationItem>
<SidebarNavigationDisclosure>
<SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureHeading icon={<ProductPrivacyIcon decorative />}>
Privacy
</SidebarNavigationDisclosureHeading>
</SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureContent>
<SidebarNavigationItem href="https://google.com">Overview</SidebarNavigationItem>
</SidebarNavigationDisclosureContent>
</SidebarNavigationDisclosure>
</SidebarNavigation>
</SidebarBody>
</Box>

Handling a collapsing Sidebar

Handling a collapsing Sidebar page anchor

When using a flat navigation list and a compact Sidebar variant, only the icons remain visible when the Sidebar collapses. In this situation, ensure the navigation item icons have a title and are not decorative to maintain accessible names for collapsed navigation items.

<Sidebar
    sidebarNavigationSkipLinkID={sidebarNavigationSkipLinkID}
    topbarSkipLinkID={topbarSkipLinkID}
    mainContentSkipLinkID={mainContentSkipLinkID}
    collapsed={false}
    variant="compact"
  >
  <SidebarHeader>
    <SidebarHeaderIconButton as="a" href="#">
      <ProductFlexIcon size="sizeIcon20" decorative={false} title="Go to Flex homepage" />
    </SidebarHeaderIconButton>
    <SidebarHeaderLabel>Twilio Flex</SidebarHeaderLabel>
  </SidebarHeader>
  <SidebarBody>
    <SidebarNavigation aria-label="main navigation">
      <SidebarNavigationItem
        href=""
        selected
        icon={<ProductContactCenterAdminIcon decorative={false} title="Admin" />}
      >
        Admin
      </SidebarNavigationItem>
      <SidebarNavigationItem
        href=""
        icon={<ProductContactCenterTasksIcon decorative={false} title="Agent dashboard" />}
      >
        Agent dashboard
      </SidebarNavigationItem>
      <SidebarNavigationItem
        href=""
        icon={<ProductContactCenterTeamsIcon decorative={false} title="Teams view" />}
      >
        Teams view
      </SidebarNavigationItem>
      <SidebarNavigationItem
        href=""
        icon={<ProductContactCenterQueuesIcon decorative={false} title="Queue stats" />}
      >
        Queue stats
      </SidebarNavigationItem>
      <SidebarNavigationItem
        href=""
        icon={<ProductPrivacyIcon decorative={false} title="Privacy" />}
      >
        Privacy
      </SidebarNavigationItem>
      <SidebarNavigationItem
        href=""
        icon={<ProductUsageIcon decorative={false} title="Insights" />}
      >
        Insights
      </SidebarNavigationItem>
    </SidebarNavigation>
  </SidebarBody>
</Sidebar>

If you are using a collapsible, compact sidebar and decide to hide the navigation items completely when collapsed, remember to set hideItemsOnCollapse on SidebarNavigation.

Regardless of the situation, Sidebar Navigation Disclosures will always be hidden in a collapsed Sidebar.


<Sidebar
  sidebarNavigationSkipLinkID={sidebarNavigationSkipLinkID}
  topbarSkipLinkID={topbarSkipLinkID}
  mainContentSkipLinkID={mainContentSkipLinkID}
  collapsed={pushSidebarCollapsed}
  variant="compact"
>
  <SidebarHeader>
    <SidebarHeaderIconButton as="a" href="#">
      <ProductSegmentIcon size="sizeIcon20" decorative={false} title="Go to Segment homepage" />
    </SidebarHeaderIconButton>
    <SidebarHeaderLabel>Twilio Segment</SidebarHeaderLabel>
  </SidebarHeader>
  <SidebarBody>
    <SidebarNavigation aria-label={id} hierarchical hideItemsOnCollapse>
      <SidebarNavigationItem href="https://google.com" icon={<ProductHomeIcon decorative />}>
        Home
      </SidebarNavigationItem>
      <SidebarNavigationDisclosure>
        <SidebarNavigationDisclosureHeadingWrapper>
          <SidebarNavigationDisclosureHeading icon={<ProductConnectionsIcon decorative />} selected>
            Connections
          </SidebarNavigationDisclosureHeading>
        </SidebarNavigationDisclosureHeadingWrapper>
        <SidebarNavigationDisclosureContent>
          <SidebarNavigationItem href="https://google.com" selected>
            Overview
          </SidebarNavigationItem>
        </SidebarNavigationDisclosureContent>
      </SidebarNavigationDisclosure>
      <SidebarNavigationDisclosure>
        <SidebarNavigationDisclosureHeadingWrapper>
          <SidebarNavigationDisclosureHeading icon={<ProductReverseETLIcon decorative />}>
            Reverse ETL
          </SidebarNavigationDisclosureHeading>
          <SidebarBetaBadge as="span">Beta</SidebarBetaBadge>
        </SidebarNavigationDisclosureHeadingWrapper>
        <SidebarNavigationDisclosureContent>
          <SidebarNavigationItem href="https://google.com">Overview</SidebarNavigationItem>
        </SidebarNavigationDisclosureContent>
      </SidebarNavigationDisclosure>
      <SidebarNavigationDisclosure>
        <SidebarNavigationDisclosureHeadingWrapper>
          <SidebarNavigationDisclosureHeading icon={<ProductPrivacyIcon decorative />}>
            Privacy
          </SidebarNavigationDisclosureHeading>
        </SidebarNavigationDisclosureHeadingWrapper>
        <SidebarNavigationDisclosureContent>
          <SidebarNavigationItem href="https://google.com">Overview</SidebarNavigationItem>
        </SidebarNavigationDisclosureContent>
      </SidebarNavigationDisclosure>
      <SidebarNavigationDisclosure>
        <SidebarNavigationDisclosureHeadingWrapper>
          <SidebarNavigationDisclosureHeading icon={<ProductProtocolsIcon decorative />}>
            Protocols
          </SidebarNavigationDisclosureHeading>
        </SidebarNavigationDisclosureHeadingWrapper>
        <SidebarNavigationDisclosureContent>
          <SidebarNavigationItem href="https://google.com">Overview</SidebarNavigationItem>
        </SidebarNavigationDisclosureContent>
      </SidebarNavigationDisclosure>
      <SidebarNavigationDisclosure>
        <SidebarNavigationDisclosureHeadingWrapper>
          <SidebarNavigationDisclosureHeading icon={<ProductEngageIcon decorative />}>
            Enagage
          </SidebarNavigationDisclosureHeading>
        </SidebarNavigationDisclosureHeadingWrapper>
        <SidebarNavigationDisclosureContent>
          <SidebarNavigationItem href="https://google.com">Overview</SidebarNavigationItem>
        </SidebarNavigationDisclosureContent>
      </SidebarNavigationDisclosure>
      <SidebarNavigationDisclosure>
        <SidebarNavigationDisclosureHeadingWrapper>
          <SidebarNavigationDisclosureHeading icon={<ProductSettingsIcon decorative />}>
            Settings
          </SidebarNavigationDisclosureHeading>
        </SidebarNavigationDisclosureHeadingWrapper>
        <SidebarNavigationDisclosureContent>
          <SidebarNavigationItem href="https://google.com">Overview</SidebarNavigationItem>
        </SidebarNavigationDisclosureContent>
      </SidebarNavigationDisclosure>
    </SidebarNavigation>
  </SidebarBody>
  <SidebarFooter>
    <SidebarCollapseButton
      onClick={() => setPushSidebarCollapsed(!pushSidebarCollapsed)}
      i18nCollapseLabel="Close sidebar"
      i18nExpandLabel="Open sidebar"
    />
  </SidebarFooter>
</Sidebar>

There may be instances where a navigation item has some additional information or an action that a user can take, other than navigating to, or showing and hiding child pages. In such cases, these actions should be placed as siblings to the navigation items or disclosure headings. Nesting actionable UI elements can make them undiscoverable for assistive technology users.

Only parent SidebarNavigationDisclosure items can have associated actions. These actions should be placed as siblings to the SidebarNavigationDisclosureHeading, inside the SidebarNavigationDisclosureHeadingWrapper. Alignment will be handled automatically.

Component preview theme
const SidebarNavigationExample = () => {
const menu = useMenuState();
const menuLookup = useMenuState();
return (
<Box backgroundColor="colorBackgroundInverse">
<SidebarBody>
<SidebarNavigation aria-label="Main navigation" hierarchical hideItemsOnCollapse>
<SidebarNavigationDisclosure>
<SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureHeading icon={<ProductMessagingIcon decorative />} selected>
Messaging
</SidebarNavigationDisclosureHeading>
<MenuButton {...menu} variant="inverse_link" size="icon_small">
<MoreIcon decorative={false} title="More" />
</MenuButton>
<Menu {...menu} aria-label="Preferences">
<MenuItem {...menu} onClick={()=>{}}>
Unpin from sidebar
</MenuItem>
<MenuItem {...menu} href="http://www.google.com">
Go to docs
</MenuItem>
</Menu>
</SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureContent>
<SidebarNavigationItem href="https://google.com">Overview</SidebarNavigationItem>
</SidebarNavigationDisclosureContent>
</SidebarNavigationDisclosure>
<SidebarNavigationDisclosure>
<SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureHeading icon={<ProductLookupIcon decorative />}>
Lookup
</SidebarNavigationDisclosureHeading>
<SidebarBetaBadge as="button" onClick={()=>{}}>Beta</SidebarBetaBadge>
<MenuButton {...menuLookup} variant="inverse_link" size="icon_small">
<MoreIcon decorative={false} title="More" />
</MenuButton>
<Menu {...menuLookup} aria-label="Preferences">
<MenuItem {...menuLookup} onClick={()=>{}}>
Unpin from sidebar
</MenuItem>
<MenuItem {...menuLookup} href="http://www.google.com">
Go to docs
</MenuItem>
</Menu>
</SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureContent>
<SidebarNavigationItem href="https://google.com">Lookup a phone number</SidebarNavigationItem>
</SidebarNavigationDisclosureContent>
</SidebarNavigationDisclosure>
</SidebarNavigation>
</SidebarBody>
</Box>
)
}
render(
<SidebarNavigationExample/>
)

State hooks allow you to integrate the disclosure state with your application state and functionality. This can be particularly useful if your application is controlled via a central state management library like Redux, or if actions within the application control how the navigation is displayed beyond the user's interaction with it.

In the simple example below, you can control the expanded state of each disclosure without the user interacting with it.

For more information on using the disclosure state hook, refer to the Disclosure component docs and Disclosure Primitive docs

Component preview theme
const SidebarNavigationStateHookExample = () => {
const messagingDisclosure = useSidebarNavigationDisclosureState();
const lookupDisclosure = useSidebarNavigationDisclosureState();
return (
<>
<Box display="flex" columnGap="space20" alignItems="center" paddingBottom="space60">
<Button variant="secondary" onClick={messagingDisclosure.toggle}>Toggle messaging</Button>
<Button variant="secondary" onClick={lookupDisclosure.toggle}>Toggle lookup</Button>
</Box>
<Box backgroundColor="colorBackgroundInverse">
<SidebarBody>
<SidebarNavigation aria-label="Main navigation" hierarchical hideItemsOnCollapse>
<SidebarNavigationDisclosure state={messagingDisclosure}>
<SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureHeading icon={<ProductMessagingIcon decorative />} selected>
Messaging
</SidebarNavigationDisclosureHeading>
</SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureContent>
<SidebarNavigationItem href="https://google.com">Overview</SidebarNavigationItem>
</SidebarNavigationDisclosureContent>
</SidebarNavigationDisclosure>
<SidebarNavigationDisclosure state={lookupDisclosure}>
<SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureHeading icon={<ProductLookupIcon decorative />}>
Lookup
</SidebarNavigationDisclosureHeading>
</SidebarNavigationDisclosureHeadingWrapper>
<SidebarNavigationDisclosureContent>
<SidebarNavigationItem href="https://google.com">Lookup a phone number</SidebarNavigationItem>
</SidebarNavigationDisclosureContent>
</SidebarNavigationDisclosure>
</SidebarNavigation>
</SidebarBody>
</Box>
</>
)
}
render(
<SidebarNavigationStateHookExample/>
)

Installation

Installation page anchor
yarn add @twilio-paste/sidebar - or - yarn add @twilio-paste/core
import {
  Sidebar,
  SidebarOverlayContentWrapper,
  SidebarBody,
  SidebarHeader,
  SidebarHeaderLabel,
  SidebarHeaderIconButton,
  SidebarFooter,
  SidebarCollapseButton,
  SidebarNavigation,
  SidebarNavigationItem,
  SidebarNavigationDisclosure,
  SidebarNavigationDisclosureHeading,
  SidebarNavigationDisclosureHeadingWrapper,
  SidebarNavigationDisclosureContent,
} from '@twilio-paste/core/sidebar';

const SideModalExample: React.FC = () => {
  const [overlaySidebarExpanded, setOverlaySidebarExpanded] = React.useState(true);
  return (
    <Box>
      <Sidebar
        sidebarNavigationSkipLinkID={sidebarNavigationSkipLinkID}
        topbarSkipLinkID={topbarSkipLinkID}
        mainContentSkipLinkID={mainContentSkipLinkID}
        collapsed={overlaySidebarExpanded}
        variant="compact"
      >
        <SidebarHeader>
          <SidebarHeaderIconButton as="a" href="#">
            <ProductFlexIcon size="sizeIcon20" decorative={false} title="Go to Flex homepage" />
          </SidebarHeaderIconButton>
          <SidebarHeaderLabel>Twilio Flex</SidebarHeaderLabel>
        </SidebarHeader>
        <SidebarBody>
          <SidebarNavigation aria-label="Main navigation">
            <SidebarNavigationItem
              href="https://google.com"
              selected
              icon={<ProductContactCenterAdminIcon decorative={false} title="Admin" />}
            >
              Admin
            </SidebarNavigationItem>
            <SidebarNavigationItem
              href="https://google.com"
              icon={<ProductContactCenterTasksIcon decorative={false} title="Agent dashboard" />}
            >
              Agent dashboard
            </SidebarNavigationItem>
            <SidebarNavigationItem
              href="https://google.com"
              icon={<ProductContactCenterTeamsIcon decorative={false} title="Teams view" />}
            >
              Teams view
            </SidebarNavigationItem>
            <SidebarNavigationItem
              href="https://google.com"
              icon={<ProductContactCenterQueuesIcon decorative={false} title="Queue stats" />}
            >
              Queue stats
            </SidebarNavigationItem>
            <SidebarNavigationItem
              href="https://google.com"
              icon={<ProductPrivacyIcon decorative={false} title="Privacy" />}
            >
              Privacy
            </SidebarNavigationItem>
            <SidebarNavigationItem
              href="https://google.com"
              icon={<ProductUsageIcon decorative={false} title="Insights" />}
            >
              Insights
            </SidebarNavigationItem>
          </SidebarNavigation>
        </SidebarBody>
        <SidebarFooter>
          <SidebarCollapseButton
            onClick={() => setOverlaySidebarExpanded(!overlaySidebarExpanded)}
            i18nCollapseLabel="Close sidebar"
            i18nExpandLabel="Open sidebar"
          />
        </SidebarFooter>
      </Sidebar>

      <SidebarOverlayContentWrapper collapsed={overlaySidebarExpanded} variant="compact">
        <Box padding="space70" id={mainContentSkipLinkID}>
          <Button variant="primary" onClick={() => setOverlaySidebarExpanded(!overlaySidebarExpanded)}>
            Toggle Overlay Sidebar
          </Button>
        </Box>
      </SidebarOverlayContentWrapper>
    </Box>
  );
};
SidebarNavigation
SidebarNavigation page anchor
PropTypeDescriptionDefault
element?stringOverrides the default element name to apply unique styles with the Customization Provider'SIDEBAR_NAVIGATION'
children?React.ReactNode
aria-labelstringAccessible name for the navigation element, useful for application navigation using assistive technology
hideItemsOnCollapse?booleanSet whether you would like the navigation item to hide when in a collapsed sidebar
hierarchical?booleanSet whether you are displaying an hierarchical navigation structure.
PropTypeDescriptionDefault
element?stringOverrides the default element name to apply unique styles with the Customization Provider'SIDEBAR_NAVIGATION_ITEM'
children?React.ReactNode
hrefstringString for the url to link to.
selectedbooleanSet to indicate this item matches to the current page the user is on
iconReact.ReactNodeAny product icons can be used here
SidebarNavigationDisclosure
SidebarNavigationDisclosure page anchor
PropTypeDescriptionDefault
element?stringOverrides the default element name to apply unique styles with the Customization Provider'SIDEBAR_NAVIGATION_DISCLOSURE'
children?React.ReactNode
baseId?stringBase ID string to base subsequent, dynamic IDs on
visible?booleanSet the initial visibility of the Disclosurefalse
state?objectAbility to control the disclosure by passing in the returned values from the useSidebarNavigationDisclosureState hook
SidebarNavigationDisclosureHeadingWrapper
SidebarNavigationDisclosureHeadingWrapper page anchor
PropTypeDescriptionDefault
element?stringOverrides the default element name to apply unique styles with the Customization Provider'SIDEBAR_NAVIGATION_DISCLOSURE_HEADING_WRAPPER'
children?React.ReactNode
SidebarNavigationDisclosureHeading
SidebarNavigationDisclosureHeading page anchor
PropTypeDescriptionDefault
element?stringOverrides the default element name to apply unique styles with the Customization Provider'SIDEBAR_NAVIGATION_DISCLOSURE_HEADING'
children?React.ReactNode
disabled?booleanSet to disable the ability to expand the Navigation section
focusable?booleanSet to control the focusability of the Navigation Heading
selected?booleanSet to make the Heading part of the selected page hierarchy
icon?React.ReactNodeIcon to be displayed within the Heading
SidebarNavigationDisclosureContent
SidebarNavigationDisclosureContent page anchor
PropTypeDescriptionDefault
element?stringOverrides the default element name to apply unique styles with the Customization Provider'SIDEBAR_NAVIGATION_DISCLOSURE_CONTENT'
children?React.ReactNode
SidebarNavigationSeparator
SidebarNavigationSeparator page anchor
PropTypeDescriptionDefault
element?stringOverrides the default element name to apply unique styles with the Customization Provider'SIDEBAR_NAVIGATION_SEPARATOR'
useSidebarNavigationDisclosureState
useSidebarNavigationDisclosureState page anchor

Pass these as part of an object to the hook.

PropTypeDescriptionDefault
baseId?stringSet to create a base ID that all dynamic IDs will be based on
visible?booleanSet the initial visibility of the Disclosure
useSidebarNavigationDisclosureState Return props
useSidebarNavigationDisclosureState Return props page anchor

These props are returned by the state hook. You can spread them into this component ({...state}) or pass them separately. You can also provide these props from your own state logic.

PropTypeDescriptionDefault
baseId?stringID that will serve as a base for all the items IDs.
visible?booleanWhether it's visible or not
toggle?() => voidToggles the visible state