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
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files l coc.nav.js | coc.animations.js
Functional grouping: Navigation
Demo
Code
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
Do
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.