Foundation Laravel Package

title: Accordion Menu sass: scss/components/_accordion-menu.scss js: js/foundation.accordionMenu.js description: Change a basic vertical Menu into a expandable accordion menu with the Accordion Menu plugin. video: FXZIZ9N4aeI

Basics

Accordion menus follow the basic Menu syntax of <ul>, <li>, and <a>. To convert a basic menu into an accordion, add the attribute data-accordion-menu. You probably also want it to be vertical, so add the class .vertical as well.

Any <a> will behave like a standard link. However, any <a> paired with a nested <ul> menu will then slide that sub-menu up and down when clicked on.

Watch this part in video

<ul class="vertical menu accordion-menu" data-accordion-menu>
  <li>
    <a href="#">Item 1</a>
    <ul class="menu vertical nested">
      <li><a href="#">Item 1A</a></li>
      <li><a href="#">Item 1B</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
</ul>

Submenu Toggle

Accordion menus can have a separate submenu toggle. This allows the parent item to have its own link, but still allows the submenu to be opened/closed. You need to add the class accordion-menu as well as the data attribute data-submenu-toggle="true" for this to work correctly.

<ul class="vertical menu accordion-menu" data-accordion-menu data-submenu-toggle="true">
  <li>
    <a href="https://get.foundation/" target="_blank">Link here, dropdown there →</a>
    <ul class="menu vertical nested">
      <li>
        <a href="#">Item 1A</a>
        <ul class="menu vertical nested">
          <li><a href="#">Item 1Ai</a></li>
          <li><a href="#">Item 1Aii</a></li>
          <li><a href="#">Item 1Aiii</a></li>
        </ul>
      </li>
      <li><a href="#">Item 1B</a></li>
      <li><a href="#">Item 1C</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 2</a>
    <ul class="menu vertical nested">
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 2B</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a></li>
</ul>