WebUI mobile-first CSS

Navbars

The navbar component makes it easy to set up a complex responsive menu for main site navigation with very little code. It doesn't matter if the navbar layout uses divs or lists, but the classes must be in the correct hierarchical order.

Simple Example

This example uses buttons for the top level menu activation, which means the navbar will add an active class to the currently selected button and therefore change the styling. If a normal link is used instead there is no change to the style unless it uses a class such as button-link-* or menu-button-link-*.

    
  

  
<nav class="nav-sm info" id="navbar1">
  <div class="nav-menu text-sm" data-index-exclude>

    <div class="nav-logo text-lg pad-left-md pad-right-md">Your Logo</div>

    <div class="nav-item">
      <button class="menu-button-sm menu-button-info text-left nav-activator">Menu 1</button>
      <div class="nav-sub-menu">
        <div class="nav-item"><a href="#0">Sub Menu Item 1</a></div>
        <div class="nav-item"><a href="#0">Sub Menu Item 2</a></div>
        <div class="nav-item"><a href="#0">Sub Menu Item 3</a></div>
        <div class="nav-item"><a href="#0">Sub Menu Item 4</a></div>
      </div>
    </div>
    <div class="nav-item">
      <button class="menu-button-sm menu-button-info text-left nav-activator">Menu 2</button>
      <div class="nav-sub-menu">
        <div class="nav-item"><a href="#0">Sub Menu Item 1</a></div>
        <div class="nav-item"><a href="#0">Sub Menu Item 2</a></div>
        <div class="nav-item"><a href="#0">Sub Menu Item 3</a></div>
        <div class="nav-item"><a href="#0">Sub Menu Item 4</a></div>
      </div>
    </div>
    <div class="nav-item">
      <button class="menu-button-sm menu-button-info text-left nav-activator">Very Long Navbar Menu Text</button>
      <div class="nav-sub-menu">
        <div class="nav-item"><a href="#0">Very long navbar sub menu text can be added.</a></div>
        <div class="nav-item"><a href="#0">Sub Menu Item 2</a></div>
        <div class="nav-item"><a href="#0">Sub Menu Item 3</a></div>
        <div class="nav-item"><a href="#0">Sub Menu Item 4</a></div>
      </div>
    </div>

    <div class="nav-toggle pad-right-xs">
      <div class="nav-button-sm" id="navToggle1"></div>
    </div>
    
  </div> 
</nav>
                                                              
      
HTML

webui.ready( () => {
  
  ui("#navbar1").navbarControl({ 
    transitionDuration: 300,
    smallDeviceSubMenuPadding: "0 2rem",
    mediumDeviceSubMenuPadding: "0 2rem",
    largeDeviceSubMenuPadding: "0.5rem 2rem",	
    largeDeviceMenuSpacing: "0",
    largeDeviceMenuOffset: "0.5rem",
    largeDeviceSubMenuOffset: "-0.5rem",
    largeDeviceSubMenuReverse: true,
    largeDeviceSubMenuGap: "2px"
});

  ui("#navToggle1").navButtonControl({ 
    transitionDuration: 300, 
    backgroundColor: "transparent", 
    color: "#FFF"
  });

});

JS

Navbar Classes

Classes available for navbars.

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 a navbar logo.
nav-item	Applied to the menu items within a menu dropdown.
nav-component	Applied to a navbar element containing a custom control.
nav-toggle	Applied to a navbar element containing a small device toggle button.
nav-menu	Applied to the navbar element forming a menu dropdown.
nav-sub-menu	Applied to the navbar element forming a sub menu dropdown.
nav-content	Can be added to the nav-sub-menu or its children to enable free-form content.
nav-reverse	Used to reverse the positions of navbar logo and nav button elements.
nav-activator	Toggles the corresponding menu dropdown when clicked.

NavButton Classes

Classes available for nav buttons.

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.

Settings

Javascript settings available for the navbar control.

