Types

Menu

A menu.

You can do the same using shorthands.

Menu item text can be defined with the content prop.

The name prop will be used for content if neither children nor content props are defined.

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.

Text

A menu can be formatted for text content.

Vertical Menu

A vertical menu displays elements vertically.

Pagination

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

For fully featured pagination, see Pagination addon.

Content

Header

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

Text

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

Input

A menu item can contain an input inside of it.

Button

A menu item can contain a button inside of it.

Dropdown Item

An item may contain a nested menu in a dropdown.

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.

Active

A menu item can be active.

Disabled

A menu item can be disabled.

Variations

Fixed

A menu can be fixed to a side of its context.

Stackable

A menu can stack at mobile resolutions.

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.

Compact

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

Evenly Divided

A menu may divide its items evenly.

Attached

A menu may be attached to other content segments.

Size

A menu can vary in size.

A vertical menu can also vary in size.

Fitted

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

Borderless

A menu item or menu can have no borders.

This is the bottom
Blazing deployments by Vercel.