Secondary navigation

Secondary navigation provides a secondary level of links that are either complementary to the primary navigation links, or as sub categories of a primary link.

Secondary navigation lets users access different parts within the a section that contains complex structure and content.

Component data

Component resources:
SCSS files l coc.nav.js | coc.animations.js

Functional grouping: Navigation




Responsive preview

Usage best practices

Consider using primary navigation when:

  • top-level links/primary navigation cannot meaningfully navigate the entire information space and the content
  • a specific section contains complex structure and content that cannot be meaningfully displayed on a single page
  • there are tasks that are secondary but are are used often by certain user groups

Primary navigation item examples:

  • components section of the design system



Use only when it can help users to pathfind and digest the content. Otherwise, keep navigation as flat and compact as possible.


Sufficiently differentiate the secondary navigation from primary navigation with typography and placement strategie.