Agriculture Design System
Beta
Design System for the Export Service

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';

In-page navigation improves discoverability by allowing users to skip sections they don’t need and go straight to content relevant to their task.

Viewed as a whole, they provide users with a summary of what content is on the page.

Lack of nesting support

We explored adding nested links, but concluded that by keeping our navigation structures simple, we can create a better user experience and help users find the information they need quickly and easily.

We also recommend using clear and concise labels.