User menus with sub-menu dropdowns

<!-- START user_menu component -->
<nav class="user-menu-wrapper">
  <ul class="user-menu">
    <li class="menu__item menu__item--calendar menu__item--with-image-no-text">
      <a class="menu__link" href="../dashboard/dashboard.html">My calendar</a>
    </li>
    <li class="menu__item menu__item--notifications menu__item--with-image-no-text">
      <a class="menu__link" href="../dashboard/dashboard.html">My notifications</a>
    </li>
    <li class="menu__item menu__item--settings is-collapsible-toggle menu__item--with-image-no-text">
      <a class="menu__toggle menu__link" href="../nojs.html">My settings</a>
      <ul class="menu__sub-menu is-collapsible-content">
        <li class="menu__item">
          <a href="/dashboard" title="" class="menu__link">Change my password</a>
        </li>
        <li class="menu__item">
          <a href="/dashboard" title="" class="menu__link">Manage opt-ins (TEXT TO CHANGE)</a>
        </li>
        <li class="menu__item">
          <a href="/dashboard" title="" class="menu__link">Notification preferences (TEXT TO CHANGE)</a>
        </li>
        <li class="menu__item">
          <a href="/dashboard" title="" class="menu__link">Personalisation options (TEXT TO CHANGE)</a>
        </li>
      </ul>
    </li>
    <li class="menu__item menu__item--dashboard is-collapsible-toggle menu__item--with-image-no-text">
      <a class="menu__toggle menu__link" href="../nojs.html">My dashboard</a>
      <ul class="menu__sub-menu is-collapsible-content">
        <li class="menu__item">
          <a href="/dashboard" title="" class="menu__link">Course management</a>
        </li>
        <li class="menu__item">
          <a href="/dashboard" title="" class="menu__link">Provider management</a>
        </li>
        <li class="menu__item">
          <a href="/dashboard" title="" class="menu__link">User management</a>
        </li>
        <li class="menu__item">
          <a href="/dashboard" title="" class="menu__link">Application management</a>
        </li>
        <li class="menu__item">
          <a href="/dashboard" title="" class="menu__link">Reporting</a>
        </li>
        <li class="menu__item">
          <a href="/dashboard" title="" class="menu__link">Personal details</a>
        </li>
        <li class="menu__item">
          <a href="/dashboard" title="" class="menu__link">Education details</a>
        </li>
        <li class="menu__item">
          <a href="/dashboard" title="" class="menu__link">Contact details</a>
        </li>
        <li class="menu__item">
          <a href="/dashboard" title="" class="menu__link">Uploaded documents</a>
        </li>
        <li class="menu__item">
          <a href="/dashboard" title="" class="menu__link">Support section</a>
        </li>
        <li class="menu__item">
          <a href="/dashboard" title="" class="menu__link">Work/life experience</a>
        </li>
        <li class="menu__item">
          <a href="/dashboard" title="" class="menu__link">Referees</a>
        </li>
        <li class="menu__item">
          <a href="/dashboard" title="" class="menu__link">Personal statement</a>
        </li>
        <li class="menu__item">
          <a href="/dashboard" title="" class="menu__link">My applications</a>
        </li>
        <li class="menu__item">
          <a class="menu__link" href="/pages/pg-search/landing-logged-out.html">Sign out</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>
<!-- END user_menu component -->