Navigation - CSS Component ​

The Navigation component can be used imported from:

Playground ​

Construction ​

The CSS component uses the navtag with a z-navigation HTML custom attribute.

z-navigation ​

The z-navigation parameter is the main parameter used to render the navigation component.

We can separate the navigation into two parts: the header and the open menu.

The header is the main part of the navigation. It contains the logo, the search bar, and the navigation links.

The menu is the part of the navigation that opens when the user clicks on the menu icon. It contains the navigation links.

Code

...

Code

social ​

...

Code

isotype ​

...

with-top ​

...

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​