Menu

Menu

Types

Menu

A menu

Starting in 2.0 menus now use flexbox. This allows each menu item to automatically stretch to the size of the largest item.

Many of the following examples use a coupling with dropdowns to display dropdown menus inside of ui menu. Please consult the dropdown documentation for the correct javascript initialization for this component.

Secondary Menu

A menu can adjust its appearance to de-emphasize its contents

Pointing

A menu can point to show its relationship to nearby content

Tabular

A menu can be formatted to show tabs of information

Be sure to visit the tab documentation for information on how to set up dynamic tabs
This is an stretched grid column. This segment will always match the tab height
This is an stretched grid column. This segment will always match the tab height

Text

A menu can be formatted for text content

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

Content

Header

A menu item may include a header or may itself be a header

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.

Dropdown Item

An item may contain a nested menu in a dropdown.

To have a dropdown open without Javascript, use the simple variation

Search

A menu can contain a search input

Menu

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

Sub 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 a links, or given the class name link

Active

A menu item can be active

Variations

Fixed

A menu can be fixed to a side of its context

These examples use a an iframe, to prevent content from sticking to the browser viewport.
For more advanced behaviors consider using a sticky menu or visibility APIs.

Stackable

A menu can stack at mobile resolutions

Stackable menus are intended to be used with only simple menu content. Stacked menus will not replicate all additional stylings for vertical menus like adjusting dropdown position.

Inverted

A menu may have its colors inverted to show greater contrast

Colored

Additional colors can be specified.

These colors can also be inverted

Icons

A menu may have just icons



Labeled Icon

A menu may have labeled icons



Fluid

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

Compact

A menu can take up only the space necessary to fit its content

Evenly Divided

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.
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.

Size

A 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

Dimmer Message
Dimmer sub-header