Inpage nav

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

View in Figma View in Storybook View in Github

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

Open in Playroom, opens in a new tab

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

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

use to navigate to another page – consider a Text link or Link list.

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

Inpage nav

Related components