Navigation Design

Main Menu

Main Navigation

Purpose: Serves as the primary navigation for the site, guiding users to the most important sections of the website

• Use clear, descriptive labels for each level menu item, avoid jargon to ensure language is understandable by any user.
• Limit the number of top level items to prevent visual clutter.
• Use drop-down for subcategories.
• On mobile devices a hamburger or toggle menu should be used.
• All menu items should have hover, focus and active states.

Secondary Navbar

Secondary navigation

Purpose: Secondary navigation should provide contextual or secondary navigation used on subpages.

Accepted Variant

Font-weight: Bold
Text: Uppercase
Font size: 16px
Line height: 32px
Letter spacing: 0

• Secondary menu will be positioned sticky on webpage scroll and relative to website header.
• To be used on subpages if necessary.
• Use clear, descriptive labels for each level menu item, avoid jargon to ensure language is understandable by any user.
• Limit the number of top level items to prevent visual clutter.
• On mobile devices a hamburger or toggle menu should be used.
• Al menu items should have hover, focus and active states.

Side Menu

Side Navigation

Purpose: Side menu navigation should provide contextual or secondary navigation used on subpages.

Footer Menu

Footer Navigation

Purpose: Contains secondary links that are important for legal, informational and support purposes

Breadcrumbs

Breadcrumbs Navigation

Purpose: Breadcrumbs should provide a visual trail of the user’s location in the site hierarchy helping with navigation and orientation

Accepted Breadcrumbs Variants

Font size: 14px
Line height: 32px
Letter spacing:0

Navigation Design Document