@ithaka/bonsai
Version:
ITHAKA core styling
119 lines (102 loc) • 4.41 kB
Markdown
---
title: Dropdown Menu
description: A dropdown menu is a navigational element that allows a user to select from multiple links.
sass: ./scss/_dropdownmenu.scss
js: ./js/bonsai.dropdownmenu.js
foundation: http://foundation.zurb.com/sites/docs/dropdown-menu.html
---
## How to Use
Dropdown menus are used in the global navigation. Use the class `.dropdown` and `.menu` and the
attribute `data-dropdown-menu` to set up the dropdown menu.
If you do not want the built-in arrow icon after a menu item, you can add a class of `.no-arrow` to the anchor element
for the menu item.
If there are items in the dropdown menu that don't have a dropdown, add `.menu-item` to the parent
`li` to maintain consistent styling.
Add the `.disabled` class to disable a menu item. This will prevent hover styling and any clicks from closing the dropdown.
```html_example
<ul class="dropdown menu" data-dropdown-menu>
<li>
<a href="javascript:void(0)">Something</a>
<ul class="menu">
<li><a href="javascript:void(0)">Something 1</a></li>
<li><a href="javascript:void(0)">Something 2</a></li>
<li><a href="javascript:void(0)">Something 3</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Nothing</a></li>
<li>
<a href="javascript:void(0);" class="no-arrow"><i class="icon-ellipsis-h"></i></a>
<ul class="menu">
<li><a href="javascript:void(0)">Thing 1</a></li>
<li class="disabled"><a href="javascript:void(0)">Disabled Thing 2</a></li>
<li><a href="javascript:void(0)">Thing 3</a></li>
</ul>
</li>
</ul>
```
### Current active item indication
When its desired for the menu to reflect currently selected option, add `.active` to both the main
parent option `li` as well as submenu items parent `li`
```html_example
<ul class="dropdown menu" data-dropdown-menu>
<li>
<a href="javascript:void(0)">Item 1</a>
<ul class="menu">
<li><a href="javascript:void(0)">Item 1A</a></li>
<li><a href="javascript:void(0)">Item 1B</a></li>
<li><a href="javascript:void(0)">Item 1C</a></li>
</ul>
</li>
<li class="active">
<a href="javascript:void(0)">Item 2</a>
<ul class="menu">
<li><a href="javascript:void(0)">Item 2A</a></li>
<li><a href="javascript:void(0)">Item 2B</a></li>
<li class="active"><a href="javascript:void(0)">Item 2C - Current</a></li>
<li><a href="javascript:void(0)">Item 2D</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0)">Item 3</a>
<ul class="menu">
<li><a href="javascript:void(0)">Item 3A</a></li>
<li><a href="javascript:void(0)">Item 3B</a></li>
</ul>
</li>
</ul>
```
### Click to open
Sometimes it is desirable to disable the "hover to open" functionality, and instead require the user to click
to open/close the menu. This can be accomplished by adding the `data-disable-hover` and `data-click-open` attributes.
In addition, this also ensures that only one dropdown menu remains open at once.
```html_example
<ul id="menu-1" class="dropdown menu" role="menubar" data-dropdown-menu data-disable-hover="true" data-click-open="true">
<li>
<a href="javascript:void(0)">Click to open</a>
<ul class="menu">
<li><a href="javascript:void(0)">Item 1</a></li>
<li><a href="javascript:void(0)">Item 2</a></li>
<li><a href="javascript:void(0)">Item 3</a></li>
</ul>
</li>
</ul>
<ul id="menu-2" class="dropdown menu" role="menubar" data-dropdown-menu data-disable-hover="true" data-click-open="true">
<li>
<a href="javascript:void(0)">Click to open</a>
<ul class="menu">
<li><a href="javascript:void(0)">Item 4</a></li>
<li><a href="javascript:void(0)">Item 5</a></li>
<li><a href="javascript:void(0)">Item 6</a></li>
</ul>
</li>
</ul>
```
## Accessibility
1. Ensure that menus can be accessed and navigated via keyboard.
1. Clear styling to indicate which item in the menu has keyboard focus.
## Guidelines
1. Limit the amount of text to a single line.
1. Clear hover and focus states for menu items.
1. Logical ordering and grouping of links within menu.
## Avoid
1. Multiple lines of text for a single menu item.