Subnavigation

<div
  style="max-width: 300px; padding: 40px; background-color: var(--color-neutral-50);"
>
  <div class="c-subnavigation">
    <div class="c-subnavigation__section">
      <a
        href="#"
        class="c-subnavigation__header"
      >
        <span class="c-subnavigation__toggle">
          <!-- SVG element -->
        </span>
        <h2 class="c-subnavigation__title">
          Periodic documents
        </h2>
      </a>
      <div class="c-subnavigation__list">
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Accountancy documents
        </a>
        <a
          href="#"
          class="c-subnavigation__item c-subnavigation__item--active"
        >
          Wage statement
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Dimona list
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Individual wage statement
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Invoices
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Net payment overview
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Net wages overview
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Grouped payment statements
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Wage slips
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Wage summary
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Transport performance sheets
        </a>
      </div>
    </div>
    <div
      class="c-subnavigation__section c-subnavigation__section--collapsed"
    >
      <a
        href="#"
        class="c-subnavigation__header"
      >
        <span class="c-subnavigation__toggle">
          <!-- SVG element -->
        </span>
        <h2 class="c-subnavigation__title">
          Quarterly closing
        </h2>
      </a>
      <div class="c-subnavigation__list">
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Accountancy summary
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          RSZ totals quarter
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Company cars
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          RVP Professional Journalists
        </a>
      </div>
    </div>
    <div
      class="c-subnavigation__section c-subnavigation__section--collapsed"
    >
      <a
        href="#"
        class="c-subnavigation__header"
      >
        <span class="c-subnavigation__toggle">
          <!-- SVG element -->
        </span>
        <h2 class="c-subnavigation__title">
          Miscellaneous
        </h2>
      </a>
      <div class="c-subnavigation__list">
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Sample archive
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Cost management list
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Cheques
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Construction - bad weather
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Construction - economic unemployment
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Wage declaration insurance AO
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Organisation info page
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Reminder
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Collection list
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Movable withholding tax statement
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Statistics/graph sheet
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Overview HRMSWeb Performances
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Individual accounts
        </a>
      </div>
    </div>
    <div
      class="c-subnavigation__section c-subnavigation__section--collapsed"
    >
      <a
        href="#"
        class="c-subnavigation__header"
      >
        <span class="c-subnavigation__toggle">
          <!-- SVG element -->
        </span>
        <h2 class="c-subnavigation__title">
          Payment requests
        </h2>
      </a>
      <div class="c-subnavigation__list">
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Payment agenda
        </a>
      </div>
    </div>
    <div
      class="c-subnavigation__section c-subnavigation__section--collapsed"
    >
      <a
        href="#"
        class="c-subnavigation__header"
      >
        <span class="c-subnavigation__toggle">
          <!-- SVG element -->
        </span>
        <h2 class="c-subnavigation__title">
          Year-end closing
        </h2>
      </a>
      <div class="c-subnavigation__list">
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Wage statement with balance sheet
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Wage statement
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Social report
        </a>
        <a
          href="#"
          class="c-subnavigation__item"
        >
          Social balance
        </a>
      </div>
    </div>
  </div>
</div>