Partystreusel

Main Nav 

<nav class="main-nav">
    <ul class="main-nav__list">
        <li>
            <a href="#" class="main-nav__link ">Nav Item 1</a>
        </li>
        <li>
            <a href="#" class="main-nav__link main-nav--active">Nav Item 2</a>
        </li>
        <li>
            <a href="#" class="main-nav__link ">Nav Item 3</a>
        </li>
        <li>
            <a href="#" class="main-nav__link ">Nav Item 4</a>
        </li>
        <li>
            <a href="#" class="main-nav__link ">Nav Item 5</a>
        </li>
    </ul>
</nav>
 
<nav class="main-nav">
  <ul class="main-nav__list">
    {{#each items}}
      <li>
        <a href="#" class="main-nav__link {{modifier}}">{{text}}</a>
      </li>
    {{/each}}
  </ul>
</nav>
 
{
  "items": [
    {
      "text": "Nav Item 1"
    },
    {
      "text": "Nav Item 2",
      "modifier": "main-nav--active"
    },
    {
      "text": "Nav Item 3"
    },
    {
      "text": "Nav Item 4"
    },
    {
      "text": "Nav Item 5"
    }
  ]
}
  • Content: 
    .main-nav {
  &__list {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
  }

  &__link {
    display: block;
    padding: rem(11) rem(18);
    color: $color__accent;
    font-size: rem(18);
    line-height: 1.33;

    &:hover,
    &:focus,
    &.main-nav--active {
      color: $color__bright;
      background-color: $color__brand--one;
    }
  }
}
  • URL: /components/raw/main-nav/_main-nav.scss
  • Filesystem Path: patterns/02-molecules/main-nav/_main-nav.scss
  • Size: 427 Bytes

Add class main-nav--active to the active <a>