Pattern Library

<nav-dropdown>
  <nav aria-labelledby="button-nav-dropdown-fibre">
    <button
      id="button-nav-dropdown-fibre"
      data-scheme="stripped"
      aria-controls="fibre-options"
      aria-expanded="false">
      Fibre
    </button>
    <ul id="fibre-options" hidden>
      <li><a href="#/fibre/vanilla">Vanilla gigabit fibre</a></li>
      <li><a href="#/fibre/octotel">Octotel fibre</a></li>
      <li><a href="#/fibre/openserve">Openserve fibre</a></li>
      <li><a href="#/fibre/lightspeed">Lightspeed fibre</a></li>
    </ul>
  </nav>
</nav-dropdown>

Pattern scope:

Molecule – A combination of disparate Atoms

Design source:

Figma

Relevant assets:

Stylesheets:

• Shared stylesheets [See index.css]
• /css/patterns/dropdown.css

• Hover dropdown 

  An alternative dropdown that uses hover events to open/close

  Example

  Open type in a new window

  Code sample

  <nav-hover-dropdown>
    <nav aria-labelledby="link-nav-hover-dropdown-fibre">
      <a
        href="#/fibre"
        id="link-nav-hover-dropdown-fibre">
        Fibre
      </a>
      <ul id="fibre-options" hidden>
        <li><a href="#/fibre/vanilla">Vanilla gigabit fibre</a></li>
        <li><a href="#/fibre/octotel">Octotel fibre</a></li>
        <li><a href="#/fibre/openserve">Openserve fibre</a></li>
        <li><a href="#/fibre/lightspeed">Lightspeed fibre</a></li>
      </ul>
    </nav>
  </nav-hover-dropdown>

  Notes

  This pattern is not recommended, as it doesn't cater for keyboard nor touch-screen users.