Setting	Description
transitionDuration	The time taken in milliseconds for navbar menus to fade in and out. An integer value. Default: 300.
smallDeviceMenuReverse	Reverses the navbar logo and toggle button positions for small device viewport widths. Default: false.
smallDeviceSubMenuPadding	Sets the vertical and horizontal sub menu padding for small device viewport widths. Default: "0 1rem".
smallDeviceLogoColor	Sets the logo text color for small device viewport widths. Default: "inherit".
smallDeviceLogoBackground	Sets the logo background property for small device viewport widths. Default: ""
smallDeviceMenuColor	Sets the menu text color for small device viewport widths. Default: "inherit".
smallDeviceMenuBackground	Sets the menu background property for small device viewport widths. Default: "".
smallDeviceSubMenuColor	Sets the sub menu text color for small device viewport widths. Default: "inherit".
smallDeviceSubMenuBackground	Sets the sub menu background property for small device viewport widths. Default: "rgba(255, 255, 255, 0.2)".
mediumDeviceMenuReverse	Reverses the navbar logo and toggle button positions for medium device viewport widths. Default: false.
mediumDeviceSubMenuPadding	Sets the vertical and horizontal sub menu padding for medium device viewport widths. Default: "0 1rem".
mediumDeviceLogoColor	Sets the logo text color for medium device viewport widths. Default: "inherit".
mediumDeviceLogoBackground	Sets the logo background property for medium device viewport widths. Default: ""
mediumDeviceMenuColor	Sets the menu text color for medium device viewport widths. Default: "inherit".
mediumDeviceMenuBackground	Sets the menu background property for medium device viewport widths. Default: "".
mediumDeviceSubMenuColor	Sets the sub menu text color for medium device viewport widths. Default: "inherit".
mediumDeviceSubMenuBackground	Sets the sub menu background property for medium device viewport widths. Default: "rgba(255, 255, 255, 0.2)".
largeDeviceMenuReverse	Reverses the navbar logo and toggle button positions for large device viewport widths. Default: false.
largeDeviceSubMenuPadding	Sets the vertical and horizontal sub menu padding for large device viewport widths. Default: "0 2rem".
largeDeviceMenuSpacing	Sets the spacing between top level menu items for large device viewport widths. Default: 0.
largeDeviceMenuOffset	Sets the top level menu item offset for large device viewport widths. Default: 0.
largeDeviceSubMenuOffset	Sets sub menu offsets relative to top level menu items for large device viewport widths. Default: 0.
largeDeviceSubMenuReverse	Sets the sub menu operation to a right to left behaviour for large device viewport widths. Default: false.
largeDeviceSubMenuGap	Adjusts the gap betwen the top of each sub menu and the navbar for large device viewport widths. Default: 0.
largeDeviceLogoColor	Sets the logo text color for large device viewport widths. Default: "inherit".
largeDeviceLogoBackground	Sets the logo background property for large device viewport widths. Default: ""
largeDeviceMenuColor	Sets the menu text color for large device viewport widths. Default: "inherit".
largeDeviceMenuBackground	Sets the menu background property for large device viewport widths. Default: "".
largeDeviceSubMenuColor	Sets the sub menu text color for large device viewport widths. Default: "inherit".
largeDeviceSubMenuBackground	Sets the sub menu background property for large device viewport widths. Default: "inherit".

