Navigation

The primary navigation header should sit at the top of every page instance. When a user scrolls up, it will reveal itself back on screen by pushing in from the top of the browser window.

Primary navigation

![Primary navigation 1](/images/Navigation/Navigation.png) ![Primary navigation 2](/images/Navigation/M_Navigation.png)

Use guidance

The Primary Navigation header should sit at the top of every page instance. When a user scrolls up, it will reveal itself back on screen by pushing in from the top of the browser window. The navigation serves as a universal accesspoint for all parts of the website.

Secondary Navigation

![Secondary navigation 1](/images/Navigation/SecondaryNavigation.png) ![Secondary navigation 2](/images/Navigation/M_SecondaryNavigation.png)

Use guidance

The Secondary Navigation features exclusively on content pages. It is positioned on the left side of the page and provides the user with a simple navigable list. The component is composed of an interactive header (”Understanding MS” in the instance above) and subcategory headers which also function as interactive links. A blue highlight state is positioned on the left side to indicate the current viewed page.

Use on content pages as a secondary mode of navigation
Indicate the name of the section (“MS Facts” in the instance above)
Feature multiple of these per page. Only feature the relevant subcategory headings for the section
Fix the top of the browser. This is distracting and only helpful for very very long pieces of content

Up next