WebUI mobile-first CSS

Navbar Classes

The following tables describe the classes available in WebUI for navbars.

Navbar Classes

Class

Description

nav-sm

Applied to the wrapper element for a small navbar component.

nav-lg

Applied to the wrapper element for a large navbar component.

nav-logo

Applied to a navbar element containing the navbar logo.

nav-menu

Applied to the navbar element forming a dropdown menu.

nav-component

Applied to custom components that are to form part of the navbar.

nav-reverse

Used to reverse the positions of navbar logo and nav button elements.

NavButton Classes

Class

Description

nav-button-sm

Defines an animated toggle button for use with a small navbar.

nav-button-lg

Defines an animated toggle button for use with a large navbar.

Navbars

Simple Navbar

Example

Markup

<nav class="nav-sm dark" id="navbar1">
  <div class="nav-logo accent-1 pad-left-md pad-right-md">Your Logo</div>
  <div class="nav-menu dark">
    <div><a href="#0">Menu 1</a></div>
    <div>
      <div class="nav-menu accent-1">
        <div><a href="#0">Sub Menu Item 2</a></div>
        <div><a href="#0">Sub Menu Item 3</a></div>
        <div><a href="#0">Sub Menu Item 4</a></div>
        <div><a href="#0">Sub Menu Item 5</a></div>
      </div>
    </div>
    <div><a href="#0">Menu 2</a></div>
    <div>
      <div class="nav-menu accent-1">
        <div><a href="#0">Sub Menu Item 1</a></div>
        <div><a href="#0">Sub Menu Item 2</a></div>
        <div><a href="#0">Sub Menu Item 3</a></div>
        <div><a href="#0">Sub Menu Item 4</a></div>
        <div><a href="#0">Sub Menu Item 5</a></div>
      </div>
    </div>
    <div><a href="#0">Menu 3</a></div>
    <div>
      <div class="nav-menu accent-1">
        <div><a href="#0">Sub Menu Item 1</a></div>
        <div><a href="#0">Sub Menu Item 2</a></div>
        <div><a href="#0">Sub Menu Item 3</a></div>
        <div><a href="#0">Sub Menu Item 4</a></div>
        <div><a href="#0">Sub Menu Item 5</a></div>
      </div>
    </div>
  </div>
  <div class="nav-button-sm" id="navToggle1"></div>  
</nav>

Script

webui.ready(function() {
  
  ui("#navbar1").navbarControl({ 
    transitionDuration: 700,
    largeDeviceOffset: 0,
    largeDeviceMenuOffset: -40,
    smallDeviceAlignment: "left",		
    smallDeviceBreakpoint: 2,
    smallDeviceExpansion: "overlay"			
  });

  ui("#navToggle1").navButtonControl({ 
    transitionDuration: 300, 
    backgroundColor: "rgb(92, 107, 192)", 
    color: "#FFF"
  });

});

Custom Navbar

When additional components are added to the navbar they should be enclosed in a containing element with the class nav-component applied. This will ensure that the correct positioning and visibility within the navbar is used, particularly when switching between navbar layout modes. It also prevents the components styles from being affected by navbar styles.

You can still use other WebUI responsive padding and positioning class as necessary. See the following example.

Example

Markup

