Sidebar

<Sidebar
  sidebarNavigationSkipLinkID={sidebarNavigationSkipLinkID}
  topbarSkipLinkID={topbarSkipLinkID}
  mainContentSkipLinkID={mainContentSkipLinkID}
  collapsed={true}
  variant="compact"
>
  <SidebarHeader>
    <SidebarHeaderIconButton as="a" href="#">
      <LogoTwilioIcon size="sizeIcon20" decorative={false} title="Go to Console homepage" />
    </SidebarHeaderIconButton>
    <SidebarHeaderLabel>Twilio Console</SidebarHeaderLabel>
  </SidebarHeader>
  <SidebarBody>
  </SidebarBody>
  <SidebarFooter>
    <SidebarCollapseButton
      i18nCollapseLabel="Close sidebar"
      i18nExpandLabel="Open sidebar"
    />
  </SidebarFooter>
</Sidebar>
<SidebarPushContentWrapper collapsed={true} variant="compact">
  <Button variant="primary">
    Toggle Push Sidebar
  </Button>
</SidebarPushContentWrapper>

Sidebar contains app navigation. It sits on the left side of the screen.

The Sidebar follows these accessibility guidelines:

• Sidebar is an aside element.
• SidebarCollapseButton provides aria-controls and aria-expanded HTML attributes that match Sidebar.
• Always use SidebarCollapseButton with Sidebar. Otherwise there is no accessible Sidebar trigger for screen readers.
• For skip links to function correctly you must provide the follow three props:
  • sidebarNavigationSkipLinkID: ID given to the SidebarNavigation component.
  • mainContentSkipLinkID: ID given to the container that wraps the main content of your application.
  • topbarSkipLinkID: ID given to the Topbar component in your application.

The compact "push" Sidebar moves the page content as it expands and collapses. The difference between it and the default variant is that it maintains a fixed, visible width when collapsed.

For most Twilio products, which are desktop experiences, we currently believe the compact push Sidebar gives the best experience when dealing with varied, interactive content.

<Sidebar
  sidebarNavigationSkipLinkID={sidebarNavigationSkipLinkID}
  topbarSkipLinkID={topbarSkipLinkID}
  mainContentSkipLinkID={mainContentSkipLinkID}
  collapsed={true}
  variant="compact"
>
  <SidebarHeader>
    <SidebarHeaderIconButton as="a" href="#">
      <LogoTwilioIcon size="sizeIcon20" decorative={false} title="Go to Console homepage" />
    </SidebarHeaderIconButton>
    <SidebarHeaderLabel>Twilio Console</SidebarHeaderLabel>
  </SidebarHeader>
  <SidebarBody>
  </SidebarBody>
  <SidebarFooter>
    <SidebarCollapseButton
      i18nCollapseLabel="Close sidebar"
      i18nExpandLabel="Open sidebar"
    />
  </SidebarFooter>
</Sidebar>
<SidebarPushContentWrapper collapsed={true} variant="compact">
  <Button variant="primary">
    Toggle Push Sidebar
  </Button>
</SidebarPushContentWrapper>

The "push" Sidebar moves the page content as it expands and collapses. The default variant hides completely on collapse. This can be a useful variant for responsive layouts, where screen real estate can be limited on smaller viewports.

<Sidebar
  sidebarNavigationSkipLinkID={sidebarNavigationSkipLinkID}
  topbarSkipLinkID={topbarSkipLinkID}
  mainContentSkipLinkID={mainContentSkipLinkID}
  collapsed={false}
  variant="default"
>
  <SidebarHeader>
    <SidebarHeaderIconButton as="a" href="#">
      <LogoTwilioIcon size="sizeIcon20" decorative={false} title="Go to Console homepage" />
    </SidebarHeaderIconButton>
    <SidebarHeaderLabel>Twilio Console</SidebarHeaderLabel>
  </SidebarHeader>
  <SidebarBody></SidebarBody>
  <SidebarFooter>
    <SidebarCollapseButton
      i18nCollapseLabel="Close sidebar"
      i18nExpandLabel="Open sidebar"
    />
  </SidebarFooter>
</Sidebar>
<SidebarPushContentWrapper collapsed={false} variant="default">
  <Box padding="space70">
    <Button variant="primary" mainContentSkipLinkID={mainContentSkipLinkID}>
      Toggle Push Sidebar
    </Button>
  </Box>
</SidebarPushContentWrapper>

The "overlay" Sidebar sits on top of the page content as it expands and collapses. The compact variant maintains a fixed visible width on collapse.

A significant downside to the overlay Sidebar is that it can cover up or hide page content, which can result in a poor user experience for some users, particularly those with low vision or cognitive disabilities. If you choose to use this option in your application, you should carefully weigh up the accessibility challenges you might introduce to some Twilio customers against your desired experience and use case.

<Sidebar
  sidebarNavigationSkipLinkID={sidebarNavigationSkipLinkID}
  topbarSkipLinkID={topbarSkipLinkID}
  mainContentSkipLinkID={mainContentSkipLinkID}
  collapsed={true}
  variant="compact"
