<div class="hg:p-4 hg:pb-40">
  <h3 class="hg:mb-1 hg:text-gray">First link current</h3>

  {{
    include(
      'mercury:dropdown-menu',
      {
        items: storybook.first_current
      }
    )
  }}

  <h3 class="hg:my-3 hg:text-gray">Second link current</h3>

  {{
    include(
      'mercury:dropdown-menu',
      {
        items: storybook.second_current
      }
    )
  }}

  <h3 class="hg:mt-3 hg:text-gray">Third link current</h3>
  <p class="hg:mb-3 hg:text-gray">
    Impossible for a nolink to be current; should look like nothing is current.
  </p>

  {{
    include(
      'mercury:dropdown-menu',
      {
        items: storybook.third_current
      }
    )
  }}

  <h3 class="hg:mt-3 hg:text-gray">Inner link current</h3>
  <p class="hg:mb-3 hg:text-gray">
    Inside the second link's dropdown.
  </p>

  {{
    include(
      'mercury:dropdown-menu',
      {
        items: storybook.inner_current
      }
    )
  }}
</div>
