Multi-level Accordion File Menu

By Rafi

How do I use This?

Using the Foundation 6 accordion menu component, we created a slick multilevel accordion menu. The icons change as the menu opens and closes. This is great for a side nav, sidebar, mobile menu, or off-canvas menu.

HTML

<ul class="multilevel-accordion-menu vertical menu" data-accordion-menu>
  <li>
    <a href="#">Item 1</a>
    <ul class="menu vertical sublevel-1">
      <li>
        <a href="#">Sub-item 1</a>
        <ul class="menu vertical sublevel-2">
          <li><a class="subitem" href="#">Thing 1</a></li>
          <li><a class="subitem" href="#">Thing 2</a></li>
          <li><a class="subitem" href="#">Thing 3</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Sub-item 2</a>
        <ul class="menu vertical sublevel-2">
          <li>
            <a href="#">Super-sub-item 1</a>
            <ul class="menu vertical sublevel-3">
              <li><a class="subitem" href="#">Thing 1</a></li>
              <li><a class="subitem" href="#">Thing 2</a></li>
            </ul>
          </li>
          <li><a class="subitem" href="#">Thing 2</a></li>
        </ul>
      </li>
      <li><a class="subitem" href="#">Thing 1</a></li>
      <li><a class="subitem" href="#">Thing 2</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 2</a>
    <ul class="menu vertical sublevel-1">
      <li><a class="subitem" href="#">Thing 1</a></li>
      <li><a class="subitem" href="#">Thing 2</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 3</a>
    <ul class="menu vertical sublevel-1">
      <li><a class="subitem" href="#">Thing 1</a></li>
      <li><a class="subitem" href="#">Thing 2</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 4</a>
    <ul class="menu vertical sublevel-1">
      <li>
        <a href="#">Sub-item 3</a>
        <ul class="menu vertical sublevel-2">
          <li><a class="subitem" href="#">Thing 1</a></li>
          <li><a class="subitem" href="#">Thing 2</a></li>
        </ul>
      </li>
      <li><a class="subitem" href="#">Thing 1</a></li>
      <li><a class="subitem" href="#">Thing 2</a></li>
    </ul>
  </li>
</ul>

// variables
$multilevel-accordion-bg: #4d5158;
$multilevel-accordion-sub-bg: #35383d;
$multilevel-accordion-separator: #41444a;

.multilevel-accordion-menu {
  // background for main accordion items
  .is-accordion-submenu-parent a {
    background: $multilevel-accordion-bg;
  }

  // background for sub accordion items
  .is-accordion-submenu a {
    background: $multilevel-accordion-sub-bg;
  }

  // creates classes for nested elements, sub-item-*
  @for $i from 1 through 6 {
    .sublevel-#{$i} {
      text-indent: 0rem + $i;
    }
  }

  a {
    color: $white;
    // sets accodion item separator color
    box-shadow: inset 0 -1px $multilevel-accordion-separator;

    &::after {
      // sets accodion arrow color and direction
      border-color: $white transparent transparent;
    }
  }

  // padding for each list item
  .menu > li:not(.menu-text) > a {
    padding: 1.2rem 1rem;
  }
}

// style for folder icon on subitem anchors without a submenu
.multilevel-accordion-menu .is-accordion-submenu-parent[aria-expanded="true"] a.subitem::before {
  content: "\f016";
  font-family: FontAwesome;
  margin-right: 1rem;
}

// changes folder icon to open then accordion is open
.multilevel-accordion-menu .is-accordion-submenu-parent[aria-expanded="true"] a {
  &::before {
    content: "\f07c";
    font-family: FontAwesome;
    margin-right: 1rem;
  }
}

// changes folder icon to closed then accordion is closed
.multilevel-accordion-menu .is-accordion-submenu-parent[aria-expanded="false"] a {
  &::before {
    content: "\f07b";
    font-family: FontAwesome;
    margin-right: 1rem;
  }
}

.multilevel-accordion-menu .is-accordion-submenu-parent a {
  background: #4d5158;
}

.multilevel-accordion-menu .is-accordion-submenu a {
  background: #35383d;
}

.multilevel-accordion-menu .sublevel-1 {
  text-indent: 1rem;
}

.multilevel-accordion-menu .sublevel-2 {
  text-indent: 2rem;
}

.multilevel-accordion-menu .sublevel-3 {
  text-indent: 3rem;
}

.multilevel-accordion-menu .sublevel-4 {
  text-indent: 4rem;
}

.multilevel-accordion-menu .sublevel-5 {
  text-indent: 5rem;
}

.multilevel-accordion-menu .sublevel-6 {
  text-indent: 6rem;
}

.multilevel-accordion-menu a {
  color: #fefefe;
  box-shadow: inset 0 -1px #41444a;
}

.multilevel-accordion-menu a::after {
  border-color: #fefefe transparent transparent;
}

.multilevel-accordion-menu .menu > li:not(.menu-text) > a {
  padding: 1.2rem 1rem;
}

.multilevel-accordion-menu .is-accordion-submenu-parent[aria-expanded="true"] a.subitem::before {
  content: "\f016";
  font-family: FontAwesome;
  margin-right: 1rem;
}

.multilevel-accordion-menu .is-accordion-submenu-parent[aria-expanded="true"] a::before {
  content: "\f07c";
  font-family: FontAwesome;
  margin-right: 1rem;
}

.multilevel-accordion-menu .is-accordion-submenu-parent[aria-expanded="false"] a::before {
  content: "\f07b";
  font-family: FontAwesome;
  margin-right: 1rem;
}

Multi-level Accordion File Menu

By Rafi

Pagination with Pointed Buttons

Ecommerce Footer

Sticky Shrinking Top Bar Nav

Multi-level Accordion File Menu

By Rafi

Similar Building Blocks

Pagination with Pointed Buttons

Ecommerce Footer

Sticky Shrinking Top Bar Nav