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.

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

A menu can point to show its relationship to nearby content

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

To make a vertical tabular menu appear seamless attached to the related segment, you should make use of left/right attached grid columns and seamless attached segments

This is an stretched grid column. This segment will always match the tab height

A menu can be formatted for text content

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

...

10 11 12

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

A vertical menu item can include any type of text content.

A menu item can contain an input inside of it

A menu item can contain a button inside of it

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

An item may contain a nested menu in a dropdown.

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

A menu can contain a search input

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

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

A menu item can be active

A menu item can be disabled

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.

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.

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)

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

A menu may divide its items evenly by either using equal width ...

... or by declaring a fixed number of items like three item menu.

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

A 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

A menu can be shown centered.

You can also use the center aligned alias.

...

10 11 12

A menu can be shown centered and fluid at the same time.

Menu items can automatically wrap on responsive layouts

There exists an optional wrapped helper class which should be set to the menu when it's known if menu items are actually wrapped, which will adjust some border-radius. As it is not possible to detect a wrapping child automatically via pure CSS, you should use that helper class whenever appropriate.

By combining centered, fluid and wrapping you could create a menu similar to Wrapping button groups

Types

Business

Liberal Arts

Social Sciences

Secondary Menu

Pointing

Tabular

Text

Vertical Menu

Pagination

Content

Header

Text

Promotions

Coupons

Rebates

Input

Button

Link Item

Dropdown Item

Popup Menu

Fabrics

Size

Colored

Types

Search

Menu

Sub Menu

States

Hover

Active

Disabled

Variations

Fixed

Stackable

Inverted

Colored

Icons

Labeled Icon

Fluid

Compact

Evenly Divided

Attached

Size

Items

Fitted

Borderless

Centered

Centered Fluid

Wrapping

Centered Fluid Wrapping

Dimmer Message Dimmer sub-header

Dimmer Message
Dimmer sub-header