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.
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
Down
A menu item can be pressed in
Active
A menu item can be active in
Variations
Menu
Colors
A menu may have other colors defined
Icons
A menu may have just icons
Fluid
A menu may take the size of its container, and be divided evenly.
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