Side nav

A vertical list of links used for site navigation, typically placed beside body content.

View in Figma View in Storybook View in Github

import { ... } from '@ag.ds-next/react/side-nav';

Open in Playroom, opens in a new tab

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

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.

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.

Open in Playroom, opens in a new tab

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

Open in Playroom, opens in a new tab

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

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.

Edit this page

Side nav

Sub-level items

Visible when active

Always visible

Related components