Agriculture Design System
Design System for import and export services

Inpage nav

Also known as Page contents, Inpage nav links help users scan page contents and quickly navigate to different sections.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/inpage-nav';
Open in Playroom, opens in a new tabOpen responsive preview
<Stack gap={3}>
	<InpageNav
		title="On this page"
		links={[
			{ href: '#section-1', label: 'Section 1' },
			{ href: '#section-2', label: 'Section 2' },
			{ href: '#section-3', label: 'Section 3' },
		]}
	/>
	<Stack id="section-1" alignItems="flex-start" gap={1.5}>
		<H2>Section 1</H2>
		<Text as="p">
			This is a standard paragraph - sm/default (P). This is a standard
			paragraph - sm/default (P). This is a standard paragraph - sm/default (P).
			This is a standard paragraph - sm/default (P). This is a standard
			paragraph - sm/default (P). This is a standard paragraph - sm/default (P).
		</Text>
		<DirectionLink direction="up" href="#main-content">
			Back to top
		</DirectionLink>
	</Stack>
	<Stack id="section-1" alignItems="flex-start" gap={1.5}>
		<H2>Section 2</H2>
		<Text as="p">
			This is a standard paragraph - sm/default (P). This is a standard
			paragraph - sm/default (P). This is a standard paragraph - sm/default (P).
			This is a standard paragraph - sm/default (P). This is a standard
			paragraph - sm/default (P). This is a standard paragraph - sm/default (P).
		</Text>
		<DirectionLink direction="up" href="#main-content">
			Back to top
		</DirectionLink>
	</Stack>
	<Stack id="section-3" alignItems="flex-start" gap={1.5}>
		<H2>Section 3</H2>
		<Text as="p">
			This is a standard paragraph - sm/default (P). This is a standard
			paragraph - sm/default (P). This is a standard paragraph - sm/default (P).
			This is a standard paragraph - sm/default (P). This is a standard
			paragraph - sm/default (P). This is a standard paragraph - sm/default (P).
		</Text>
		<DirectionLink direction="up" href="#main-content">
			Back to top
		</DirectionLink>
	</Stack>
</Stack>

The Inpage nav (or Page contents) is placed at the top of a page and consists of anchor links that guide users to page sections.

The Inpage nav should be used in combination with ‘Back to top’ links using Direction links at the end of sections to help users return to the Inpage nav on long pages.

The solid left-hand border visually separates the component from the page content.

Do

  • use to improve discoverability by allowing users to skip sections they do not need
  • ensure the anchor link text and section title are the same
  • use unique, accurate headings to describe section content
  • use for longer pages as a table of contents
  • use ‘Back to top’ links using Direction links at the end of sections to help users return to the Inpage nav on long pages.

Don’t

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

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}>
	<InpageNav
		links={[
			{ href: '#section-1', label: 'Section 1' },
			{ href: '#section-2', label: 'Section 2' },
			{ href: '#section-3', label: 'Section 3' },
		]}
		title="Inpage nav: on light background"
	/>
</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">
	<InpageNav
		links={[
			{ href: '#section-1', label: 'Section 1' },
			{ href: '#section-2', label: 'Section 2' },
			{ href: '#section-3', label: 'Section 3' },
		]}
		title="Inpage nav: on dark background"
	/>
</Box>
  • Direction link – Direction links are links which communicate flow to other parts of a page or process.
  • Link list – Link list is a simple set of vertical or horizontal links used for site navigation and to order information for users.
  • Side nav – A vertical list of links used for site navigation, typically placed beside body content.
  • Sub nav – A horizontal list of links typically placed between the main navigation and page content.
Edit this page