MobileNavBar 🟠 Not ready ​

The MobileNavBar component can be used imported from:

Mobile component

This component is only visible for mobile sizes (under 768px of container width);

Playground ​

Parameters ​

Events ​

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

NamePayloadDescription
changenumberEmitted when the current page changes

Parameters use ​

Check the documentation about how to use the parameters.

routes ​

For setting the routes of the MobileNavBar, you can use the routes attribute. It should be an array of objects with the following keys:

  • text: The text of the link.
  • icon: The icon of the link.
  • href: The href of the link.
  • disabled: (optional) flag to disable the link.

We can also use Button components to define the links:

Link 1Link 2Link 3Link 4

config ​

The config attribute is used to define the style of the MobileNavBar. You can set it as rounded to make it rounded.

Link 1Link 2Link 3Link 4

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​