<nav role="navigation" data-breakpoint="my-md" id="site-navbar">
  <ul>
    <h2>{{ SITESUBTITLE }}</h2>
  </ul>
  <input type="checkbox" id="hamburger">
  <label id="hamburger-label" for="hamburger" aria-label="Menu" aria-controls="main-menu-items">
    &equiv;
  </label>
  <ul id="main-menu-items" role="list">
    {% for title, link in MENUITEMS %}
    {% if link == url %}
    <li aria-current="page" role="listitem">
      {% else %}
    <li role="listitem">
      {% endif %}
      <a href="{{ link }}">{{ title }}</a>
    </li>
    {% endfor %}
    <li role="listitem">
      <label id="sun-moon-label">
        <input id="sun-moon" name="color-mode-toggle" role="switch" type="checkbox" value="1"
          aria-label="Toggle Light or Dark Mode">
      </label>
    </li>
  </ul>
</nav>