<nav class="nav-sm nav-reverse dark" id="navbar2">
  <div class="nav-logo accent-1 pad-left-md pad-right-md">Your Logo</div>
  <ul class="nav-menu dark">
    <li><a href="#0">Menu 1</a></li>
    <li>
      <ul class="nav-menu accent-1">
        <div class="nav-component pad-md-lg-bp-3-under pad-top-sm-bp-3-over">
          <div class="toggle-switch-sm accent-1-light rounded-sm move-right-bp-3-under">	
            <input type="checkbox" value="4" id="check-switch-4" />
            <label for="check-switch-4" class="background-dark left-transition-medium"></label>
          </div>
        </div>
        <li><a href="#0">Sub Menu Item 2</a></li>
        <li><a href="#0">Sub Menu Item 3</a></li>
        <li><a href="#0">Sub Menu Item 4</a></li>
        <li><a href="#0">Sub Menu Item 5</a></li>
      </ul>
    </li>
    <li><a href="#0">Menu 2</a></li>
    <li>
      <ul class="nav-menu accent-1">
        <li><a href="#0">Sub Menu Item 1</a></li>
        <li><a href="#0">Sub Menu Item 2</a></li>
        <li><a href="#0">Sub Menu Item 3</a></li>
        <li><a href="#0">Sub Menu Item 4</a></li>
        <li><a href="#0">Sub Menu Item 5</a></li>
      </ul>
    </li>
    <li><a href="#0">Menu 3</a></li>
    <li>
      <ul class="nav-menu accent-1">
        <li><a href="#0">Sub Menu Item 1</a></li>
        <li><a href="#0">Sub Menu Item 2</a></li>
        <li><a href="#0">Sub Menu Item 3</a></li>
        <li><a href="#0">Sub Menu Item 4</a></li>
        <li><a href="#0">Sub Menu Item 5</a></li>
      </ul>
    </li>

    <div class="pad-bottom-sm-bp-3-under"></div>

    <div class="nav-component width-full-bp-3-under move-right-bp-3-over pad-right-md-lg-bp-3-under pad-right-md-lg-bp-3-over">
      <div class="toggle-switch-sm accent-1-light rounded-sm move-right-bp-3-under">	
        <input type="checkbox" value="1" id="check-switch-1" />
        <label for="check-switch-1" class="background-dark left-transition-medium"></label>
      </div>
    </div>
    <div class="nav-component width-full-bp-3-under move-right-bp-3-over pad-right-md-lg-bp-3-under">
      <div class="toggle-switch-sm accent-1-light rounded-sm move-right-bp-3-under">	
        <input type="checkbox" value="2" id="check-switch-2" />
        <label for="check-switch-2" class="background-dark left-transition-medium"></label>
      </div>
    </div>

  </ul>
  <div class="nav-button-sm" id="navToggle2"></div>
</nav>

Script

webui.ready(function() {
  
  ui("#navbar2").navbarControl({ 
    transitionDuration: 700,
    largeDeviceOffset: 50,
    largeDeviceMenuOffset: -70,
    smallDeviceAlignment: "right",
    smallDeviceBreakpoint: 3,
    smallDeviceExpansion: "expand"
  });

  ui("#navToggle2").navButtonControl({ 
    transitionDuration: 300, 
    backgroundColor: "rgb(92, 107, 192)", 
    color: "#FFF"
  });

});

Navbar Settings

Settings

Setting

Description

transitionDuration

The amount of time in milliseconds for the menu item transition.
An integer value. Default: 300

largeDeviceOffset

The horizontal offset for menubar items when in large device mode.
A numeric value in pixels, negative or positive.

largeDeviceMenuOffset

The horizontal offset for dropdown menus when in large device mode.
A numeric value in pixels, negative or positive.

smallDeviceAlignment

The alignment of menu item text when in small device mode.
An string value, "left", "center", or "right". Default: "left".

smallDeviceBreakpoint

The breakpoint size at which the navbar switches between small and large device mode.
A numeric value between 1 and 5. Default: 2.

smallDeviceExpansion

Determines whether the menu overlays other DOM elements when opening or stays within the document flow.
A string value, "overlay" or "expand".

Events

There are 8 event callbacks that can be used. Event names starting with ui.navmenu are triggered when a top level menu is opended or closed. On the other hand, event names starting with ui.navitem are triggered when a child menu is opended or closed.

The following script shows how to setup the event callbacks.

Script

webui.ready(function() {
  
  // Nav memu events

  ui( "#navbar1" ).on("ui.navmenu.show.before", function(e) {
    // Take some action
  });

  ui( "#navbar1" ).on("ui.navmenu.show.after", function(e) {
    // Take some action
  });

  ui( "#navbar1" ).on("ui.navmenu.hide.before", function(e) {
    // Take some action
  });

  ui( "#navbar1" ).on("ui.navmenu.hide.after", function(e) {
    // Take some action
  });

  // Nav item events

  ui( "#navbar1" ).on("ui.navitem.show.before", function(e) {
    // Take some action
  });

  ui( "#navbar1" ).on("ui.navitem.show.after", function(e) {
    // Take some action
  });

  ui( "#navbar1" ).on("ui.navitem.hide.before", function(e) {
    // Take some action
  });

  ui( "#navbar1" ).on("ui.navitem.hide.after", function(e) {
    // Take some action
  });
         
});