A NSW Government website
Design System v3.2.0

In-page navigation

In-page navigation helps users scan and navigate to content on the page quickly.

Figma React

Usage

In-page navigation increases discoverability and engagement of content by providing quick access to desired content. Use for longer content pages to act as a table of contents, providing users with a summary and quick navigation to sections.

When to avoid

Do not use to link externally or to another page, consider a text link or list link.

How this component works

In-page navigation is placed above the main content of a page and anchor links headings to their location in the content.

The lefthand highlight bar visually separates the component from the page content and groups the navigation.

Accessibility

All components are responsive and meet WCAG 2.1 AA accessibility guidelines.