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