Ripple Design System

In-page navigation

The In-page navigation component sits above a page’s main content and shows a set of links.


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.


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.