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>
);
};
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
any- 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
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
SIDEBAR_BODY
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
collapsed
Whether the sidebar is collapsed / closed.
- Type
boolean
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
SIDEBAR_PUSH_CONTENT_WRAPPER
variant
Whether the sidebar should hide completely or collapse into a fixed width bar.
- Type
Variants- Default
default
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
collapsed
Whether the sidebar is collapsed / closed.
- Type
boolean
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
SIDEBAR_OVERLAY_CONTENT_WRAPPER
variant
Whether the sidebar should hide completely or collapse into a fixed width bar.
- Type
Variants- Default
default
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
SIDEBAR_HEADER
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
SIDEBAR_HEADER_LABEL
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
as RequiredRequired
HTML element to render the button as.
- Type
"a" | "button"
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
SIDEBAR_HEADER_ICON_BUTTON
href
The URL to navigate to if the button is rendered as an anchor element.
- Type
any
onClick
Callback function to handle the button's click event.
- Type
any
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
i18nCollapseLabel RequiredRequired
A label for the collapse trigger for screenreader software.
- Type
string
i18nExpandLabel RequiredRequired
A label for the expand trigger for screenreader software.
- Type
string
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
SIDEBAR_COLLAPSE_BUTTON
onClick
Callback function to handle the click event
- Type
() => void
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
aria-label RequiredRequired
Accessible name for the navigation element, useful for application navigation using assistive technology
- Type
string
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
SIDEBAR_NAVIGATION
hideItemsOnCollapse
Set whether you would like the navigation item to hide when in a collapsed sidebar
- Type
boolean
hierarchical
Set whether you are displaying an hierarchical navigation structure.
- Type
boolean
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
SIDEBAR_NAVIGATION_DISCLOSURE_HEADING_WRAPPER
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
SIDEBAR_NAVIGATION_DISCLOSURE_HEADING
icon
Icon to be displayed within the Heading
- Type
| string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal
selected
Set to make the Heading part of the selected page hierarchy
- Type
boolean
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
SIDEBAR_NAVIGATION_DISCLOSURE_CONTENT
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
SIDEBAR_NAVIGATION_ITEM
href
String for the url to link to.
- Type
any
icon
Any product icons can be used here
- Type
| string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal
selected
Set to indicate this item matches to the current page the user is on
- Type
boolean
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
as RequiredRequired
The HTML element ro render the Badge as.
- Type
"button" | "span"- Default
span
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
SIDEBAR_BETA_BADGE
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.