SideNav
- Library
- UDS Base
- Repository
- github.com/telus/universal-design-system
- Package
- npmjs.com/package/@telus-uds/components-base
- Package version
- 1.6.1
Loading...
Introduction
import { SideNav } from '@telus-uds/components-base'
A stacked, in-page navigation widget.
Guidance
- Use in conjuntion with a large amount of educational / informational content
- Allow the user to navigate between options frequently and efficiently
SideNav is typically used alongside long text content that is broken down into sections.
/* eslint-disable jsx-a11y/anchor-has-content */
function SideNavWithContent() {
return (
<FlexGrid>
<FlexGrid.Row>
<FlexGrid.Col xs={5}>
<SideNav accordion>
<SideNav.Item href="#section-1">Section 1</SideNav.Item>
<SideNav.ItemsGroup label="Section 2">
<SideNav.Item href="#section-2a">Subsection 2a</SideNav.Item>
<SideNav.Item href="#section-2b">Subsection 2b</SideNav.Item>
<SideNav.Item href="#section-2c">Subsection 2c</SideNav.Item>
</SideNav.ItemsGroup>
<SideNav.Item href="##section-3">Section 3</SideNav.Item>
<SideNav.ItemsGroup label="Section 4">
<SideNav.Item href="#section-4a">Subsection 4a</SideNav.Item>
</SideNav.ItemsGroup>
</SideNav>
</FlexGrid.Col>
<FlexGrid.Col xs={7}>
<Box bottom={4}>
<Typography block header="h1" variant={{ size: 'h1' }}>
Example long content
</Typography>
</Box>
<a id="section-1" />
<Box vertical={4}>
<Typography block header="h2" variant={{ size: 'h2' }}>
1: Heading for a section of the page
</Typography>
</Box>
<Box vertical={1}>
<Typography>
This is some example long textual content broken into multiple sections. There is a
lot of text in multiple paragraphs so the page containing all this content will
require scrolling.
</Typography>
</Box>
<Box vertical={1}>
<Typography>
Some paragraphs will be longer than others. This is some example long textual content
broken into multiple sections. There is a lot of text in multiple paragraphs so the
page containing all this content will require scrolling.
</Typography>
</Box>
<Box vertical={4}>
<Typography block header="h2" variant={{ size: 'h2' }}>
2: Heading for a section with subsections
</Typography>
</Box>
<a id="section-2a" />
<Box vertical={1}>
<Typography block header="h3" variant={{ size: 'h3' }}>
2a: First nested subsection
</Typography>
</Box>
<Box vertical={1}>
<Typography>
This is some example long textual content broken into multiple sections. There is a
lot of text in multiple paragraphs so the page containing all this content will
require scrolling.
</Typography>
</Box>
<Box vertical={1}>
<Typography>
Some paragraphs will be longer than others. This is some example long textual content
broken into multiple sections. There is a lot of text in multiple paragraphs so the
page containing all this content will require scrolling.
</Typography>
</Box>
<a id="section-2b" />
<Box vertical={1}>
<Typography block header="h3" variant={{ size: 'h3' }}>
2b: Second nested subsection
</Typography>
</Box>
<Box vertical={1}>
<Typography>
This is some example long textual content broken into multiple sections. There is a
lot of text in multiple paragraphs so the page containing all this content will
require scrolling.
</Typography>
</Box>
<Box vertical={1}>
<Typography>
Some paragraphs will be longer than others. This is some example long textual content
broken into multiple sections. There is a lot of text in multiple paragraphs so the
page containing all this content will require scrolling.
</Typography>
</Box>
<a id="section-2c" />
<Box vertical={1}>
<Typography block header="h3" variant={{ size: 'h3' }}>
2c: Third nested subsection
</Typography>
</Box>
<Box vertical={1}>
<Typography>
This is some example long textual content broken into multiple sections. There is a
lot of text in multiple paragraphs so the page containing all this content will
require scrolling.
</Typography>
</Box>
<Box vertical={1}>
<Typography>
Some paragraphs will be longer than others. This is some example long textual content
broken into multiple sections. There is a lot of text in multiple paragraphs so the
page containing all this content will require scrolling.
</Typography>
</Box>
<a id="section-3" />
<Box vertical={4}>
<Typography block header="h2" variant={{ size: 'h2' }}>
3: Heading for another section of the page
</Typography>
</Box>
<Box vertical={1}>
<Typography>
This is some example long textual content broken into multiple sections. There is a
lot of text in multiple paragraphs so the page containing all this content will
require scrolling.
</Typography>
</Box>
<Box vertical={1}>
<Typography>
Some paragraphs will be longer than others. This is some example long textual content
broken into multiple sections. There is a lot of text in multiple paragraphs so the
page containing all this content will require scrolling.
</Typography>
</Box>
<Box vertical={4}>
<Typography block header="h2" variant={{ size: 'h2' }}>
4: Heading for last section of the page
</Typography>
</Box>
<a id="section-4a" />
<Box vertical={1}>
<Typography block header="h3" variant={{ size: 'h3' }}>
4a: Last nested subsection
</Typography>
</Box>
<Box vertical={1}>
<Typography>
This is some example long textual content broken into multiple sections. There is a
lot of text in multiple paragraphs so the page containing all this content will
require scrolling.
</Typography>
</Box>
<Box vertical={1}>
<Typography>
Some paragraphs will be longer than others. This is some example long textual content
broken into multiple sections. There is a lot of text in multiple paragraphs so the
page containing all this content will require scrolling.
</Typography>
</Box>
</FlexGrid.Col>
</FlexGrid.Row>
</FlexGrid>
)
}
accordion prop
By default, only one SideNav panel may be open.
If the accordion prop is passed as false, any number of panels may be open at a time.
Loading...
Accessibility
Expanded item groups are marked with aria-expanded, while the active item is has an aria-selected attribute.
Similar patterns are applied on the native platforms.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| variant | objectOf | {} | System variant prop, see variants for more details |
| accordion | bool | true | Identifies if only one `SideNav.ItemsGroup` should be open at a time. |
| children | custom | Specifies the structure and links of the `SideNav`. It may only consist of `SideNav.Item` and `SideNav.ItemsGroup`. | |
| tokens | custom | System tokens prop, see tokens for more details | |
| itemTokens | custom | ||
| groupTokens | custom |