Navigation Bar

Users rely on the navigation bar to navigate and orient themselves in your UI.

How to use

Variants


Menu
When you hoover over the navigation bar on top of the page, the background will become white and the text dark to increase readability.

Menu Default

Menu Hoover

Default state of the menu.

When you hoover over the menu, the background will become white and the text dark to increase readability.

Menu-items variants

There are 2 different variations of the menu-items: one variation opens a sub-menu (sub-menu items) and the other variation links directly to another page (direct-link menu items).

Sub-menu items

Direct-link menu items

Some menu items trigger sub-menus for further navigation options.

Direct-link menu items navigate directly to specific pages.


State

Menu item
When you hoover over or select a menu item, this dark bar will appear above the menu item.


Sub-menu item

When you hoover over or select a sub-sub-menu item, the icon arrow-right will appear on the right of the sub-sub-menu text.