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
Header Item
A menu may have a header item to help label sections of a menu.
Text Item
A menu may have a simple text item.
Single paragraphs are automatically formatted as text. You can also specify an item as textual by adding the classname text
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 class name dynamic and the javascript state module, which will allow you to manipulate the hover state in javascript.
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
Variations
Menu
Contrasting
A menu may have its colors inverted to show greater contrast
Colors
Additional colors can be specified
Icons
A menu may have just icons
Icons
A menu may have labeled 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