Menu

Menus can be used as navigation of a website or for more complex web applications. A menu consists of a menu bar that contains menu items.

Simple menu

This is a simple menu with some items that are left-aligned.

<ul class="menu"> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Nowhere</a></li> <li><a href="#">Somewhere else</a></li> </ul>

Right-aligned menu

The entire menu can also be aligned to the right end by adding the right CSS class to the menu element.

An item can be highlighted by adding the active CSS class to it. This can be used to indicate the current page in a website navigation menu.

Left- and right-aligned items

When adding the both CSS class to the menu element, you can align some items to the left and others to the right end. The space in between is declared with a pseudo menu item with the stretch class.

<ul class="menu both"> (left-aligned items) <li class="stretch"></li> (right-aligned items) </ul>

Non-link items

Menu items can also be non-interactive and only show some text. Add the text CSS class to such menu items. In this example, an additional horizontal padding was added to the menu element to align with potential content padding.

This example shows a text on the left side, as placeholder for an image or other content, while all interactive menu items are at the right end.

Dropdown menus

Menus can also have submenus. (For now, only one submenu level is supported.) They open as a dropdown when the menu item is clicked. Items with a submenu can have an indicator, either with the submenu-arrow or submenu-dots class added to the menu element.

Menu items can be disabled by adding the disabled HTML attribute (not a CSS class).

Separator items are added as simple menu items with no CSS class and a single dash (-) as content.

If the menu should not start a page navigation, its <a href> attribute can be set to #. It will be replaced with a true no-op with minimal status bar cluttering while hovering the link.

Clicked items on a submenu will close the submenu, unless the link element has the stay-open class.

Disable "Even more" menu

Vertical menu

A vertical menu can be created by adding the vertical CSS class to the menu element. The width must be restricted if there is no bounding container, otherwise the vertical menu will span the entire available paragraph width.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in augue bibendum, efficitur nunc vel, placerat massa. Duis enim dui, ultrices eu felis cursus, lacinia fermentum erat. Mauris id ipsum mi. Duis nec vulputate sem, vel egestas justo. Maecenas suscipit tristique lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sollicitudin ex laoreet mi tempus, id mollis dolor scelerisque. Mauris iaculis tristique ligula, eget efficitur sapien iaculis sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Fusce varius urna eget justo egestas, non convallis dolor condimentum. Donec eget augue ut ligula porttitor consequat. Donec eu magna sit amet risus auctor pharetra at at mi. Integer eget mattis ex, nec pharetra eros. Proin nec sem tempus, efficitur dui sit amet, aliquam urna. Phasellus tincidunt pellentesque molestie. In hendrerit scelerisque venenatis. Mauris commodo consequat nulla id hendrerit. Suspendisse a porta sapien. Sed id tortor eu nulla semper dictum. Curabitur at neque eleifend, dignissim odio ut, viverra turpis.