Menus

Quick links

This component should only be used in the right column.

Basic menu

This is a basic quick links menu, intended to only be used within a quick links widget.

<nav class="c-quick-links__menu" aria-label="Quicklinks">
  <!-- c-quick-links-menu basic -->
  <ul class="c-quick-links__menu-list">
    <li class="c-quick-links__menu-item"><a href="#0" class="c-quick-links__menu-link">#menu option</a></li>
    <li class="c-quick-links__menu-item"><a href="#0" class="c-quick-links__menu-link">#menu option</a></li>
    <li class="c-quick-links__menu-item"><a href="#0" class="c-quick-links__menu-link">#menu option</a></li>
    <li class="c-quick-links__menu-item"><a href="#0" class="c-quick-links__menu-link">#menu option</a></li>
    <li class="c-quick-links__menu-item"><a href="#0" class="c-quick-links__menu-link">#menu option</a></li>
  </ul>
  <!-- /c-quick-links-menu basic -->
</nav>

Collapse menu

The collapse menu option is intended to only be used within a quick links collapse widget. It allows the user to create parent menus that expand and collapse to show a list of links when clicked on.

JavaScript class: .js-quick-links__collapse-item

<nav class="c-quick-links__menu" aria-label="Quicklinks">
  <!-- c-quick-links-collapse -->
  <ul class="c-quick-links__collapse">
    <li class="c-quick-links__collapse-item js-quick-links__collapse-item is-active">
      <a href="#0" class="c-quick-links__collapse-link js-quick-links__collapse-link">#menu</a>
      <div class="c-quick-links__collapse-content">
        <!-- c-quick-links-menu basic -->
        <ul class="c-quick-links__menu-list js-quick-links__menu-list">
          <li class="c-quick-links__menu-item"><a href="#0" class="c-quick-links__menu-link">#menu option</a></li>
          <li class="c-quick-links__menu-item"><a href="#0" class="c-quick-links__menu-link">#menu option</a></li>
          <li class="c-quick-links__menu-item"><a href="#0" class="c-quick-links__menu-link">#menu option</a></li>
          <li class="c-quick-links__menu-item"><a href="#0" class="c-quick-links__menu-link">#menu option</a></li>
          <li class="c-quick-links__menu-item"><a href="#0" class="c-quick-links__menu-link">#menu option</a></li>
        </ul>
        <!-- /c-quick-links-menu basic -->
      </div>
    </li>
    <li class="c-quick-links__collapse-item js-quick-links__collapse-item">
      <a href="#0" class="c-quick-links__collapse-link js-quick-links__collapse-link">#menu</a>
      <div class="c-quick-links__collapse-content">
        <!-- c-quick-links-menu basic -->
        <ul class="c-quick-links__menu-list js-quick-links__menu-list">
          <li class="c-quick-links__menu-item"><a href="#0" class="c-quick-links__menu-link">#menu option</a></li>
          <li class="c-quick-links__menu-item"><a href="#0" class="c-quick-links__menu-link">#menu option</a></li>
          <li class="c-quick-links__menu-item"><a href="#0" class="c-quick-links__menu-link">#menu option</a></li>
          <li class="c-quick-links__menu-item"><a href="#0" class="c-quick-links__menu-link">#menu option</a></li>
          <li class="c-quick-links__menu-item"><a href="#0" class="c-quick-links__menu-link">#menu option</a></li>
        </ul>
        <!-- /c-quick-links-menu basic -->
      </div>
    </li>
    <li class="c-quick-links__collapse-item js-quick-links__collapse-item">
      <a href="#0" class="c-quick-links__collapse-link js-quick-links__collapse-link">#menu</a>
      <div class="c-quick-links__collapse-content">
        <!-- c-quick-links-menu basic -->
        <ul class="c-quick-links__menu-list js-quick-links__menu-list">
          <li class="c-quick-links__menu-item"><a href="#0" class="c-quick-links__menu-link">#menu option</a></li>
          <li class="c-quick-links__menu-item"><a href="#0" class="c-quick-links__menu-link">#menu option</a></li>
          <li class="c-quick-links__menu-item"><a href="#0" class="c-quick-links__menu-link">#menu option</a></li>
          <li class="c-quick-links__menu-item"><a href="#0" class="c-quick-links__menu-link">#menu option</a></li>
          <li class="c-quick-links__menu-item"><a href="#0" class="c-quick-links__menu-link">#menu option</a></li>
        </ul>
        <!-- /c-quick-links-menu basic -->
      </div>
    </li>
    <li class="c-quick-links__collapse-item js-quick-links__collapse-item">
      <a href="#0" class="c-quick-links__collapse-link js-quick-links__collapse-link">#menu</a>
      <div class="c-quick-links__collapse-content">
        <!-- c-quick-links-menu basic -->
        <ul class="c-quick-links__menu-list js-quick-links__menu-list">
          <li class="c-quick-links__menu-item"><a href="#0" class="c-quick-links__menu-link">#menu option</a></li>
          <li class="c-quick-links__menu-item"><a href="#0" class="c-quick-links__menu-link">#menu option</a></li>
          <li class="c-quick-links__menu-item"><a href="#0" class="c-quick-links__menu-link">#menu option</a></li>
          <li class="c-quick-links__menu-item"><a href="#0" class="c-quick-links__menu-link">#menu option</a></li>
          <li class="c-quick-links__menu-item"><a href="#0" class="c-quick-links__menu-link">#menu option</a></li>
        </ul>
        <!-- /c-quick-links-menu basic -->
      </div>
    </li>
  </ul>
  <!-- c-quick-links-collapse -->
</nav>