Menu

A menu is a ui collection made up of items. These items can be links, dropdowns, menus themselves, badges, or other standard html types.

Items containing menus are formatted as sub menus. Menus containing menus are formatted as the same tier as the parent menu.

Collection

Menu

This example uses several menu elements to display the versatility of a menu collection.

Vertical Menu

This example uses several menu elements, an unclickable block, a clickable text link, a clickable icon link, and a dropdown group

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.

Elements

Text Item

A menu may have a simple text item

Link Item

A menu may have either a real page link or an item that behaves as a link.

Dropdown Item

An item may contain a list of dropdowns to chose from. By default it will appear automatically with css.

A dropdown menu will, by default, automatically show when the parent element is hovered. If you need to programmatically close the dropdown, use the "stateful" variant and the javascript state module, which will allow you to manipulate the state directly.

Menu

A menu may contain another menu group inside. This can be useful for formatting multiple menu items with the same qualities.

Nested Menu

A menu may contain another menu nested inside an item that acts as a grouped sub-menu. This is only available when using a vertical 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

Down

A menu item can be active in

Variations

Menu

Colors

A menu may have other colors defined

Fluid

A menu may take the size of its container, and be divided evenly.

Compact

A horizontal menu may compact itself to only fit content

Pointing (Horizontal)

A menu can point to content below itself to show ownership

Pointing (Horizontal)

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



Vertical Sizes

A vertical menu can vary in size



Items

Fitted

A menu item or menu might be fitted to remove element padding

Borderless

A menu item or menu might might have no dividers