Adding nav components

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 maintained, particularly when switching between navbar layout modes. It also prevents the component styles from being affected by navbar styles.

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

    
  

  
<nav class="nav-sm dark" id="navbar2">
  <ul class="nav-menu text-sm">

    <li class="nav-logo text-lg pad-left-md pad-right-md">Your Logo</li>

    <li class="nav-item">
      <a class="nav-activator" href="#0">Menu 1</a>
      <ul class="nav-sub-menu">
        <li class="nav-item"><a href="#0">Sub Menu Item 1</a></li>
        <li class="nav-component">
          <div class="toggle-switch-sm">	
            <input type="checkbox" value="1" id="check-switch-1" />
            <label for="check-switch-1" class="accent-1-light rounded-sm">
              <div class="toggle-switch-button background-info-dark left-transition-medium"></div>
            </label>
          </div>
        </li>
        <li class="nav-item"><a href="#0">Sub Menu Item 2</a></li>
        <li class="nav-item"><a href="#0">Sub Menu Item 3</a></li>
        <li class="nav-item"><a href="#0">Sub Menu Item 4</a></li>
      </ul>
    </li>
    <li class="nav-item">
      <a class="nav-activator" href="#0">Menu 2</a>
      <ul class="nav-sub-menu">
        <li class="nav-item"><a href="#0">Sub Menu Item 1</a></li>
        <li class="nav-item"><a href="#0">Sub Menu Item 2</a></li>
        <li class="nav-item"><a href="#0">Sub Menu Item 3</a></li>
        <li class="nav-item"><a href="#0">Sub Menu Item 4</a></li>
      </ul>
    </li>
    <li class="nav-item">
      <a class="nav-activator" href="#0">Menu 3</a>
      <ul class="nav-sub-menu">
        <li class="nav-item"><a href="#0">Sub Menu Item 1</a></li>
        <li class="nav-item"><a href="#0">Sub Menu Item 2</a></li>
        <li class="nav-item"><a href="#0">Sub Menu Item 3</a></li>
        <li class="nav-item"><a href="#0">Sub Menu Item 4</a></li>
      </ul>
    </li>
    <li class="nav-component">
      <div class="flex align-items-center height-control-lg">
        <div class="toggle-switch-xs onoff">	
          <input type="checkbox" value="2" id="check-switch-2" />
          <label for="check-switch-2" class="info-light rounded-pill">
            <div class="toggle-switch-button background-info-dark left-transition-medium"></div>
          </label>
        </div>
      </div>
    </li>
    <li class="nav-component">
      <div class="flex align-items-center height-control-lg">
        <div class="toggle-switch">	
          <input type="checkbox" value="3" id="check-switch-3" />
          <label for="check-switch-3" class="info-light rounded-pill">
            <div class="toggle-switch-button background-info-dark left-transition-medium"></div>
          </label>
        </div>
      </div>
    </li>

    <li class="nav-toggle pad-right-xs">
      <div class="nav-button-sm" id="navToggle2"></div>
    </li>
          
  </ul>  
</nav>
                                                                    
      
HTML

webui.ready( () => {
  
  ui("#navbar2").navbarControl({ 
    transitionDuration: 300,
    smallDeviceSubMenuPadding: "0 1rem",
    mediumDeviceSubMenuPadding: "0 1rem",
    largeDeviceSubMenuPadding: "0.5rem 2rem",	
    largeDeviceMenuSpacing: "0.5rem",
    largeDeviceMenuOffset: "12rem",
    largeDeviceSubMenuOffset: "-2rem",
    largeDeviceSubMenuReverse: false,
    largeDeviceSubMenuGap: "1px"
  });

  ui("#navToggle2").navButtonControl({ 
    transitionDuration: 300, 
    backgroundColor: "transparent", 
    color: "#FFF"
  });

});

JS

Right to Left Dropdown Menus

NOTE: The setting largeDeviceSubMenuReverse may be added to reverse the normal dropdown behaviour and avoid dropdowns going off-screen when menu items are aligned to the right of the navbar.

Example
webui.ready( () => {

  ui("#navbar1").navbarControl({ 
    largeDeviceSubMenuReverse: true
  });

});

Customisation

Navbar Customisation

Navbars are highly customisable and are designed to allow you to construct your own type of menu with its own style and behaviour. Navbars support any HTML content within sub menus, and the example below displays a fully responsive table inside the first dropdown. The sub menu element uses the class nav-content which allows free-form content within.

Large HTML Content

When adding large HTML content to any sub menu, the default navbar line-height must be overridden - in the following example, the class nav-content has been added to the nav-sub-menu element. The text-* classes listed in the table below may also be used on the sub menu or can be added to a separate content wrapper within the sub menu, if required.

Class Description

text Sets the line-height to 1.7rem.

text-readable Sets the line-height to 1.5rem.

text-normal Sets the line-height to the browser default.

Class	Description
text	Sets the line-height to 1.7rem.
text-readable	Sets the line-height to 1.5rem.
text-normal	Sets the line-height to the browser default.

