Comment 1 for bug 2051641

I do have some ideas. Maybe we could collapse the type of release under a dropdown. Documented here:
https://vanillaframework.io/docs/patterns/navigation#dropdown

To achieve this we would need to upgrade the version of Vanilla used to the latest one. Which would involve changing the header of the site from:
<link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-1.8.1.min.css">
to
<link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-4.7.0.min.css">

This would result in the site looking like the attachment screenshot.

The code to replicate the attached screenshot:
```
<header id="navigation" class="p-navigation is-dark">
  <div class="p-navigation__row--25-75">
    <div class="p-navigation__banner">
      <div class="p-navigation__tagged-logo">
        <a class="p-navigation__link" href="#">
          <div class="p-navigation__logo-tag">
            <img class="p-navigation__logo-icon" src="https://assets.ubuntu.com/v1/82818827-CoF_white.svg" alt="">
          </div>
          <span class="p-navigation__logo-title">Ubuntu</span>
        </a>
      </div>
      <ul class="p-navigation__items">
        <li class="p-navigation__item">
          <button class="js-search-button p-navigation__link--search-toggle">
            <span class="p-navigation__search-label">Search</span>
          </button>
        </li>
        <li class="p-navigation__item">
          <button class="js-menu-button p-navigation__link">Menu</button>
        </li>
      </ul>
    </div>
    <nav class="p-navigation__nav" aria-label="Example main">
      <ul class="p-navigation__items">
        <nav class="p-navigation__nav" aria-label="Example main">
      <ul class="p-navigation__items">
        <li class="p-navigation__item">
          <button href="#" class="p-navigation__link">20.04 LTS</button>

        </li><li class="p-navigation__item">
          <button href="#" class="p-navigation__link">22.04 LTS</button>

        </li><li class="p-navigation__item">
          <button href="#" class="p-navigation__link">20.04 LTS</button>

        </li><li class="p-navigation__item">
          <button href="#" class="p-navigation__link">23.10</button>

        </li>
        <li class="p-navigation__item--dropdown-toggle is-active" id="link-3">
          <button href="#link-3-menu" aria-controls="link-3-menu" class="p-navigation__link">ESM-LTS</button>
          <ul class="p-navigation__dropdown" id="link-3-menu" aria-hidden="false">
            <li>
              <a href="#" class="p-navigation__dropdown-item">##.## LTS</a>
            </li>
            <li>
              <a href="#" class="p-navigation__dropdown-item">##.## LTS</a>
            </li>
            <li>
              <a href="#" class="p-navigation__dropdown-item">##.## LTS</a>
            </li>
          </ul>
        </li>
      </ul>
      </nav></ul>
      <ul class="p-navigation__items">
        <li class="p-navigation__item">
          <button class="js-search-button p-navigation__link--search-toggle">
            <span class="p-navigation__search-label">Search</span>
          </button>
        </li>
      </ul>
      <div class="p-navigation__search">
        <form class="p-search-box">
          <input type="search" class="p-search-box__input" name="q" placeholder="Search our sites" required="" aria-label="Search our sites">
          <button type="reset" class="p-search-box__reset"><i class="p-icon--close"></i></button>
          <button type="submit" class="p-search-box__button"><i class="p-icon--search"></i></button>
        </form>
      </div>
    </nav>
  </div>
  <div class="p-navigation__search-overlay"></div>
</header>
```