In-page navigation menu

In-page navigation menu acts as a table of contents, helping users form a mental model of the site. It allows users to quickly discover all main sections within a single page and provide direct access to key needs. It is an effective way to guide users through informational and complex experiences without added interactive cost.


Component data

Component resources:
SCSS files

Functional grouping: Navigation

Demo

Configure: select the dropdowns below to display the variety of options that an in-page navigation supports.


Code


				
			

Responsive preview

Usage best practices

Consider using in-page navigation menu when:

  • the site covers a large amount of topics with similar level of need for attention
  • the site's sole function is to provide practical information to the users in the simplest way possible

Related components:

Do

Do

Create and group menu items in a  way that is logical to your users.

Do

Make group headings prominent and clear for scannability.