My Digital Buildings

Drilldown Menu

Drilldown is one of Foundation's three menu patterns, which converts a series of nested lists into a vertical drilldown menu.

Basics

Drilldowns use the standard Menu 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.

Watch this part in video

edit on codepen button
<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>

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.

autoHeight

If you like to set the height to auto you can also set the autoHeight and animateHeight params

Watch this part in video

edit on codepen button
<ul class="vertical menu drilldown" data-drilldown data-auto-height="true" data-animate-height="true">
  <!--  -->
</ul>

ScrollTop Drilldown

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.
edit on codepen button
<ul class="vertical menu drilldown" data-drilldown data-scroll-top="true">
  <!--  -->
</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:

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