Navigation bar

The navigation bar is the main way to navigate the website. It contains links to all the sections and global tools, and it also displays the logo of the project but never partners’ logos or any other visual call to action. From second level pages on, it displays the page title and sub-section links (if any).

Content

Composition

Main sections

When the number of the navigation elements are bigger than the screen width allows, there will be a new element named “More” that will progressively group the elements from the right-hand side. Navigation bar elements should be sorted by relevance in order to avoid being hidden from view.

See example 1 See example 2

Examples

Click on the thumbnails to see how the navigation looks when applied to a real-life project.