Status
Status
Healthy
Figma component
Includes a link to a Figma component that has been imported to Supernova
Horizontal navigation code component is work-in-progress.
Structure
- Header (product logo)
- Body container (nav-menu-items)
- Footer (settings, collapse button
Properties
Types
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.
In vertical navigation, each menu item can have layered categories inside.
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
Theming is only for vertical navigation.
A dark background navigation is suitable when there is a need to create a balanced contrast in complex applications or products.
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.
Horizontal and vertical navigation should not be used together in a product.
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.
Do
Child items should be listed with an indentation.
Don't
If a nav-menu item contains child (sub) nav-menu items, icons should not be used with them.
Scrolling
Do
In horizontal navigation, only the area containing menu-items can be scrolled.
Don't
The footer and header are always fixed.
Icon usage
Do
Icons are used only for parent nav-menu items.
Don't
If a nav-menu item contains child (sub) nav-menu items, icons should not be used with them.
When using icons in navigation, only the duotone version of our icon set should be used. While selecting for an icon, please avoid icons that are visually complicated.
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.