Side nav
A vertical list of links used for site navigation, typically placed beside body content.
import { ... } from '@ag.ds-next/react/side-nav';/** * Note: we are only restricting this example to 6 cols for the docs, * 12 cols is the recommendation for best results in application code */ <Columns cols={6}> <Column columnSpan={{ xs: 12, md: 4, lg: 3 }}> <SideNav title="Lodging your tax return" titleLink="#" 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', }, ], }, ]} /> </Column> </Columns>
The side navigation allows users to find other pages which share a similar topic or section. By default, it supports three sub-levels 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 sub-level
Don’t
- create more than 2 sub-levels
- place on the right-hand side of content
- keep all lists with sub-levels open if it will cause excessive scrolling or tab stops for keyboard users.
Sub-level items
To help users comprehend the side navigation, choose a strategy that is appropriate for the number of items in the list.
Visible when active
When the list of items is long, prefer showing any sub-level lists when either navigating to the parent item or one of the sub-level items. Since this is the default behaviour, either setting subLevelVisible="whenActive" or omitting this prop will use this strategy.
/** * Note: we are only restricting this example to 6 cols for the docs, * 12 cols is the recommendation for best results in application code */ <Columns cols={6}> <Column columnSpan={{ xs: 12, md: 4, lg: 3 }}> <SideNav activePath="#in-detail/record-keeping" subLevelVisible="whenActive" title="Lodging your tax return" titleLink="#" 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', }, ], }, ]} /> </Column> </Columns>
Always visible
When you have a small number of sub-level items, it’s easier for users to see all items at once. Set subLevelVisible="always" to achieve this.
/** * Note: we are only restricting this example to 6 cols for the docs, * 12 cols is the recommendation for best results in application code */ <Columns cols={6}> <Column columnSpan={{ xs: 12, md: 4, lg: 3 }}> <SideNav activePath="#page-1" subLevelVisible="always" title="Navigation" titleLink="#" items={[ { href: '#page-1', label: 'Landing page 1', }, { href: '#page-2', label: 'Landing page 2', items: [ { href: '#next-page/page-2-1', label: 'Page 2.1', }, { href: '#next-page/page-2-2', label: 'Page 2.2', }, ], }, ]} /> </Column> </Columns>
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.