@ithaka/bonsai/documentation/pages/components/dropdownmenu.md

ITHAKA core styling

---
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 there are items in the dropdown menu that don't have a dropdown, add `.menu-item` to the parent
`li` to maintain consistent styling.

```html_example
<ul class="dropdown menu" data-dropdown-menu>
    <li>
        <a href="#">Item 1</a>
        <ul class="menu">
            <li><a href="#">Item 1A</a></li>
            <li><a href="#">Item 1B</a></li>
            <li><a href="#">Item 1C</a></li>
        </ul>
    </li>
    <li class="menu-item"><a href="#">Item 2</a></li>
    <li class="menu-item"><a href="#">Item 3</a></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="#">Item 1</a>
        <ul class="menu">
            <li><a href="#">Item 1A</a></li>
            <li><a href="#">Item 1B</a></li>
            <li><a href="#">Item 1C</a></li>
        </ul>
    </li>
    <li class="active">
        <a href="#">Item 2</a>
        <ul class="menu">
            <li><a href="#">Item 2A</a></li>
            <li><a href="#">Item 2B</a></li>
            <li class="active"><a href="#">Item 2C - Current</a></li>
            <li><a href="#">Item 2D</a></li>
        </ul>
    </li>
    <li>
         <a href="#">Item 3</a>
         <ul class="menu">
             <li><a href="#">Item 3A</a></li>
             <li><a href="#">Item 3B</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.