--- layout : 'default' css : 'menu' title : 'Menu' description : 'A menu is a collection of elements showing related user actions' type : 'UI Collection' --- <%- @partial('header') %>

Types

Menu

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.

Pagination

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

Tabular

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 allows for a section of content on a page to be activated

A vertical secondary menu

Pointing

A menu can point to content to show relationship



Text

A menu can display simple text links

A vertical text menu

Elements

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

Input

A menu item can contain an input inside of it

Button

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

Menu

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.

States

Hover

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.

Down

A menu item can be pressed in

Active

A menu item can be active

Variations

Menu

Inverted

A menu may have its colors inverted to show greater contrast

Colors

Additional colors can be specified.






These colors can also be inverted






Icons

A menu may have just icons



Icons

A menu may have labeled icons



Fluid

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

Attached

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

Items

Fitted

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

Borderless

A menu item or menu can have no borders