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

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

Do

Back your primary navigation design with a good understanding of your user's behaviours and expectations.

Do

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

Don't

Do not create primary navigation based solely on organizational structure as it may not fit the users' mental models.

Don't

Do not add too many primary navigation items. Use secondary navigation to create hierarchy.