---
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.