NOTE: The following example uses the height-auto class on the nav element. This will cause the expanding menu to push page content down in small device mode - this class can be removed if overlay behaviour is required instead.

Inherited Colors

Care should be taken regarding inherited colors and image background combinations. For example, if a parent element has a background image without a background color, the child element has no color to inherit. In this case, a background color can be set on the child element using the component configuration properties.

Your Logo

Menu 1

#	First name	Last name	Email
1	John	Doe	johndoe@hotmail.com
2	Aisha	Craig	aishacraig@gmail.com
3	Nicolas	Hughes	nickhughes@gmail.com
4	Nyasia	Santiago	nsantiago@hotmail.com
Footer

Menu 2

Menu 3

Dark theme

    
  


<nav class="nav-lg dark height-auto" id="navbar3">						
  <div class="nav-menu text-sm">

    <div class="nav-logo"><div class="text-lg pad-left-md pad-right-md">Your Logo</div></div>

    <div class="nav-item">
      <a class="nav-activator" href="#0">Menu 1<label class="nav-indicator margin-left-xxs pad-bottom-md"></label></a>     
      <div class="nav-sub-menu nav-content">
        <table class="table table-accent-1 table-bordered 
            table-striped table-hover table-responsive width-full col-padding-sm text-sm margin-top-xxs">
          <thead class="text-left color-warning-light">
            <tr>
              <th class="width-sm">
                #
              </th>
              <th>
                First name
              </th>
              <th>
                Last name
              </th>
              <th class="width-one-half">
                Email
              </th>
            </tr>
          </thead>
          <tbody class="color-light">
            <tr>
              <td data-th="#">
                1
              </td>
              <td data-th="First name">
                John
              </td>
              <td data-th="Last name">
                Doe
              </td>
              <td data-th="Email">
                johndoe@hotmail.com
              </td>
            </tr>
            <tr>
              <td data-th="#">
                2
              </td>
              <td data-th="First name">
                Aisha
              </td>
              <td data-th="Last name">
                Craig
              </td>
              <td data-th="Email">
                aishacraig@gmail.com
              </td>
            </tr>
            <tr>
              <td data-th="#">
                3
              </td>
              <td data-th="First name">
                Nicolas
              </td>
              <td data-th="Last name">
                Hughes
              </td>
              <td data-th="Email">
                nickhughes@gmail.com
              </td>
            </tr>
            <tr>
              <td data-th="#">
                4
              </td>
              <td data-th="First name">
                Nyasia
              </td>
              <td data-th="Last name">
                Santiago
              </td>
              <td data-th="Email">
                nsantiago@hotmail.com
              </td>
            </tr>
          </tbody>
          <tfoot class="color-default text-sm">
            <tr>
              <td colspan="4">
                Footer
              </td>
            </tr>
          </tfoot>
        </table>      
      </div>
    </div>
    <div class="nav-item">
      <a class="nav-activator" href="#0">Menu 2<label class="nav-indicator margin-left-xxs pad-bottom-md"></label></a>
      <div class="nav-sub-menu">
        <div class="nav-item"><a href="#0">Sub Menu Item 1</a></div>
        <div class="nav-item"><a href="#0">Sub Menu Item 2</a></div>
        <div class="nav-item"><a href="#0">Sub Menu Item 3</a></div>
        <div class="nav-item"><a href="#0">Sub Menu Item 4</a></div>
      </div>
    </div>
    <div class="nav-item">
      <a class="nav-activator" href="#0">Menu 3<label class="nav-indicator margin-left-xxs pad-bottom-md"></label></a>
      <div class="nav-sub-menu">
        <div class="nav-item"><a href="#0">Sub Menu Item 1</a></div>
        <div class="nav-item"><a href="#0">Sub Menu Item 2</a></div>
        <div class="nav-item"><a href="#0">Sub Menu Item 3</a></div>
        <div class="nav-item"><a href="#0">Sub Menu Item 4</a></div>
      </div>
    </div>

    <div class="nav-component">
      <div class="flex align-items-center justify-content-end gap-horizontal-md">
        <label>Dark theme</label>
        <div class="toggle-switch darklight">	
          <input type="checkbox" value="1" id="check-switch-4" />
          <label for="check-switch-4" class="background-dark-alternate rounded-pill">
            <div class="toggle-switch-button background-dark transition-medium"></div>
          </label>
        </div>
      </div>
    </div>

    <div class="nav-toggle pad-right-xs-sm">
      <div class="nav-button-lg" id="navToggle3"></div>
    </div>
    
  </div> 
