A menu is a collection of elements showing related user actions

Definition Mode



A menu

Vertical Menu

A vertical menu displays elements vertically.

A vertical menu's width defaults to an arbitrary size. To have it fit your content more precisely use the fluid variation in conjunction with ui grid.


A pagination menu is specially formatted to present links to pages of content


A message can be formatted to show tabs of information

Tiered Menu

A tiered menu can show the sub-sections available as part of an activated section.

Vertical Menu w/ Sub Menus

A tiered menu can show the sub-sections available as part of an activated section.

Secondary Menu

A secondary menu has more subtle formatting, ideal for showing the sections of content on a page.


A menu can point to content to show relationship


A menu can display simple text links


Header Item

A menu may have a header to help label sections of a menu.

Text Item

A menu may have a simple text item.

Single paragraphs are automatically formatted as text. You can also specify an item as textual by adding the classname text


A menu item can contain an input inside of it


A menu item can contain a button inside of it

Link Item

A menu may contain a link item, or an item formatted as if it is a link.

Items that are anchor tags will automatically be formatted as a link.

Dropdown Item

An item may contain a nested menu in a dropdown.

Dropdowns use UI dropdown elements. To have a dropdown open without javascript, use the simple variation


A menu may contain another menu group in the same level as menu items.

Nested Menu

A menu item may contain another menu nested inside that acts as a grouped sub-menu.



A menu item can be hovered

Menu items are only hoverable if they are links, defined with the variant "link", or are given the class name hover programmatically.


A menu item can be pressed in


A menu item can be active




A menu may have its colors inverted to show greater contrast


Additional colors can be specified.

These colors can also be inverted


A menu may have just icons


A menu may have labeled icons


A vertical menu may take the size of its container. (A horizontal menu does this by default)

Evenly sized items

A menu may divide its items evenly

A vertical menu can point to content adjacent to itself to show ownership


A menu may be attached to other content segments

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

Horizontal Sizes

A horizontal menu can vary in size

A vertical menu can also vary in size



A menu item or menu can remove element padding, vertically or horizontally


A menu item or menu can have no borders