Agriculture Design System
Design System for import and export services

Side nav

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

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/side-nav';
Open in Playroom, opens in a new tabOpen responsive preview
/**
 * 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.

Open in Playroom, opens in a new tabOpen responsive preview
/**
 * 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 tabOpen responsive preview
/**
 * 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>

Colour

AgDS foreground components respond to the background colour of their parent container. When placed on a dark palette background, the dark palette variant of the component is displayed. When placed on a light palette background the light palette variant is displayed.

This logic ensures sufficient contrast between foreground and background elements is maintained to meet WCAG 2.1 AA, 4:5:1 contrast ratio for text (WCAG 1.4.3) and 3:1 for graphic elements that convey information (WCAG 1.4.11).

This component has a 'bodyAlt' variant. Components with a 'bodyAlt' variant utiliseshadeAlt to highlight interface components and content that sit on 'bodyAlt' background. shadeAlt is also used to fill interactive components, ensuring sufficient contrast is maintained for hover states.

Light palette

Open in Playroom, opens in a new tabOpen responsive preview
<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5}>
	<Columns cols={{ xs: 1, sm: 2 }} gap={0}>
		<Stack gap={1.5} padding={1.5}>
			<H4>Side nav: on light body background</H4>
			<SideNav
				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',
						items: [
							{
								href: '#lodge-online/pre-filling',
								label: 'Pre-filling your online tax return',
							},
						],
						label: 'Lodge online',
					},
					{
						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',
						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',
							},
						],
						label: 'In detail',
					},
				]}
				title="Lodging your tax return"
				titleLink="#"
			/>
		</Stack>
		<Stack background="bodyAlt" gap={1.5} padding={1.5}>
			<H4>Side nav: on light bodyAlt background</H4>
			<SideNav
				activePath="#in-detail"
				background="bodyAlt"
				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',
	
						items: [
							{
								href: '#lodge-online/pre-filling',
								label: 'Pre-filling your online tax return',
							},
						],
						label: 'Lodge online',
					},
					{
						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',
						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',
							},
						],
						label: 'In detail',
					},
				]}
				title="Lodging your tax return"
				titleLink="#"
			/>
		</Stack>
	</Columns>
</Box>

Dark palette

Open in Playroom, opens in a new tabOpen responsive preview
<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5} palette="dark">
	<Columns cols={{ xs: 1, sm: 2 }} gap={0}>
		<Stack gap={1.5} padding={1.5}>
			<H4>Side nav: on dark body background</H4>
			<SideNav
				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',
						items: [
							{
								href: '#lodge-online/pre-filling',
								label: 'Pre-filling your online tax return',
							},
						],
						label: 'Lodge online',
					},
					{
						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',
						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',
							},
						],
						label: 'In detail',
					},
				]}
				title="Lodging your tax return"
				titleLink="#"
			/>
		</Stack>
		<Stack background="bodyAlt" gap={1.5} padding={1.5}>
			<H4>Side nav: on dark bodyAlt background</H4>
			<SideNav
				activePath="#in-detail"
				background="bodyAlt"
				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',
	
						items: [
							{
								href: '#lodge-online/pre-filling',
								label: 'Pre-filling your online tax return',
							},
						],
						label: 'Lodge online',
					},
					{
						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',
						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',
							},
						],
						label: 'In detail',
					},
				]}
				title="Lodging your tax return"
				titleLink="#"
			/>
		</Stack>
	</Columns>
</Box>
  • 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