Menu Classes
The following tables describe the classes available in WebUI for menus.
Toolbar Classes
Menu Classes
Dropdown Classes
Menu Item Classes
Menu Attributes
The data-url attribute can be used on buttons within menus, avoiding the need to create a separate click handler for navigation. This attribute is not available for buttons that are not within a menu structure.
Menus
WebUI provides menu buttons specifically to use in designing navigation menus, but you are not limited to buttons - anchor tags and many other elements can also be used. For conventional horizontal menus the classes toolbar-sm and toolbar-lg are available, which have heights to match menu buttons exactly. The toolbar-* classes are for convenience and you could just as easily use a grid column instead.
Toolbar
Example<div class="content-row toolbar-sm accent-1"> <div class="content-col-4 respond-bp-3-under"> <button type="button" class="menu-button-sm menu-button-accent-1">Menu 1</button> </div> <div class="content-col-4 respond-bp-3-under"> <button type="button" class="menu-button-sm menu-button-accent-1">Menu 2</button> </div> <div class="content-col-4 respond-bp-3-under"> <button type="button" class="menu-button-sm menu-button-accent-1">Menu 3</button> </div> <div class="content-col"></div> </div>
Menu Dropdowns
Basic Left Dropdown
Example<div class="content-row toolbar-sm dark"> <div class="content-col"> <div class="dropdown width-lg-xl"> <button type="button" class="menu-activator-dynamic menu-button-sm menu-button-dark text-left">Dropdown <i class="fa fa-caret-down"></i></button> <div class="dropdown-content width-full menu-close dark"> <button type="button" class="menu-button-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Typography</button> <button type="button" class="menu-button-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Colours</button> <button type="button" class="menu-button-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Forms</button> <div class="row-spacing-sm"></div> <div class="row-spacing-sm border-xs border-transparent border-top-accent-5-light"></div> <button type="button" class="menu-button-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Boxes and columns</button> <button type="button" class="menu-button-sm menu-button-dark color-muted text-italic text-left" disabled>Disabled</button> </div> </div> </div> </div>
webui.ready(function() { ui.initMenus({ transitionDuration: 700, transitionType: "collapse" }); });
Basic Right Dropdown
Example<div class="content-row toolbar-sm dark"> <div class="content-col-20"> <div class="dropdown width-lg-xl move-right"> <button type="button" class="menu-activator-dynamic menu-button-sm menu-button-dark text-right">Dropdown <i class="fa fa-caret-down"></i></button> <div class="dropdown-content width-full dropdown-right menu-close dark"> <button type="button" class="menu-button-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-right">Typography</button> <button type="button" class="menu-button-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-right">Colours</button> <button type="button" class="menu-button-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-right">Forms</button> <div class="row-spacing-sm"></div> <div class="row-spacing-sm border-xs border-transparent border-top-accent-5-light"></div> <button type="button" class="menu-button-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-right">Boxes and columns</button> <button type="button" class="menu-button-sm menu-button-dark color-muted text-italic text-right" disabled>Disabled</button> </div> </div> </div> </div>
webui.ready(function() { ui.initMenus({ transitionDuration: 700, transitionType: "collapse" }); });
Full Width Dropdowns
Example<div class="content-row toolbar-sm dark"> <div class="content-col-20 dark"> <div class="dropdown width-full"> <button type="button" class="menu-activator menu-button-sm menu-button-dark width-control-xl"><i class="fa fa-bars"></i></button> <div class="dropdown-content menu-inclusive dark width-full"> <div class="content-row"> <div class="content-col width-full"> <button type="button" class="menu-activator menu-button-sm menu-button-accent-2 text-left">Containers <i class="fa fa-caret-down"></i></button> <div class="dropdown-content-expand menu-close dark width-full"> <button type="button" class="menu-button-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Overview</button> <button type="button" class="menu-button-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Container Classes</button> <button type="button" class="menu-button-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Responsive Gutters</button> </div> <button type="button" class="menu-activator menu-button-sm menu-button-accent-2 text-left">Alignment <i class="fa fa-caret-down"></i></button> <div class="dropdown-content-expand menu-close dark width-full"> <button type="button" class="menu-button-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Padding</button> <button type="button" class="menu-button-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Padding for Grids</button> <button type="button" class="menu-button-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Padding with Flexbox</button> </div> <button type="button" class="menu-activator menu-button-sm menu-button-accent-2 text-left">Spacing <i class="fa fa-caret-down"></i></button> <div class="dropdown-content-expand menu-close dark width-full"> <button type="button" class="menu-button-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Horizontal Spacing</button> <button type="button" class="menu-button-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Vertical Spacing</button> <button type="button" class="menu-button-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Row Spacing</button> </div> </div> </div> </div> </div> </div> </div>
webui.ready(function() { ui.initMenus({ transitionDuration: 700, transitionType: "collapse" }); });
Inclusive Behaviour
Example<div class="content-row"> <div class="content-col-20"> <div class="dropdown text"> <a href="javascript:void 0" class="menu-activator button-link-sm text-left">Menu</a> <div class="dropdown-content-expand menu-inclusive pad-left-sm"> <div class="content-row"> <div class="content-col"> <a href="javascript:void 0" class="menu-activator button-link-sm text-left">Javascript Frameworks</a> <div class="dropdown-content-expand menu-inclusive menu-close pad-left-lg-xl"> <a href="#0" class="button-link-sm text-left width-full text-underline">Angular</a> <a href="#0" class="button-link-sm text-left width-full">React</a> <a href="#0" class="button-link-sm text-left width-full">Vue</a> </div> <a href="javascript:void 0" class="menu-activator button-link-sm text-left">CSS Frameworks</a> <div class="dropdown-content-expand menu-inclusive menu-close pad-left-lg-xl"> <a href="#0" class="button-link-sm text-left width-full">WebUI</a> <a href="#0" class="button-link-sm text-left width-full">Foundation</a> </div> <a href="javascript:void 0" class="menu-activator button-link-sm text-left">Server Frameworks</a> <div class="dropdown-content-expand menu-inclusive menu-close pad-left-lg-xl"> <a href="#0" class="button-link-sm text-left width-full">Express</a> <a href="#0" class="button-link-sm text-left width-full">Ruby on Rails</a> </div> </div> </div> </div> </div> </div> </div>
webui.ready(function() { ui.initMenus({ transitionDuration: 700, transitionType: "collapse" }); });
Exclusive Behaviour
Example<div class="content-row"> <div class="content-col-20"> <div class="dropdown text"> <a href="javascript:void 0" class="menu-activator button-link-sm text-left">Menu</a> <div class="dropdown-content-expand menu-inclusive pad-left-sm"> <div class="content-row"> <div class="content-col"> <a href="javascript:void 0" class="menu-activator button-link-sm text-left">Javascript Frameworks</a> <div class="dropdown-content-expand menu-close pad-left-lg-xl"> <a href="#0" class="button-link-sm text-left width-full text-underline">Angular</a> <a href="#0" class="button-link-sm text-left width-full">React</a> <a href="#0" class="button-link-sm text-left width-full">Vue</a> </div> <a href="javascript:void 0" class="menu-activator button-link-sm text-left">CSS Frameworks</a> <div class="dropdown-content-expand menu-close pad-left-lg-xl"> <a href="#0" class="button-link-sm text-left width-full">WebUI</a> <a href="#0" class="button-link-sm text-left width-full">Foundation</a> </div> <a href="javascript:void 0" class="menu-activator button-link-sm text-left">Server Frameworks</a> <div class="dropdown-content-expand menu-close pad-left-lg-xl"> <a href="#0" class="button-link-sm text-left width-full">Express</a> <a href="#0" class="button-link-sm text-left width-full">Ruby on Rails</a> </div> </div> </div> </div> </div> </div> </div>
webui.ready(function() { ui.initMenus({ transitionDuration: 700, transitionType: "collapse" }); });
Customisation
Menus are highly customisable and were designed to allow you to construct your own type of menu with its own style and behaviour.
Example<div class="content-col col-spacing-left-sm"> <button class="menu-activator-dynamic menu-button-sm menu-button-light text-left">Dropdown Menu<i class="fa fa-caret-down pad-left-xs"></i></button> <div class="dropdown-content menu-close width-lg-xl transparent"> <div class="pad-left-xl"> <div class="pointer-top-sm pointer-top-accent-5"></div> </div> <div class="border-sm border-accent-5 rounded-md"> <button class="menu-button-sm menu-button-light background-hover-accent-2-light text-left rounded-top-md">Item 1</button> <button class="menu-button-sm menu-button-light background-hover-accent-2-light text-left">Item 2</button> <button class="menu-button-sm menu-button-light background-hover-accent-2-light text-left">Item 3</button> <button class="menu-button-sm menu-button-light background-hover-accent-2-light text-left">Item 4</button> <button class="menu-button-sm menu-button-light background-hover-accent-2-light text-left rounded-bottom-md">Item 5</button> </div> </div> </div>
Events
There are 4 event callbacks that can be used, ui.dropdown.show.before, ui.dropdown.show.after, ui.dropdown.hide.before, and ui.dropdown.hide.after. The following script shows how to setup the event callbacks.
Scriptwebui.ready(function() { ui( "#menu1" ).on("ui.dropdown.show.before", function(e) { // Take some action }); ui( "#menu1" ).on("ui.dropdown.show.after", function(e) { // Take some action }); ui( "#menu1" ).on("ui.dropdown.hide.before", function(e) { // Take some action }); ui( "#menu1" ).on("ui.dropdown.hide.after", function(e) { // Take some action }); });