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