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 | coc-card-item.js

Functional grouping: Navigation


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



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:



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


Make group headings prominent and clear for scannability.