>
  <SidebarHeader>
    <SidebarHeaderIconButton as="a" href="#">
      <LogoTwilioIcon size="sizeIcon20" decorative={false} title="Go to Console homepage" />
    </SidebarHeaderIconButton>
    <SidebarHeaderLabel>Twilio Console</SidebarHeaderLabel>
  </SidebarHeader>
  <SidebarBody></SidebarBody>
  <SidebarFooter>
    <Box padding="space70">
      <SidebarCollapseButton
        i18nCollapseLabel="Close sidebar"
        i18nExpandLabel="Open sidebar"
      />
    </Box>
  </SidebarFooter>
</Sidebar>
<SidebarOverlayContentWrapper collapsed={true} variant="compact">
  <Button variant="primary">
    Toggle Overlay Sidebar
  </Button>
</SidebarOverlayContentWrapper>

The "overlay" Sidebar sits on top of the page content as it expands and collapses. The default variant hides completely on collapse.

<Sidebar
  sidebarNavigationSkipLinkID={sidebarNavigationSkipLinkID}
  topbarSkipLinkID={topbarSkipLinkID}
  mainContentSkipLinkID={mainContentSkipLinkID}
  collapsed={false}
  variant="default"
>
  <SidebarHeader>
    <SidebarHeaderIconButton as="a" href="#">
      <LogoTwilioIcon size="sizeIcon20" decorative={false} title="Go to Console homepage" />
    </SidebarHeaderIconButton>
    <SidebarHeaderLabel>Twilio Console</SidebarHeaderLabel>
  </SidebarHeader>
  <SidebarBody></SidebarBody>
  <SidebarFooter>
    <SidebarCollapseButton
      i18nCollapseLabel="Close sidebar"
      i18nExpandLabel="Open sidebar"
    />
  </SidebarFooter>
</Sidebar>
<SidebarOverlayContentWrapper collapsed={false} variant="default">
  <Box as="main" padding="space70" id={mainContentSkipLinkID}>
    <Button variant="primary">
      Toggle Overlay Sidebar
    </Button>
  </Box>
</SidebarOverlayContentWrapper>

The Sidebar comes with some smaller components that can be used to compose a Sidebar to your application's needs.

The Sidebar header is a container for the application's name and associated icon. It is placed at the top of the Sidebar and can be used to orientate the user to the root of the application they are using.

The SidebarHeaderIconButton is designed to be used as a way to navigate back to the application's root. It can take any product or brand icon, depending on what application you are building. You must choose whether or not you want to render your SidebarHeaderIconButton as a link or a button by setting the as and a corresponding onClick or href. We recommend rendering as an anchor element so a user can navigate to the homepage via a URL route.

The SidebarHeaderLabel should be used to display the name of the application the user is currently in.

<Box backgroundColor="colorBackgroundInverse">
  <SidebarHeader>
    <SidebarHeaderIconButton href="/" as="a">
      <ProductFlexIcon size="sizeIcon20" decorative={false} title="Go to Flex homepage" />
    </SidebarHeaderIconButton>
    <SidebarHeaderLabel>Twilio Console</SidebarHeaderLabel>
  </SidebarHeader>
</Box>

The SidebarBody component is used to house the main content of the sidebar. Typically, this includes the Sidebar Navigation collection of components that can be used to compose your applications navigation structure.

The SidebarBody should be place between the SidebarHeader and SidebarFooter, within the Sidebar.

<Box backgroundColor="colorBackgroundInverse">
  <SidebarBody>
    <SidebarNavigation aria-label="Main navigation" 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>
    </SidebarNavigation>
  </SidebarBody>
</Box>

The SidebarBetaBadge component is used to indicate that a product or feature is in beta. It should be used in conjunction with the Sidebar navigation items.

<SidebarBetaBadge as="span">Beta</SidebarBetaBadge>

The SidebarFooter is used to house the collapse feature of the Sidebar. It is anchored to the foot of the Sidebar and should contain the SidebarCollapseButton component.

Use the SidebarCollapseButton to control the expand and collapse behavior of the Sidebar.

<Box backgroundColor="colorBackgroundInverse">
  <SidebarFooter>
    <SidebarCollapseButton
      onClick={() => setPushSidebarCollapsed(!pushSidebarCollapsed)}
      i18nCollapseLabel="Close sidebar"
      i18nExpandLabel="Open sidebar"
    />
  </SidebarFooter>
</Box>

The Sidebar incorporates a feature known as "Skip links". This feature provides users with the ability to bypass large, repeated content areas, such as navigation. Skip Links are essentially a hidden set of links that facilitate navigation to key points within the application. Within the Sidebar, there are three types of skip links:

• Skip to navigation - allows quick access to the site navigation.
• Skip to Topbar - enables a swift jump to the site's Topbar.
• Skip to content - provides a fast route to the main content, bypassing both the Sidebar and Topbar.

Skip Links are the first items in the Document Object Model (DOM) structure. They remain hidden until a keyboard user presses the Tab key, at which point the skip link becomes visible and is brought into user focus.

For these links to function correctly, it's vital to correctly assign unique ID references to the corresponding DOM elements:

• sidebarNavigationSkipLinkID: This ID should be given to the SidebarNavigation component.
• mainContentSkipLinkID: This ID should be assigned to the container that wraps the main content of your application.
• topbarSkipLinkID: This ID should be given to the Topbar component in your application.

If these unique ID references are not correctly applied to the target DOM elements and passed to the Sidebar, the Skip Links will not function as intended.