Sidebar Navigation
Sidebar Navigation controls both flat and hierarchical navigation structures within an application's sidebar.
<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>
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.
- You must provide an
aria-labelprop 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
SidebarNavigationItemin the navigation, not nested within. - Every
SidebarNavigationItemmust implement an anchor element by assigning a valid URL to thehrefattribute. - A
selectedSidebarNavigationItemis designated as the "current page" viaaria-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.
<Box backgroundColor="colorBackgroundInverse"><SidebarBody><SidebarNavigation aria-label="main"><SidebarNavigationItemhref="https://google.com"selectedicon={<ProductContactCenterAdminIcon decorative={false} title="Admin" />}>Admin</SidebarNavigationItem><SidebarNavigationItemhref="https://google.com"icon={<ProductContactCenterTasksIcon decorative={false} title="Agent dashboard" />}>Agent dashboard</SidebarNavigationItem><SidebarNavigationItemhref="https://google.com"icon={<ProductContactCenterTeamsIcon decorative={false} title="Teams view" />}>Teams view</SidebarNavigationItem><SidebarNavigationItemhref="https://google.com"icon={<ProductContactCenterQueuesIcon decorative={false} title="Queue stats" />}>Queue stats</SidebarNavigationItem><SidebarNavigationItemhref="https://google.com"icon={<ProductPrivacyIcon decorative={false} title="Privacy" />}>Privacy</SidebarNavigationItem><SidebarNavigationItemhref="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.
<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.
<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>
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.
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
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/>)
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>
);
};
| Prop | Type | Description | Default |
|---|---|---|---|
element? | string | Overrides the default element name to apply unique styles with the Customization Provider | 'SIDEBAR_NAVIGATION' |
children? | React.ReactNode | ||
aria-label | string | Accessible name for the navigation element, useful for application navigation using assistive technology | |
hideItemsOnCollapse? | boolean | Set whether you would like the navigation item to hide when in a collapsed sidebar | |
hierarchical? | boolean | Set whether you are displaying an hierarchical navigation structure. |
| Prop | Type | Description | Default |
|---|---|---|---|
element? | string | Overrides the default element name to apply unique styles with the Customization Provider | 'SIDEBAR_NAVIGATION_ITEM' |
children? | React.ReactNode | ||
href | string | String for the url to link to. | |
selected | boolean | Set to indicate this item matches to the current page the user is on | |
icon | React.ReactNode | Any product icons can be used here |
| Prop | Type | Description | Default |
|---|---|---|---|
element? | string | Overrides the default element name to apply unique styles with the Customization Provider | 'SIDEBAR_NAVIGATION_DISCLOSURE' |
children? | React.ReactNode | ||
baseId? | string | Base ID string to base subsequent, dynamic IDs on | |
visible? | boolean | Set the initial visibility of the Disclosure | false |
state? | object | Ability to control the disclosure by passing in the returned values from the useSidebarNavigationDisclosureState hook |
| Prop | Type | Description | Default |
|---|---|---|---|
element? | string | Overrides the default element name to apply unique styles with the Customization Provider | 'SIDEBAR_NAVIGATION_DISCLOSURE_HEADING_WRAPPER' |
children? | React.ReactNode |
| Prop | Type | Description | Default |
|---|---|---|---|
element? | string | Overrides the default element name to apply unique styles with the Customization Provider | 'SIDEBAR_NAVIGATION_DISCLOSURE_HEADING' |
children? | React.ReactNode | ||
disabled? | boolean | Set to disable the ability to expand the Navigation section | |
focusable? | boolean | Set to control the focusability of the Navigation Heading | |
selected? | boolean | Set to make the Heading part of the selected page hierarchy | |
icon? | React.ReactNode | Icon to be displayed within the Heading |
| Prop | Type | Description | Default |
|---|---|---|---|
element? | string | Overrides the default element name to apply unique styles with the Customization Provider | 'SIDEBAR_NAVIGATION_DISCLOSURE_CONTENT' |
children? | React.ReactNode |
| Prop | Type | Description | Default |
|---|---|---|---|
element? | string | Overrides the default element name to apply unique styles with the Customization Provider | 'SIDEBAR_NAVIGATION_SEPARATOR' |
Pass these as part of an object to the hook.
| Prop | Type | Description | Default |
|---|---|---|---|
baseId? | string | Set to create a base ID that all dynamic IDs will be based on | |
visible? | boolean | Set the initial visibility of the Disclosure |
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.
| Prop | Type | Description | Default |
|---|---|---|---|
baseId? | string | ID that will serve as a base for all the items IDs. | |
visible? | boolean | Whether it's visible or not | |
toggle? | () => void | Toggles the visible state |
Changelog
733709127#3395 Thanks @SiTaggart! - Modified the compile target of our JavaScript bundles fromnodetobrowserto minimize the risk of clashing with RequireJS. This is marked as a major out of an abundance of caution. You shouldn't need to do anything but we wanted you to be aware of the change on the off chance it has unintended consequences
- Updated dependencies [
733709127]:- @twilio-paste/uid-library@2.0.0
- @twilio-paste/color-contrast-utils@5.0.0
- @twilio-paste/anchor@12.0.0
- @twilio-paste/badge@8.0.0
- @twilio-paste/button@14.0.0
- @twilio-paste/screen-reader-only@13.0.0
- @twilio-paste/spinner@14.0.0
- @twilio-paste/truncate@14.0.0
- @twilio-paste/stack@8.0.0
- @twilio-paste/box@10.0.0
- @twilio-paste/disclosure-primitive@2.0.0
- @twilio-paste/text@10.0.0
- @twilio-paste/customization@8.0.0
- @twilio-paste/design-tokens@10.0.0
- @twilio-paste/icons@12.0.0
- @twilio-paste/animation-library@2.0.0
- @twilio-paste/reakit-library@2.0.0
- @twilio-paste/styling-library@3.0.0
- @twilio-paste/style-props@9.0.0
- @twilio-paste/theme@11.0.0
- @twilio-paste/types@6.0.0
- @twilio-paste/utils@5.0.0
3c8e02a3d#3346 Thanks @SiTaggart! - [Sidebar] fixed an issue with overlay sidebars where the topbar would be over the sidebar when sidebar is expanded
4d1f7c65e#3360 Thanks @SiTaggart! - Improved types where Paste extends the base HTML element that a component is based on, so that the existing blocked styling properties are not exposed as valid properties for the component via Typescript. This leads to less confusion around what is supported by a Paste component.Existing blocked component properties include:
classNamestylecolor
bb49609a7#3332 Thanks @TheSisb! - [Sidebar]SidebarNavigationItemnow opens external links with the correct defaultrelandtargetattributes.
61c310e78#3317 Thanks @SiTaggart! - [Sidebar] Included skip link functionality, allowing consumers an easy way to create application navigation skip links. Added three new required propsmainContentSkipLinkID,sidebarNavigationSkipLinkIDandtopbarSkipLinkID. Plus three optional internationalization props to translate the skip link text
b9d9e7123#3328 Thanks @SiTaggart! - [Sidebar] corrected the SideBarNavigationItem children proptype validation rule
b9d9e7123#3328 Thanks @SiTaggart! - [Sidebar] improved SSR handling of the push content wrapper for small screen responsive layouts
83307d2e2#3306 Thanks @SiTaggart! - [Sidebar] Improved ability to place children, like badges, inside a navigation item and have it positioned nicely by default
6d384057e#3303 Thanks @TheSisb! - [Sidebar] fix flicker in animation when expanding/collapsing the sidebar in compact mode. Reduce width of custom scrollbar and add margin-top.
db35f7150#3217 Thanks @TheSisb! - [Sidebar]SidebarBetaBadgeno longer passesonClickwhenas="span". Other miscellaneous typescript fixes.
6060c8dfd#3205 Thanks @TheSisb! - [Sidebar] fix SidebarOverlayContentWrapper left margin whencompact=true
ed2ae23e2#3212 Thanks @TheSisb! - [Sidebar] split up SidebarHeader so it now is composable with the new SidebarHeaderLabel and SidebarHeaderIconButton components