Navbar DATA API

The Navbar component allows for automatic initialization via the data-function="navbar" attribute. Other attributes allows you to set various options or make your navigation WAI-ARIA compliant.

Navbar Wrapper

<nav class="navbar"
  data-function="navbar"
  data-breakpoint="768"
  data-toggle-siblings="true"
  data-delay="500"
  aria-label="Main">
</nav>

DATA API Attributes

• data-function="navbar" attribute enables the DATA API automatic initialization of your navbar. If you wish to initialize via JavaScript, you can ignore this attribute.
• data-breakpoint="800" attribute connects the layout set via CSS for the navbar with its JavaScript functionality and is only required when using a different breakpoint other than the default value of 768px.
• data-toggle-siblings="true" attribute enables a special functionality on mobile devices that toggles siblings on showing a submenu. By default this setting is true.
• data-delay="500" attribute sets the duration in which the submenus close after mouseleave event was fired. By default this setting is 500 miliseconds.

An important note on the usage of the toggleSiblings: false option in combination with a position: sticky navbar will make it difficult for users to navigate.

Custom Wrapper

In other cases you might want to use a different wrapper, and the DATA API attributes can be used with an <ul class="nav"> element. Let's have a look:

<div class="custom-wrapper"
  <ul class="nav"
    data-function="navbar"
    data-breakpoint="768"
    data-toggle-siblings="true"
    data-delay="500"
    role="navigation"
    aria-label="Other Navigation">
  </ul>
<div>

Such an example is set up with the Left Menu as well as with the Combo. Notice the WAI-ARIA attributes have changed for the new markup, but you should check the accessibility documentation.