SideNav

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

npmjs.com/package/@telus-uds/ds-allium

Package version

1.14.0

Loading...

<SideNav> <SideNav.Item href="#level-1-1">Level 1</SideNav.Item> <SideNav.ItemsGroup label="Group 1"> <SideNav.Item href="#level-2-1">Level 2 - 1</SideNav.Item> <SideNav.Item href="#level-2-2">Level 2 - 2</SideNav.Item> <SideNav.Item href="#level-2-3">Level 2 - 3</SideNav.Item> </SideNav.ItemsGroup> <SideNav.Item href="#level-1-2">Level 1 - 2</SideNav.Item> <SideNav.ItemsGroup label="Group 2"> <SideNav.Item href="#level-2-4">Level 2 - 4</SideNav.Item> </SideNav.ItemsGroup> </SideNav>

<SideNav>
  <SideNav.Item href="#level-1-1">Level 1</SideNav.Item>
  <SideNav.ItemsGroup label="Group 1">
    <SideNav.Item href="#level-2-1">Level 2 - 1</SideNav.Item>
    <SideNav.Item href="#level-2-2">Level 2 - 2</SideNav.Item>
    <SideNav.Item href="#level-2-3">Level 2 - 3</SideNav.Item>
  </SideNav.ItemsGroup>
  <SideNav.Item href="#level-1-2">Level 1 - 2</SideNav.Item>
  <SideNav.ItemsGroup label="Group 2">
    <SideNav.Item href="#level-2-4">Level 2 - 4</SideNav.Item>
  </SideNav.ItemsGroup>
</SideNav>

Introduction

import { SideNav } from '@telus-uds/ds-allium'

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.

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...

<SideNav accordion={false}> <SideNav.Item href="#level-1-1">Level 1 - 1</SideNav.Item> <SideNav.ItemsGroup label="Group 1"> <SideNav.Item href="#level-2-1">Level 2 - 1</SideNav.Item> <SideNav.Item href="#level-2-2">Level 2 - 2</SideNav.Item> <SideNav.Item href="#level-2-3">Level 2 - 3</SideNav.Item> </SideNav.ItemsGroup> <SideNav.Item href="#level-1-2">Level 1 - 2</SideNav.Item> <SideNav.ItemsGroup label="Group 2"> <SideNav.Item href="#level-2-4">Level 2 - 4</SideNav.Item> </SideNav.ItemsGroup> </SideNav>

<SideNav accordion={false}>
  <SideNav.Item href="#level-1-1">Level 1 - 1</SideNav.Item>
  <SideNav.ItemsGroup label="Group 1">
    <SideNav.Item href="#level-2-1">Level 2 - 1</SideNav.Item>
    <SideNav.Item href="#level-2-2">Level 2 - 2</SideNav.Item>
    <SideNav.Item href="#level-2-3">Level 2 - 3</SideNav.Item>
  </SideNav.ItemsGroup>
  <SideNav.Item href="#level-1-2">Level 1 - 2</SideNav.Item>
  <SideNav.ItemsGroup label="Group 2">
    <SideNav.Item href="#level-2-4">Level 2 - 4</SideNav.Item>
  </SideNav.ItemsGroup>
</SideNav>

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.

Platform considerations

The component is available on both native platforms and web.

Props

Name	Type	Default	Description
accordion	bool	true	Identifies if only one 'SideNav.ItemsGroup' should be open at a time.
children	componentPropType(['Item', 'ItemsGroup'])		Specifies the structure and links of the 'SideNav'. It may only consist of 'SideNav.Item' and 'SideNav.ItemsGroup'.
groupTokens	custom
itemTokens	custom
tokens	custom		System tokens prop, see tokens for more details
variant	objectOf	{}	System variant prop, see variants for more details

Tokens

In exceptional circumstances, the following tokens can be passed to this component to override its default styles. Do not do this unless absolutely necessary. Read more about overriding styles.

View Tokens

Prop Name	Token Property	Token Type
tokens	borderColor	color
	borderWidth	border
	borderStyle	borderStyle
itemTokens	borderColor	color
	borderWidth	border
	borderStyle	borderStyle
	paddingLeft	size
	paddingRight	size
	paddingTop	size
	paddingBottom	size
	justifyContent	flexJustifyContent
	color	color
	accentOffset	size
	accentPadding	size
	accentWidth	size
	accentBackgroundColor	color
	fontWeight	fontWeight
	fontName	fontName
	fontSize	fontSize
	lineHeight	lineHeight
	backgroundColor	color
groupTokens	expandDuration	duration
	collapseDuration	duration
	contentPaddingLeft	size
	contentPaddingRight	size
	contentPaddingTop	size
	contentPaddingBottom	size
	icon	icon
	iconColor	color
	iconGap	size
	iconSize	size
	iconPosition	position
	justifyContent	flexJustifyContent
	verticalAlign	verticalAlign

Figma

Variants

This component does not have any stylistic variants.

Feedback

• Spotted a problem with this component? Raise an issue on GitHub
• See any existing issues for this component
• Contact the team on slack in #ds-allium-support