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