</nav>
                                                                      
      
HTML

webui.ready( () => {
  
  ui("#navbar3").navbarControl({ 
    transitionDuration: 300,

    smallDeviceSubMenuPadding: "1rem 3rem",
    smallDeviceSubMenuBackground: "#000",

    mediumDeviceSubMenuPadding: "1rem 3rem",
    mediumDeviceLogoBackground: "transparent",
    mediumDeviceMenuBackground: "url(images/scotland_banner_1_dark.jpg) no-repeat center/cover",
    mediumDeviceMenuReverse: true,

    largeDeviceMenuBackground: "url(images/scotland_banner_1_dark.jpg) no-repeat center/cover",
    largeDeviceSubMenuBackground: "#000",
    largeDeviceMenuSpacing: "0.5rem",
    largeDeviceMenuOffset: "1rem",
    largeDeviceSubMenuOffset: "-1rem",
    largeDeviceSubMenuReverse: false,
    largeDeviceSubMenuGap: "1px"
  });

  ui("#navToggle3").navButtonControl({ 
    transitionDuration: 200, 
    backgroundColor: "transparent", 
    color: "#FFF"
  });

  ui("#navbar3 .nav-indicator").navIndicatorControl({ 
    indicatorType: "caret",
    indicatorSize: "small",
    backgroundColor: "transparent", 
    color: "#FFF",
    transitionDuration: 300
  });

});

JS

Component Update

Run-time Navbar Updates

Settings specified for the navbarControl instance can be updated programatically at run-time. See the following example, which updates 3 navbar properties (1 for each screen size). Use the restore button to revert the change.

    
  

  
<div class="row gap-md text-sm">
  <div class="col-fixed">
    <button id="navbarUpdateCommand" class="button-sm menu-button-info">Update</button>
  </div>
  <div class="col-fixed">
    <button id="navbarRestoreCommand" class="button-sm menu-button-info">Restore</button>
  </div>
</div>

<nav class="nav-lg dark height-auto" id="navbar4">						
  <div class="nav-menu text-sm">

    <div class="nav-logo"><div class="text-lg pad-left-md pad-right-md">Your Logo</div></div>

    <div class="nav-item">
      <a class="nav-activator" href="#0">Menu 1<label class="nav-indicator margin-left-xxs pad-bottom-md"></label></a>     
      <div class="nav-sub-menu">
        <div class="nav-item"><a href="#0">Sub Menu Item 1</a></div>
        <div class="nav-item"><a href="#0">Sub Menu Item 2</a></div>
        <div class="nav-item"><a href="#0">Sub Menu Item 3</a></div>
        <div class="nav-item"><a href="#0">Sub Menu Item 4</a></div>
      </div>
    </div>
    <div class="nav-item">
      <a class="nav-activator" href="#0">Menu 2<label class="nav-indicator margin-left-xxs pad-bottom-md"></label></a>
      <div class="nav-sub-menu">
        <div class="nav-item"><a href="#0">Sub Menu Item 1</a></div>
        <div class="nav-item"><a href="#0">Sub Menu Item 2</a></div>
        <div class="nav-item"><a href="#0">Sub Menu Item 3</a></div>
        <div class="nav-item"><a href="#0">Sub Menu Item 4</a></div>
      </div>
    </div>
    <div class="nav-item">
      <a class="nav-activator" href="#0">Menu 3<label class="nav-indicator margin-left-xxs pad-bottom-md"></label></a>
      <div class="nav-sub-menu">
        <div class="nav-item"><a href="#0">Sub Menu Item 1</a></div>
        <div class="nav-item"><a href="#0">Sub Menu Item 2</a></div>
        <div class="nav-item"><a href="#0">Sub Menu Item 3</a></div>
        <div class="nav-item"><a href="#0">Sub Menu Item 4</a></div>
      </div>
    </div>

    <div class="nav-component">
      <div class="flex align-items-center justify-content-end gap-horizontal-md">
        <label>Dark theme</label>
        <div class="toggle-switch darklight">	
          <input type="checkbox" value="1" id="check-switch-5" />
          <label for="check-switch-5" class="dark-alternate rounded-pill">
            <div class="toggle-switch-button dark left-transition-medium"></div>
          </label>
        </div>
      </div>
    </div>

    <div class="nav-toggle pad-right-xs-sm">
      <div class="nav-button-lg" id="navToggle4"></div>
    </div>
    
  </div> 
