Primary navigation
Primary navigation is the principal navigation on any interface. It provides users global access from one page to another. It usually appears at the top of the pages and leads users to different sections within the site. It provides consistent and quick access to sections/pages that users most likely look for on a site, with minimal clicks or need to search.
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
Configure: select the dropdowns below to display the variety of options that primary navigation supports.
Code
Responsive preview
Usage best practices
Consider using primary navigation when:
- linking to the most important first-level pages of the site
- users need quick access to a specific section or a page on the website
Primary navigation item examples:
- home
- 311
- events
Do
Back your primary navigation design with a good understanding of your user's behaviours and expectations.
Limit the number of primary navigation items to the most important, to minimize users' mental load and facilitate understanding the site's organization.
Don't
Do not create primary navigation based solely on organizational structure as it may not fit the users' mental models.
Do not add too many primary navigation items. Use secondary navigation to create hierarchy.