Foundation Laravel Package

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

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

autoHeight

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

ScrollTop Drilldown

<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 {
  // ...
}