<!-- This demo uses float grid but you can use flex grid too -->
<div class="row">
<div class="columns">
<h2>Drilldown Menu</h2>
<p>Popularized by iOS, Drilldown menu is a series of nested lists which converts itself into a vertical drilldown menu.</p>
<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>
</div>
</div>
<div class="row">
<div class="columns">
<ul class="vertical menu" data-drilldown style="width: 200px" id="m1">
<li>
<a href="#0">Item 1</a>
<ul class="vertical menu" id="m2">
<li>
<a href="#0">Item 1A</a>
<ul class="vertical menu" id="m3">
<li><a href="#0">Item 1Aa</a></li>
<li><a href="#0">Item 1Ba</a></li>
<li><a href="#0">Item 1Ca</a></li>
<li><a href="#0">Item 1Da</a></li>
<li><a href="#0">Item 1Ea</a></li>
</ul>
</li>
<li><a href="#0">Item 1B</a></li>
<li><a href="#0">Item 1C</a></li>
<li><a href="#0">Item 1D</a></li>
<li><a href="#0">Item 1E</a></li>
</ul>
</li>
<li>
<a href="#0">Item 2</a>
<ul class="vertical menu">
<li><a href="#0">Item 2A</a></li>
<li><a href="#0">Item 2B</a></li>
<li><a href="#0">Item 2C</a></li>
<li><a href="#0">Item 2D</a></li>
<li><a href="#0">Item 2E</a></li>
</ul>
</li>
<li>
<a href="#0">Item 3</a>
<ul class="vertical menu">
<li><a href="#0">Item 3A</a></li>
<li><a href="#0">Item 3B</a></li>
<li><a href="#0">Item 3C</a></li>
<li><a href="#0">Item 3D</a></li>
<li><a href="#0">Item 3E</a></li>
</ul>
</li>
<li><a href='#0'> Item 4</a></li>
</ul>
</div>
</div>
/* Demo Styles */
body {
padding: 2rem 1rem;
}
$(document).foundation();
Also see: Tab Triggers