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

```html_example
<ul class="dropdown menu" data-dropdown-menu>
    <li class="is-dropdown-submenu-parent">
        <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>
```
<hr>

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