In-page navigation

Usage

Use in-page navigation to make scanning and navigating within a single page quicker for users. This component shows links to headings that are on the current page. It sits at the top of the page.

Use in-page navigation for longer content pages. It acts as a table of contents, providing users with a summary and quick navigation across the page.

The left-hand highlight bar:

• separates the component from the page content
• groups the navigation.

When and how to use

• In-page Navigation is ideal for pages with a lot of content. This will help users find their relevant content.
• Use headings throughout your content, such as headings level 2 (H2) and 3 (H3). You can use these as navigation links at the start of the page, like a table of contents.
• Use subheadings as indented navigation links from the page.

When and how not to use

• Don't link to other pages, including on external sites.
• Never use colons in the heading.
• Don't use it if you have less than 2 navigation links.
• Don't use it with component headings, such as accordion item headings.

Theming

Ripple’s theming applies colour to in-page navigation so that the user understands:

• its links and navigation heading relate to each other
• they are deliberately separated from the main content.

To create your own theme, see theming guidance for designers or theming guidance for developers.