Navigation

The navigation is the list of main categories of an application and lets users navigate through the product.

Status

Status

Healthy

Figma component

Includes a link to a Figma component that has been imported to Supernova

Structure

navigation-structure
  1. Header (product logo)
  2. Body container (nav-menu-items)
  3. Footer (settings, collapse button

Properties

Types

navigation / type=vertical, active section=false, style=dark

Vertical navigation is used when the product has a complex architecture and multiple functions to navigate through.

In vertical navigation, each menu item can have layered categories inside.

navigation / type=horizontal, active section=false, style=light

Horizontal navigation is suitable when the product has fewer functions but still requires navigation between pages.

It can be used for simple admin portals. Vertical navigation does not have child menu items; the menu elements should be used as one layer.

Themes

navigation / type=vertical, active section=true, style=dark

A dark background navigation is suitable when there is a need to create a balanced contrast in complex applications or products.

navigation / type=vertical, active section=true, style=light

Horizontal navigation is suitable when the product has fewer functions but still requires navigation between pages.

It can be used for simple admin portals. Vertical navigation does not have child menu items; the menu elements should be used as one layer.

Positioning

The positioning of the navigation should always be fixed depending on the variation. Vertical navigation is always left-aligned, while horizontal navigation is fixed at the top.

Behavior

Interaction

Leveling & Indenting

In navigation, up to two levels of submenus can be created, and this applies only to vertical navigation. This is mostly applicable to structures with a more complex product architecture.

When including child elements within a parent breakdown, these menu breakdowns should contextually resemble and maintain the same architecture as the first parent breakdown they are attached to.

navigation-leveling-usage-do

Child items should be listed with an indentation.

navigation-leveling-usage-dont

If a nav-menu item contains child (sub) nav-menu items, icons should not be used with them.

Scrolling

null

In horizontal navigation, only the area containing menu-items can be scrolled.

null

The footer and header are always fixed.

Icon usage

navigation-icon-usage-do

Icons are used only for parent nav-menu items.

navigation-icon-usage-dont

If a nav-menu item contains child (sub) nav-menu items, icons should not be used with them.

Content

Nav-menu-item labels should be used in sentence case. Each label should take the general category name.

If a category name (or sub-category name) is long and exceeds the width of the navigation, this label should be truncated. However, care should be taken when choosing words based on the current width for this reason.