collapsible-nav

A <nav> shown horizontally on larger screens that collapses to a hamburger menu on smaller ones.

This is what it looks like without styling:

code

<collapsible-nav breakpoint="700">
  <nav>
    <ul>
      <a href="#one">
        <li>First page</li>
      </a>
      <a href="#two">
        <li>Second page</li>
      </a>
      <a href="#three">
        <li>Third page</li>
      </a>
      <a href="#four">
        <li>Fourth page</li>
      </a>
    </ul>
  </nav>
</collapsible-nav>

Styling

code

<style>
  collapsible-nav.styled summary {
    padding: 0.5em;
  }
  collapsible-nav.styled details[open] summary {
    border-bottom: none;
  }
  collapsible-nav.styled .icon {
    font-size: 1.5em;
  }
  collapsible-nav.styled ul {
    padding: 0.5em;
  }
  collapsible-nav.styled a {
    margin: 0.5em 0.5em;
  }
</style>
<collapsible-nav breakpoint="700" class="styled">
  <nav>
    <ul>
      <a href="#one">
        <li>First page</li>
      </a>
      <a href="#two">
        <li>Second page</li>
      </a>
      <a href="#three">
        <li>Third page</li>
      </a>
      <a href="#four">
        <li>Fourth page</li>
      </a>
    </ul>
  </nav>
</collapsible-nav>

Alignment

Set the alignment on large screens with the align property (defaults to left).

With align="right"

code

<collapsible-nav breakpoint="700" class="styled" align="right">
  <nav>
    <ul>
      <a href="#one">
        <li>First page</li>
      </a>
      <a href="#two">
        <li>Second page</li>
      </a>
      <a href="#three">
        <li>Third page</li>
      </a>
      <a href="#four">
        <li>Fourth page</li>
      </a>
    </ul>
  </nav>
</collapsible-nav>

With align="center"

code

<collapsible-nav breakpoint="700" class="styled" align="center">
  <nav>
    <ul>
      <a href="#one">
        <li>First page</li>
      </a>
      <a href="#two">
        <li>Second page</li>
      </a>
      <a href="#three">
        <li>Third page</li>
      </a>
      <a href="#four">
        <li>Fourth page</li>
      </a>
    </ul>
  </nav>
</collapsible-nav>

Breakpoint

The breakpoint property defines below which screen width (in pixels) the <nav> should be a hamburger menu. In the above examples we used breakpint="700".

With 3000 it should be a hamburger menu on most screens.

code

<collapsible-nav breakpoint="3000" class="styled">
  <nav>
    <ul>
      <a href="#one">
        <li>First page</li>
      </a>
      <a href="#two">
        <li>Second page</li>
      </a>
      <a href="#three">
        <li>Third page</li>
      </a>
      <a href="#four">
        <li>Fourth page</li>
      </a>
    </ul>
  </nav>
</collapsible-nav>

With 200 it should not. Even on mobile

code

<collapsible-nav breakpoint="200" class="styled">
  <nav>
    <ul>
      <a href="#one">
        <li>First</li>
      </a>
      <a href="#two">
        <li>Second</li>
      </a>
    </ul>
  </nav>
</collapsible-nav>