Digital pattern library

Navigation bar

The navigation bar pattern displays a primary horizonal and optional secondary navigation.

Each menu should contains 5 to 8 links.

Primary only navigation

Code

Primary and expanded secondary navigation

Secondary navigation is achieved by using the same pattern for primary, but adding a secondary class to the main element.

Code

Primary only navigation (study blue)

Code

Primary and expanded secondary navigation (study blue)

Secondary navigation is achieved by using the same pattern for primary, but adding a secondary class to the main element.

Code