Navigation ⚠️ Experimental ​

The Navigation component can be used imported from:

Playground ​

Parameters ​

Slots ​

This component has slots. Check the documentation about how to use the slots.

NameTagsDescription
logospanThe logo of the website.
navspanThe navigation bar navigation content

Parameters use ​

Check the documentation about how to use the parameters.

The attribute menu is an array of objects that represent the menu items. Each object has the following properties:

  • text: The text to be displayed for the list item.
  • href: The URL to navigate to when the list item is clicked.
  • items: An array of objects that represent the sub-menu items. Each object has the same properties as the parent object.

The menu it's separated in columns, make sure if you want to display different list options in the same column you use the same array.

routes ​

The attribute routes is an array of objects that represent the navigation links. Each object has the following properties:

  • text: The text to be displayed for the list item.
  • href: The URL to navigate to when the list item is clicked.
  • icon: The icon to be displayed for the list item.

The attribute footer is an array of objects that represents the footer link inside the navigation. Each object has the following properties:

  • text: The text to be displayed for the list item.
  • href: The URL to navigate to when the list item is clicked.

social ​

The attribute social is an array of objects that represents the social media links.

Flags ​

isotype ​

Setting the isotype flag to true will display the isotype logo in the navigation.

with-top ​

Setting the with-top flag to true will increase the top padding of the navigation.

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

CodeSandbox example ​

Sorry, not available yet ☹️