sunweb

Nav

component action navigation link

Description


Nav component solves the design problem of jumping from one page to another in the same or an external site.
The link could be opened in the same window or in a new tab

c-nav

When options are grouped on multiple levels, they are indented to reveal the hierarchy.
There is a maximum of 4 levels, where the 3 first ones are nested and the at the same level than the 3rd, but a little bit indented.


Variants


c-nav--inline

The inline variant makes the nav inline and add swipe capabilities if content does not fit in a single line. If there's any active item, will be focused on center by default on page load.

Handlebars

Loading...

Javascript

Loading...

c-nav--dropdown

The dropdown variant allows to show multilevel items inside a dropdown.
The main items are shown similar to the inline variant, but in this case the swipe functionality does not exists, because it shouldn't be used in the mobile version.
There is a maximum of 4 levels, where the 3 first ones are nested and the at the same level than the 3rd, but a little bit indented.

Handlebars

Loading...

Javascript

Loading...
c-nav--block

The block variant displays navigation vertically, with the individual elements stacked on top of each other and visually separated.
This is used in single level navigation, usually on the left side of the screen or mobile versions.

When the block has multiple levels only the current nav level is shown, and slides to parent and child levels to left and right.

Handlebars

Javascript

Loading...

c-nav--list

The list modifier is used to show a list of links, that could not be used as a navigation. Thus, it has no active state.
The icon could have an icon, which is optional.
This variant has no multi level version either.

c-nav--collapsible

The collapsible variant displays navigation vertically and is useful with multiple levels. In comparison with the default multilevel, the collapsible variant collapses the children of each item in order to display a more compact and focused navigation. This can be used on the left side of the screen on desktop devices.

Handlebars

Loading...