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 semantic tag used to render the header is the <header> tag.

You can ether use the z-logo or the z-smiling-z to render the logo.

And finally to increase the top padding of the navigation, you can use the with-top attribute.

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

The semantic tag used to render the menu is the <aside> tag.

Code

For nested options make sure you use the z-accordion component. And also for each link use the z-link component.

Finally, the navigation component can also have a footer. The footer contains the social media links and the footer links.

The first section should contain the footer links.

Code

The second section should contain the social media links. Make sure for each link you use the z-social-media-icon component.

Code

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​