V6 Clearleft Patterns

Primary Nav 

<nav class="PrimaryNav" aria-label="Primary">
    <ul class="PrimaryNav__list" role="list">
        <li class="PrimaryNav__listItem">
            <a href="#" class="PrimaryNav__link focus ">
                Case studies
            </a>
        </li>
        <li class="PrimaryNav__listItem">
            <a href="#" class="PrimaryNav__link focus ">
                Services
            </a>
        </li>
        <li class="PrimaryNav__listItem">
            <a href="#" class="PrimaryNav__link focus ">
                About
            </a>
        </li>
        <li class="PrimaryNav__listItem">
            <a href="#" class="PrimaryNav__link focus ">
                Posts
            </a>
        </li>
        <li class="PrimaryNav__listItem">
            <a href="#" class="PrimaryNav__link focus ">
                Events
            </a>
        </li>
        <li class="PrimaryNav__listItem">
            <a href="#" class="PrimaryNav__link focus ">
                Contact
            </a>
        </li>
    </ul>
</nav>
 
<nav class="PrimaryNav{{
  variant is defined and variant
    ? ' PrimaryNav--' ~ variant
  }}"
  aria-label="Primary">
  <ul class="PrimaryNav__list" role="list">
    {% for link in links %}
      <li class="PrimaryNav__listItem">
        <a href="{{ link.url }}"
          class="PrimaryNav__link focus {{
          link.url in match
            ? 'is-active'
            : ''
          }}">
          {{ link.title }}
        </a>
      </li>
    {% endfor %}
  </ul>
</nav>
 
{
  "links": [
    {
      "url": "#",
      "title": "Case studies"
    },
    {
      "url": "#",
      "title": "Services"
    },
    {
      "url": "#",
      "title": "About"
    },
    {
      "url": "#",
      "title": "Posts"
    },
    {
      "url": "#",
      "title": "Events"
    },
    {
      "url": "#",
      "title": "Contact"
    }
  ]
}
  • Content: 
    .PrimaryNav {
  &__list {
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
  }

  &__list > * {
    margin-right: 1.25rem;
    margin-left: 1.25rem;
  }

  /* hover effect */
  &__link {
    text-decoration: none;
    font-weight: 700;
    padding-bottom: 0.2rem;
    font-family: var(--font-heading);
    color: var(--dark);
    font-size: 15.2px; /* specific to header - not part of typography scale */
    position: relative;
    display: block;
    border-bottom: none;
    transition: color 0.1s var(--confident-ease);
    .theme--dark & {
      color: var(--white);
    }

    &::after {
      position: absolute;
      left: 0;
      right: 100%;
      height: 4px;
      bottom: -3px;
      content: '';
    }

    &:hover::after,
    &:active::after {
      left: 0;
      right: 0;
    }

    &:hover,
    &:active {
      color: var(--dark);
      transition: color 0.1s var(--confident-ease);
    }

    &:after {
      background-color: var(--green);
      transition-duration: 0s;
      transition: 0.2s var(--confident-ease);
      transform: translate3d(0, 0, 0);
    }

    &.is-active::after {
      background-color: var(--green);
      width: 100%;
    }

    .theme--dark & {
      color: var(--white);
    }
  }
}

.PrimaryNav--mobile {
  .PrimaryNav__list {
    flex-direction: column;
    height: 100%;
    text-align: right;
  }

  .PrimaryNav__list > * {
    margin-left: 0;
    margin-right: 0;
  }

  .PrimaryNav__list * + * {
    margin-top: var(--space-m);
  }

  .PrimaryNav__link {
    font-size: var(--step-1);

    &:after {
      content: none;
    }
  }
}

.PrimaryNav--mobile {
  .PrimaryNav__listItem {
    animation: fade-up 0.5s cubic-bezier(0.48, 0.43, 0.56, 0.82) both;
    animation-delay: 0.2s;

    &:nth-of-type(2) {
      animation-delay: 0.25s;
    }
    &:nth-of-type(3) {
      animation-delay: 0.3s;
    }
    &:nth-of-type(4) {
      animation-delay: 0.35s;
    }
    &:nth-of-type(5) {
      animation-delay: 0.4s;
    }
    &:nth-of-type(6) {
      animation-delay: 0.45s;
    }
    &:nth-of-type(7) {
      animation-delay: 0.5s;
    }
    &:nth-of-type(8) {
      animation-delay: 0.55s;
    }
    &:nth-of-type(9) {
      animation-delay: 0.6s;
    }
    &:nth-of-type(10) {
      animation-delay: 0.65s;
    }
  }
}
  • URL: /components/raw/primary-nav/primary-nav.css
  • Filesystem Path: src/templates/components/primary-nav/primary-nav.css
  • Size: 2.3 KB

No notes defined.