</nav>
                                                        
      
HTML

webui.ready( () => {

  var navbarControl4 = ui("#navbar4").navbarControl({ 
    transitionDuration: 300,

    mediumDeviceSubMenuPadding: "1rem 3rem",
    mediumDeviceLogoBackground: "transparent",
    mediumDeviceMenuBackground: "url(images/scotland_banner_1_dark.jpg) no-repeat center/cover",
    mediumDeviceMenuReverse: true,

    largeDeviceMenuBackground: "url(images/scotland_banner_1_dark.jpg) no-repeat center/cover",
    largeDeviceSubMenuBackground: "#000",
    largeDeviceMenuSpacing: "0.5rem",
    largeDeviceMenuOffset: "1rem",
    largeDeviceSubMenuOffset: "-1rem",
    largeDeviceSubMenuReverse: false,
    largeDeviceSubMenuGap: "1px"
  });

  ui("#navToggle4").navButtonControl({ 
    transitionDuration: 200, 
    backgroundColor: "transparent", 
    color: "#FFF"
  });

  ui("#navbar4 .nav-indicator").navIndicatorControl({ 
    indicatorType: "caret",
    indicatorSize: "small",
    backgroundColor: "transparent", 
    color: "#FFF",
    transitionDuration: 300
  });

  ui("#navbarUpdateCommand").click( () => {

    navbarControl4.update({ largeDeviceMenuBackground: "#000", 
                            mediumDeviceMenuReverse: true, 
                            smallDeviceMenuBackgound: "hsl(122deg, 40%, 40%)" });
  });

  ui("#navbarRestoreCommand").click( () => {

    navbarControl4.update({ largeDeviceMenuBackground: "url(/webui/assets/images/scotland_banner_1_dark.jpg) no-repeat center/cover", 
                            mediumDeviceMenuReverse: false, 
                            smallDeviceMenuBackground: "#000" });
  });

});

JS

Functions

WebUI provides a single function that can be used to update the navbar instance settings at runtime.

Function	Description
update(newSettings)	Updates the navbar instance at runtime using the configuration settings.

Function Arguments

Argument	Description
newSettings	An object literal containing a comma separated list of settings.

Events

Navbar Event Callbacks

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

The following script shows how to setup the event callbacks.

webui.ready( () => {
  
  // Nav memu events

  ui( "#navbar1" ).on("ui.navbar.menu.show.before", (e) => {
    // Take some action
  });

  ui( "#navbar1" ).on("ui.navbar.menu.show.after", (e) => {
    // Take some action
  });

  ui( "#navbar1" ).on("ui.navbar.menu.hide.before", (e) => {
    // Take some action
  });

  ui( "#navbar1" ).on("ui.navbar.menu.hide.after", (e) => {
    // Take some action
  });

  // Nav sub menu events

  ui( "#navbar1" ).on("ui.navbar.submenu.show.before", (e) => {
    // Take some action
  });

  ui( "#navbar1" ).on("ui.navbar.submenu.show.after", (e) => {
    // Take some action
  });

  ui( "#navbar1" ).on("ui.navbar.submenu.hide.before", (e) => {
    // Take some action
  });

  ui( "#navbar1" ).on("ui.navbar.submenu.hide.after", (e) => {
    // Take some action
  });
          
});

JS