Skip to contentSkip to navigationSkip to topbar
Paste assistant Assistant
Figma
Star

Sidebar Navigation

Version 1.1.1GithubStorybook

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

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>
  );
};
Sidebar page anchor

mainContentSkipLinkID RequiredRequired

ID of the element that contains the main content of your application

Type
string

sidebarNavigationSkipLinkID RequiredRequired

ID given to the SidebarNavigation component

Type
string

topbarSkipLinkID RequiredRequired

ID given to the Topbar component

Type
string

variant RequiredRequired

Whether the sidebar should hide completely or collapse into a fixed width bar.

Type
Variants

collapsed

Whether the sidebar is collapsed / closed.

Type
boolean

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
SIDEBAR

i18nMainContentSkipLinkText

String used to change the text of the "skip to content" link

Type
string
Default
Skip to content

i18nNavigationSkipLinkText

String used to change the text of the "skip to navigation" link

Type
string
Default
Skip to navigation

i18nTopbarSkipLinkText

String used to change the text of the "skip to topbar" link

Type
string
Default
Skip to topbar

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
SIDEBAR_BODY

SidebarPushContentWrapper

SidebarPushContentWrapper page anchor

collapsed

Whether the sidebar is collapsed / closed.

Type
boolean

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
SIDEBAR_PUSH_CONTENT_WRAPPER

variant

Whether the sidebar should hide completely or collapse into a fixed width bar.

Type
Variants
Default
default

SidebarOverlayContentWrapper

SidebarOverlayContentWrapper page anchor

collapsed

Whether the sidebar is collapsed / closed.

Type
boolean

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
SIDEBAR_OVERLAY_CONTENT_WRAPPER

variant

Whether the sidebar should hide completely or collapse into a fixed width bar.

Type
Variants
Default
default