PF-Accordion-Menu

ready

Introduction

CSS-only sidebar navigation

In the following example, Disbursements, Assignment notices, Search, and Banking details can expand sub-trees.

Disbursements, and Banking details have no separate link, so will expand when clicked upon.

Assignment notices, and Search have their own links, so the user will need to click on the accordion buttons to expand.

Read here for more information around using SVG sprites.

Examples

Menu

<nav>
  <ul class="pf-accordion-menu">
    <li>
      <!-- Top level link with no submenu -->
      <a href="#">
        <svg class="icon-svg">
          <use xlink:href="/v2.7/assets/images/icons/sprite.svg#dashboard" />
        </svg>
        Dashboard
      </a>
    </li>
    <li>
      <!-- Top level menu item with submenu -->
      <!-- order of elements is very significant! -->
      <!-- input, then label/link, then another label for toggle button, then ul for nested menu -->
      <input id="menu1a" type="checkbox">
      <!-- if a top level link is not required, use a label with "for" to hook it into checkbox -->
      <label for="menu1a">
        <svg class="icon-svg">
          <use xlink:href="/v2.7/assets/images/icons/sprite.svg#disbursement" />
        </svg>
        Disbursements
      </label>
      <!-- if a submenu is needed, include this label, hooked into the previous checkbox -->
      <label for="menu1a" class="pf-accordion-menu__fakecheck">
        <svg class="icon-svg">
          <use xlink:href="/v2.7/assets/images/icons/sprite.svg#chevron-down" />
        </svg>
      </label>
      <!-- submenu list -->
      <ul>
        <li><a href="#">Active disbursements</a></li>
        <li><a href="#">Adjustment tracker</a></li>
        <li><a href="#">Funds breakdown</a></li>
        <li><a href="#">Internal</a></li>
        <li><a href="#">Payments</a></li>
        <li><a href="#">Audit trail</a></li>
        <li><a href="#">Files</a></li>
      </ul>
    </li>
    <li>
      <!-- Top level menu item with link and submenu, `checked` renders it already open -->
      <input id="menu2a" type="checkbox" checked>
      <a href="#">
        <svg class="icon-svg">
          <use xlink:href="/v2.7/assets/images/icons/sprite.svg#envelope" />
        </svg>
        Assignment notices
      </a>
      <label for="menu2a" class="pf-accordion-menu__fakecheck">
        <svg class="icon-svg">
          <use xlink:href="/v2.7/assets/images/icons/sprite.svg#chevron-down" />
        </svg>
      </label>
      <ul>
        <!-- active link class -->
        <li><a href="#" class="pf-accordion-menu--active">Link #1</a></li>
        <li><a href="#">Link #2</a></li>
        <li><a href="#">Link #3</a></li>
      </ul>
    </li>
    <li>
      <input id="menu3a" type="checkbox">
      <a href="#">
        <svg class="icon-svg">
          <use xlink:href="/v2.7/assets/images/icons/sprite.svg#search" />
        </svg>
        Search
      </a>
      <label for="menu3a" class="pf-accordion-menu__fakecheck">
        <svg class="icon-svg">
          <use xlink:href="/v2.7/assets/images/icons/sprite.svg#chevron-down" />
        </svg>
      </label>
      <ul>
        <li><a href="#">Link #1</a></li>
      </ul>
    </li>
    <li>
      <input id="menu4a" type="checkbox">
      <label for="menu4a">
        <svg class="icon-svg">
          <use xlink:href="/v2.7/assets/images/icons/sprite.svg#banking" />
        </svg>
        Banking details
      </label>
      <label for="menu4a" class="pf-accordion-menu__fakecheck">
        <svg class="icon-svg">
          <use xlink:href="/v2.7/assets/images/icons/sprite.svg#chevron-down" />
        </svg>
      </label>
      <ul>
        <li><a href="#">Link #1</a></li>
      </ul>
    </li>
  </ul>
</nav>

Dependencies

• src/styles/components/blocks/_pf-accordion-menu.scss

Usage