Menus
WebUI provides menu buttons specifically for use when designing navigation menus. This is 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.
NOTE: If a URL is required for simple menus not created by a component instance or without dropdown menus, then a normal hyperlink styled with menu-button-link-* classes can be used instead of the menu-button-* classes.
Toolbar
In the example below, menu link buttons have been arranged using layout rows and columns.
<div class="row toolbar-sm info-dark text-sm">
<div class="col-fixed">
<a href="#0" class="menu-button-link-sm menu-button-info">Menu 1</a>
</div>
<div class="col-fixed">
<a href="#0" class="menu-button-link-sm menu-button-info">Menu 2</a>
</div>
<div class="col-fixed">
<a href="#0" class="menu-button-link-sm menu-button-info">Menu 3</a>
</div>
<div class="col"></div>
</div>
HTML
Toolbar Classes
Menu toolbar classes are described in this table.
| Class | Description |
|---|---|
| toolbar-sm | Used to style a toolbar with the correct height for small menu buttons. |
| toolbar-lg | Used to style a toolbar with the correct height for large menu buttons. |
Menu Classes
The presence of a menu activator class causes an element such as a button or link to become a trigger for opening and closing dropdown menus. There are 3 types of activator.
| Class | Description |
|---|---|
| menu-activator | Toggles the corresponding dropdown when clicked. |
| menu-activator-focus | Toggles the corresponding dropdown on focus and blur. |
| menu-activator-hover | Toggles the corresponding dropdown on hover in and hover out. |
Menu Dropdowns
A menu dropdown can use any type of styled button or link. Normally, the menu-button-link-* style is the best choice as it is designed for styling hyperlinks. On the other hand, a regular menu button using a menu-button-* style can be used for the top level dropdown activator.
Basic Left Dropdown
The following example uses the menu-button-link-sm class on each menu dropdown link.
<div class="row toolbar-sm dark" id="menuControl1">
<div class="col">
<div class="dropdown width-lg-xl">
<button type="button" class="menu-activator-hover menu-button-sm menu-button-dark text-left">Dropdown</button>
<div class="dropdown-content width-full menu-close dark">
<a href="#0" class="menu-button-link-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Typography</a>
<a href="#0" class="menu-button-link-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Colours</a>
<a href="#0" class="menu-button-link-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Forms</a>
<div class="row-spacing-sm"></div>
<div class="row-spacing-sm border-xs border-transparent border-top-accent-5-light"></div>
<a href="#0" class="menu-button-link-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Rows and columns</a>
<a href="#0" class="menu-button-link-sm menu-button-dark color-muted text-italic text-left" disabled>Disabled</a>
</div>
</div>
</div>
</div>
HTML
webui.ready( () => {
ui("#menuControl1").menuControl({
transitionDuration: 300,
transitionType: "fade"
});
});
JS
Basic Right Dropdown
The following example includes a data-url attribute on each menu button, as an anchor tag is not used here.
<div class="row toolbar-sm dark" id="menuControl2">
<div class="col">
<div class="dropdown width-lg-xl float-right">
<button type="button" class="menu-activator-hover menu-button-sm menu-button-dark text-right">Dropdown</button>
<div class="dropdown-content width-full dropdown-right menu-close dark">
<button type="button" data-url="#0" class="menu-button-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-right">Typography</button>
<button type="button" data-url="#0" class="menu-button-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-right">Colours</button>
<button type="button" data-url="#0" 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" data-url="#0" class="menu-button-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-right">Rows and columns</button>
<button type="button" data-url="#0" class="menu-button-sm menu-button-dark color-muted text-italic text-right" disabled>Disabled</button>
</div>
</div>
</div>
</div>
HTML
webui.ready( () => {
ui("#menuControl2").menuControl({
transitionDuration: 300,
transitionType: "fade"
});
});
JS
Full Width Dropdowns
The example below demonstrates a full width mobile type menu. This menu style is best suited to small panels within a page.
If a fully responsive menu for all screen sizes is required, see the Navbars section.
<div class="row toolbar-sm dark" id="menuControl3">
<div class="col info-dark">
<div class="dropdown width-full">
<button type="button" class="menu-activator menu-button-link-sm menu-button-info pad-xs width-control-lg">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
</button>
<div class="dropdown-content menu-inclusive dark width-full">
<div class="width-full">
<button type="button" class="menu-activator menu-button-sm menu-button-info text-left">Layouts</button>
<div class="dropdown-content-expand menu-close dark width-full">
<a href="#0" class="menu-button-link-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Overview</a>
<a href="#0" class="menu-button-link-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Layout Classes</a>
<a href="#0" class="menu-button-link-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Layout Properties</a>
</div>
<button type="button" class="menu-activator menu-button-sm menu-button-info text-left">Padding</button>
<div class="dropdown-content-expand menu-close dark width-full">
<a href="#0" class="menu-button-link-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Overview</a>
<a href="#0" class="menu-button-link-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Padding for Layouts</a>
<a href="#0" class="menu-button-link-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Padding with Flexbox</a>
</div>
<button type="button" class="menu-activator menu-button-sm menu-button-info text-left">Spacing</button>
<div class="dropdown-content-expand menu-close dark width-full">
<a href="#0" class="menu-button-link-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Horizontal Spacing</a>
<a href="#0" class="menu-button-link-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Vertical Spacing</a>
<a href="#0" class="menu-button-link-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Row Spacing</a>
</div>
</div>
</div>
</div>
</div>
</div>
HTML
webui.ready( () => {
ui("#menuControl3").menuControl({
transitionDuration: 300,
transitionType: "collapse"
});
});
JS
Dropdown Classes
Menu dropdown related classes.
| Class | Description |
|---|---|
| dropdown | Establishes a context for a menu activator and dropdown content. |
| dropdown-content | Defines an out of document flow element that will contain dropdown menu items, such as buttons or links. |
| dropdown-content-expand | Defines an in document flow element that will contain dropdown menu items, such as buttons or links. |
| dropdown-sheet | Defines a full width out of document flow element that will contain dropdown menu items, such as buttons or links. |
| dropdown-right | Causes the dropdown to be orientated from right to left. |
Menu Item Classes
These classes can be added to the dropdown element that is the parent for menu buttons or links.
| Class | Description |
|---|---|
| menu-inclusive | Causes the dropdown to act in an inclusive way, so that any other dropdowns can be shown at the same time. |
| menu-close | Causes the parent dropdown to close when any menu item button or link is activated. |
Button Navigation
The data-url attribute can be used on menu buttons within menus, avoiding the need to create a separate click handler for navigation. This attribute is not available for other button types or buttons that are not within a menu component instance, and is only provided for situations where a hyperlink cannot be used instead.
| Attribute | Description |
|---|---|
| data-url | Provides a way to specify a navigation url for a menu button used within menu layouts. (Must be a menu button within a dropdown). |
Settings
Javascript settings available for the menu control.
| Property | Description |
|---|---|
| transitionDuration | The time taken in milliseconds for the menu dropdown to show or hide. An integer value. Default: 300. |
| transitionType | The type of transition. Can be "fade" or "collapse". Default: "fade". |
Customisation
Menus are highly customisable and were designed to allow you to construct your own type of menu with its own style and behaviour.
Exclusive Behaviour
The link below shows the menu exclusive mode. This is the default behavior when the menu-inclusive class is not added to each dropdown element.
<div class="row" id="menuControl5">
<div class="col">
<div class="dropdown">
<a href="javascript:void 0" class="menu-activator button-link-sm text-left">Menu</a>
<div class="dropdown-content-expand pad-left-sm">
<div class="width-full">
<a href="javascript:void 0" class="menu-activator button-link-sm text-left width-full">Javascript Frameworks</a>
<div class="dropdown-content-expand menu-close pad-left-lg-xl width-full gap-vertical-xs">
<a href="#0" class="menu-button-link text-left text-underline">Angular</a>
<a href="#0" class="menu-button-link text-left text-underline">React</a>
<a href="#0" class="menu-button-link text-left text-underline">Vue</a>
</div>
<a href="javascript:void 0" class="menu-activator button-link-sm text-left width-full">CSS Frameworks</a>
<div class="dropdown-content-expand menu-close pad-left-lg-xl width-full gap-vertical-xs">
<a href="#0" class="menu-button-link text-left text-underline">WebUI</a>
<a href="#0" class="menu-button-link text-left text-underline">Tailwind</a>
</div>
<a href="javascript:void 0" class="menu-activator button-link-sm text-left width-full">Server Frameworks</a>
<div class="dropdown-content-expand menu-close pad-left-lg-xl width-full gap-vertical-xs">
<a href="#0" class="menu-button-link text-left text-underline">Express</a>
<a href="#0" class="menu-button-link text-left text-underline">Next</a>
<a href="#0" class="menu-button-link text-left text-underline">Ruby on Rails</a>
</div>
</div>
</div>
</div>
</div>
</div>
HTML
webui.ready( () => {
ui("#menuControl5").menuControl({
transitionDuration: 300,
transitionType: "collapse"
});
});
JS
Inclusive Behaviour
The link below shows the menu inclusive mode by including the menu-inclusive class on each dropdown element.
<div class="row" id="menuControl4">
<div class="col">
<div class="dropdown">
<a href="javascript:void 0" class="menu-activator button-link-sm text-left">Menu</a>
<div class="dropdown-content-expand pad-left-sm">
<div class="width-full">
<a href="javascript:void 0" class="menu-activator button-link-sm text-left width-full">Javascript Frameworks</a>
<div class="dropdown-content-expand menu-inclusive menu-close pad-left-lg-xl width-full gap-vertical-xs">
<a href="#0" class="menu-button-link text-left text-underline">Angular</a>
<a href="#0" class="menu-button-link text-left text-underline">React</a>
<a href="#0" class="menu-button-link text-left text-underline">Vue</a>
</div>
<a href="javascript:void 0" class="menu-activator button-link-sm text-left width-full">CSS Frameworks</a>
<div class="dropdown-content-expand menu-inclusive menu-close pad-left-lg-xl width-full gap-vertical-xs">
<a href="#0" class="menu-button-link text-left text-underline">WebUI</a>
<a href="#0" class="menu-button-link text-left text-underline">Tailwind</a>
</div>
<a href="javascript:void 0" class="menu-activator button-link-sm text-left width-full">Server Frameworks</a>
<div class="dropdown-content-expand menu-inclusive menu-close pad-left-lg-xl width-full gap-vertical-xs">
<a href="#0" class="menu-button-link text-left text-underline">Express</a>
<a href="#0" class="menu-button-link text-left text-underline">Next</a>
<a href="#0" class="menu-button-link text-left text-underline">Ruby on Rails</a>
</div>
</div>
</div>
</div>
</div>
</div>
HTML
webui.ready( () => {
ui("#menuControl4").menuControl({
transitionDuration: 300,
transitionType: "collapse"
});
});
JS
Custom Dropdown
This example demonstrates how to customise menu dropdowns with SVG icons, colors and rounded corners.
<div id="menuControl6">
<button class="menu-activator menu-button-link-sm menu-button-dark
background-focus-dark text-left rounded-md">Dropdown Menu</button>
<div class="dropdown-content menu-close width-lg-xl text-sm">
<div class="pad-xxs"></div>
<div class="rounded-lg">
<a href="#0" class="menu-button-link-sm relative dark color-hover-info rounded-top-md">
<span class="place-middle-left left-xxs-xs gap-horizontal-md flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
<polyline points="14 2 14 8 20 8"></polyline>
<line x1="16" y1="13" x2="8" y2="13"></line>
<line x1="16" y1="17" x2="8" y2="17"></line>
<polyline points="10 9 9 9 8 9"></polyline>
</svg>
<label>New File</label>
</span>
</a>
<a href="#0" class="menu-button-link-sm relative dark color-hover-info">
<span class="place-middle-left left-xxs-xs gap-horizontal-md flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
<line x1="12" y1="11" x2="12" y2="17"></line>
<line x1="9" y1="14" x2="15" y2="14"></line>
</svg>
<label>New Folder</label>
</span>
</a>
<a href="#0" class="menu-button-link-sm relative dark color-hover-info">
<span class="place-middle-left left-xxs-xs gap-horizontal-md flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
<polyline points="17 21 17 13 7 13 7 21"></polyline>
<polyline points="7 3 7 8 15 8"></polyline>
</svg>
<label>Save</label>
</span>
</a>
<a href="#0" class="menu-button-link-sm relative dark color-hover-info rounded-bottom-md">
<span class="place-middle-left left-xxs-xs gap-horizontal-md flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="3"></circle>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
</svg>
<label>Settings</label>
</span>
</a>
</div>
</div>
</div>
HTML
webui.ready( () => {
ui("#menuControl6").menuControl({
transitionDuration: 300,
transitionType: "collapse"
});
});
JS
Component Update
Run-time Menu Updates
Settings specified for the menuControl instance can be updated programatically at run-time. See the following example, which sets the autoPositioning and autoResizing settings to false. Use the restore button to revert the change.
<div class="row gap-md text-sm">
<div class="col-fixed">
<button id="menuUpdateCommand" class="button-sm menu-button-info">Update</button>
</div>
<div class="col-fixed">
<button id="menuRestoreCommand" class="button-sm menu-button-info">Restore</button>
</div>
</div>
<div class="row-spacing-md"></div>
<div class="row toolbar-sm dark" id="menuControl7">
<div class="col">
<div class="dropdown width-lg-xl">
<button type="button" class="menu-activator menu-button-link-sm menu-button-dark text-left">Dropdown</button>
<div class="dropdown-content width-full menu-close dark">
<a href="#0" class="menu-button-link-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Typography</a>
<a href="#0" class="menu-button-link-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Colours</a>
<a href="#0" class="menu-button-link-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Forms</a>
<div class="row-spacing-sm"></div>
<div class="row-spacing-sm border-xs border-transparent border-top-accent-5-light"></div>
<a href="#0" class="menu-button-link-sm menu-button-dark hover-accent-5 border-hover-accent-5 text-left">Rows and columns</a>
<a href="#0" class="menu-button-link-sm menu-button-dark color-muted text-italic text-left" disabled>Disabled</a>
</div>
</div>
</div>
</div>
HTML
webui.ready( () => {
var menuControl7 = ui("#menuControl7").menuControl({
transitionDuration: 300,
transitionType: "fade"
});
ui("#menuUpdateCommand").click( () => {
menuControl7.update({ transitionDuration: 1000, transitionType: "collapse" });
});
ui("#menuRestoreCommand").click( () => {
menuControl7.update({ transitionDuration: 300, transitionType: "fade" });
});
});
JS
Functions
WebUI provides a single function that can be used to update the menu instance settings at runtime.
| Function | Description |
|---|---|
| update(newSettings) | Updates the menu instance at runtime using the configuration settings. |
Function Arguments
| Argument | Description |
|---|---|
| newSettings | An object literal containing a comma separated list of settings. |
Events
Menu Event Callbacks
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.
webui.ready( () => {
ui( "#menu1" ).on("ui.dropdown.show.before", (e) => {
// Take some action
});
ui( "#menu1" ).on("ui.dropdown.show.after", (e) => {
// Take some action
});
ui( "#menu1" ).on("ui.dropdown.hide.before", (e) => {
// Take some action
});
ui( "#menu1" ).on("ui.dropdown.hide.after", (e) => {
// Take some action
});
});
JS