---
title: Drilldown Menu
description: Drilldown is one of Foundation's three menu patterns, which converts a series of nested lists into a vertical drilldown menu.
video: 8qPQRXl52hI
scss: scss/components/_drilldown.scss
js: js/foundation.drilldown.js
---

## Basics

Drilldowns use the standard [Menu](menu.html#nested-style) syntax, using `<ul>`, `<li>`, and `<a>`. Add `data-drilldown` to the root menu to set up the drilldown.

To create sub-menus, place a `<ul>` *next to* an `<a>`. Clicking that `<a>` will then open the `<ul>` that it's next to.

Any `<a>` without a submenu will function like a normal link.

<p>
  <a class="" data-open-video="0:54"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
</p>

<div class="docs-codepen-container">
  <a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/JNZodd?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>

```html
<ul class="vertical menu drilldown" data-drilldown>
  <li><a href="#">One</a></li>
  <li>
    <a href="#">Two</a>
    <ul class="menu vertical nested">
      <li><a href="#">Two A</a></li>
      <li><a href="#">Two B</a></li>
      <li><a href="#">Two C</a></li>
      <li><a href="#">Two D</a></li>
    </ul>
  </li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>
```

<div class="primary callout">
  <p>The drilldown menu takes on the height of the tallest menu in the hierarchy, so the menu doesn't change height as the user navigates it.</p>
</div>

<ul class="vertical menu drilldown" data-drilldown style="max-width: 250px" id="m1">
  <li>
    <a href="#">Item 1</a>
    <ul class="menu vertical nested">
      <li>
        <a href="#">Item 1A</a>
        <ul class="menu vertical nested">
          <li><a href="#Item-1Aa">Item 1Aa</a></li>
          <li><a href="#Item-1Ba">Item 1Ba</a></li>
          <li><a href="#Item-1Ca">Item 1Ca</a></li>
          <li><a href="#Item-1Da">Item 1Da</a></li>
          <li><a href="#Item-1Ea">Item 1Ea</a></li>
        </ul>
      </li>
      <li><a href="#Item-1B">Item 1B</a></li>
      <li><a href="#Item-1C">Item 1C</a></li>
      <li><a href="#Item-1D">Item 1D</a></li>
      <li><a href="#Item-1E">Item 1E</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 2</a>
    <ul class="menu vertical nested">
      <li><a href="#Item-2A">Item 2A</a></li>
      <li><a href="#Item-2B">Item 2B</a></li>
      <li><a href="#Item-2C">Item 2C</a></li>
      <li><a href="#Item-2D">Item 2D</a></li>
      <li><a href="#Item-2E">Item 2E</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 3</a>
    <ul class="menu vertical nested">
      <li><a href="#Item-3A">Item 3A</a></li>
      <li><a href="#Item-3B">Item 3B</a></li>
      <li><a href="#Item-3C">Item 3C</a></li>
      <li><a href="#Item-3D">Item 3D</a></li>
      <li><a href="#Item-3E">Item 3E</a></li>
    </ul>
  </li>
  <li><a href="#Item-4"> Item 4</a></li>
</ul>

## autoHeight

<div class="secondary callout">
  <p>If you like to set the height to auto you can also set the autoHeight and animateHeight params</p>
  <button class="button expanded" onclick="$('#m3').foundation('_destroy');if($('#m3').data('autoHeight')){$('#m3').data('autoHeight',false);$(this).html('autoHeight is Off');}else{$('#m3').data('autoHeight',true);$(this).html('autoHeight is On');}new Foundation.Drilldown($('#m3'));return false;">autoHeight is On</button>
</div>

<p>
<a class="" data-open-video="4:39"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
</p>

<div class="docs-codepen-container">
  <a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/mmKyrw?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>

```html
<ul class="vertical menu drilldown" data-drilldown data-auto-height="true" data-animate-height="true">
  <!--  -->
</ul>
```

<ul class="vertical menu drilldown" data-drilldown data-auto-height="true" data-animate-height="true" style="max-width: 250px" id="m3">
  <li>
    <a href="#">Item 1</a>
    <ul class="menu vertical nested">
      <li>
        <a href="#">Item 1A</a>
        <ul class="menu vertical nested">
          <li><a href="#Item-1Aa">Item 1Aa</a></li>
          <li><a href="#Item-1Ba">Item 1Ba</a></li>
        </ul>
      </li>
      <li><a href="#Item-1B">Item 1B</a></li>
      <li><a href="#Item-1C">Item 1C</a></li>
      <li><a href="#Item-1D">Item 1D</a></li>
      <li><a href="#Item-1E">Item 1E</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 2</a>
    <ul class="menu vertical nested">
      <li><a href="#Item-2A">Item 2A</a></li>
      <li><a href="#Item-2B">Item 2B</a></li>
      <li><a href="#Item-2C">Item 2C</a></li>
      <li><a href="#Item-2D">Item 2D</a></li>
      <li><a href="#Item-2E">Item 2E</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 3</a>
    <ul class="menu vertical nested">
      <li><a href="#Item-3A">Item 3A</a></li>
      <li><a href="#Item-3B">Item 3B</a></li>
      <li><a href="#Item-3C">Item 3C</a></li>
      <li><a href="#Item-3D">Item 3D</a></li>
      <li>
        <a href="#Item-3E">Item 3E</a>
        <ul class="menu vertical nested">
          <li><a href="#Item-3EA">Item 3EA</a></li>
          <li><a href="#Item-3EB">Item 3EB</a></li>
          <li><a href="#Item-3EC">Item 3EC</a></li>
          <li><a href="#Item-3ED">Item 3ED</a></li>
          <li><a href="#Item-3EE">Item 3EE</a></li>
          <li><a href="#Item-3EA">Item 3EA</a></li>
          <li><a href="#Item-3EB">Item 3EB</a></li>
          <li><a href="#Item-3EC">Item 3EC</a></li>
          <li><a href="#Item-3ED">Item 3ED</a></li>
          <li><a href="#Item-3EE">Item 3EE</a></li>
          <li><a href="#Item-3EA">Item 3EA</a></li>
          <li><a href="#Item-3EB">Item 3EB</a></li>
          <li><a href="#Item-3EC">Item 3EC</a></li>
          <li><a href="#Item-3ED">Item 3ED</a></li>
          <li><a href="#Item-3EE">Item 3EE</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#Item-4"> Item 4</a></li>
  <li><a href="#Item-5"> Item 5</a></li>
  <li><a href="#Item-6"> Item 6</a></li>
  <li><a href="#Item-7"> Item 7</a></li>
  <li><a href="#Item-8"> Item 8</a></li>
</ul>

## ScrollTop Drilldown

<div class="callout">Scroll to the top of the menu when selecting a submenu/navigating back using the menu back button. Can be useful with a longer menu to provide a better user experience.</div>


<div class="docs-codepen-container">
  <a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/jmKEwX?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>

```html
<ul class="vertical menu drilldown" data-drilldown data-scroll-top="true">
  <!--  -->
</ul>
```

<ul class="vertical menu drilldown" data-drilldown data-scroll-top="true" data-auto-height="true" data-animate-height="true" style="max-width: 250px" id="m2">
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li> <a href="#">Item</a>
    <ul class="vertical menu nested">
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li> <a href="#">Item</a>
        <ul class="vertical menu nested">
          <li><a href="#">Item</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Item</a></li>
</ul>

---

## Custom Styling

The drilldown plugin automatically adds a back button to the top of each nested menu. To style this control, target the `.js-drilldown-back` class:

```css
.js-drilldown-back {
  // ...
}
```