eleventy-mainroad/_includes/components/nav-bar.webc

<style webc:scoped>
  ol,
  ul {
    padding: 0;
    margin: 0;
  }
  
  /* Main menu */
  .no-js .menu__btn {
    display: none;
  }

  .menu__btn {
    display: block;
    width: 100%;
    padding: 0;
    font: inherit;
    color: #fff;
    background: #2a2a2a;
    border: 0;
    outline: 0;
  }

  .menu__btn-title {
    position: relative;
    display: block;
    padding: 10px 15px;
    padding: .625rem .9375rem;
    font-weight: 700;
    text-align: right;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
  }

  :focus>.menu__btn-title {
    box-shadow: inset 0 0 1px 3px #e22d30;
  }

  button:not(:-moz-focusring):focus>.menu__btn-title {
    box-shadow: none;
  }

  .menu__btn:focus,
  .menu__btn-title:focus {
    outline: 0;
  }

  .js .menu__btn--active {
    color: #e22d30;
  }

  .menu__list {
    list-style: none;
    background: #2a2a2a;
  }

  .menu__item:hover {
    background: #e22d30;
  }

  .menu__item:first-child {
    border: 0;
  }

  .menu__item--active {
    background: #e22d30;
  }

  .menu__link {
    display: block;
    padding: 10px 15px;
    padding: .625rem .9375rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
  }

  .menu__link:hover {
    color: #fff;
  }

  .js .menu__list {
    position: absolute;
    z-index: 1;
    width: 100%;
    visibility: hidden;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
  }

  .js .menu__list--active {
    visibility: visible;
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }

  .menu__list--transition {
    transition: visibility .15s ease, transform .15s ease, -webkit-transform .15s ease;
  }

  @media screen and (min-width: 767px) {
    .menu {
      border-bottom: 5px solid #e22d30;
    }

    .menu__btn {
      display: none;
    }

    .menu__list,
    .js .menu__list {
      position: relative;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      visibility: visible;
      border: 0;
      -webkit-transform: none;
      transform: none;
    }

    .menu__item {
      border-left: 1px solid rgba(255, 255, 255, .1);
    }
  }

</style>

<nav class="menu">
  <ul class="menu__list">
    <li class="menu__item">
      <a class="menu__link" href="/docs/getting-started/">

        <span class="menu__text">Getting started</span>

      </a>
    </li>
    <li class="menu__item">
      <a class="menu__link" href="/docs/customization/">

        <span class="menu__text">Customization</span>

      </a>
    </li>
    <li class="menu__item">
      <a class="menu__link" href="/docs/faq/">

        <span class="menu__text">FAQ</span>

      </a>
    </li>
    <li class="menu__item">
      <a class="menu__link" href="/post/basic-elements/">

        <span class="menu__text">Basic Elements</span>

      </a>
    </li>
    <li class="menu__item">
      <a class="menu__link" href="/about/">

        <span class="menu__text">About</span>

      </a>
    </li>
  </ul>
</nav>