Side nav
A vertical list of links used for site navigation, typically placed beside body content.
import { ... } from '@ag.ds-next/react/side-nav';<SideNav title="Lodging your tax return" titleLink="#" collapseTitle="In this section" activePath="#in-detail" items={[ { href: '#welcome', label: 'Welcome', }, { href: '#do-you-need-to-lodge-a-tax-return', label: 'Do you need to lodge a tax return?', }, { href: '#lodge-online', label: 'Lodge online', items: [ { href: '#lodge-online/pre-filling', label: 'Pre-filling your online tax return', }, ], }, { href: '#whats-new-for-individuals', label: 'What’s new for individuals', }, { href: '#why-you-may-receive-a-tax-bill', label: 'Why you may receive a tax bill', }, { href: '#in-detail', label: 'In detail', items: [ { href: '#in-detail/record-keeping', label: 'Record keeping', items: [ { href: '#in-detail/record-keeping/tax', label: 'Keeping your tax records', }, { href: '#in-detail/record-keeping/incorrect-amounts', label: 'Incorrect amounts', }, ], }, { href: '#tax-receipt', label: 'Tax receipt', }, { href: '#pre-fill availability', label: 'Pre-fill availability', }, ], }, ]} />
The side navigation allows users to find other pages which share a similar topic or section. By default, it supports three levels of nesting along with an accompanying heading.
On mobile and smaller viewports, the side navigation uses functionality from the accordion component to collapse down to an expandable element.
The background of the SideNav must match the background it is being placed on. For example, if SideNav is placed on a bodyAlt background, please set the background prop to 'bodyAlt'.
Do
- include a concise label
- indent each nesting level
Don’t
- create more than 3 levels of nesting
- place on the right-hand side of content.
Related components
- Inpage nav – Also known as Page contents, Inpage nav links help users scan page contents and quickly navigate to different sections.
- Link list – Link list is a simple set of vertical or horizontal links used for site navigation and to order information for users.
- Sub nav – A horizontal list of links typically placed between the main navigation and page content.