Hamburger – Design Portal

Demo

<button class="hamburger" type="button" aria-label="Show Menu"><span class="hamburger__span"></span></button>

.hamburger {
  @extend %button-reset;
  @include display-flex(center, null, null, null, center);
  grid-area: hamburger;
  position: relative;
  block-size: var(--hamburger-width);
  transition: all 0.15s;
  inline-size: var(--hamburger-width);
  z-index: 2;

  &__span,
  &__span:before,
  &__span:after {
    background-color: var(--icon-color);
    block-size: 0.1875rem;
    border-radius: 0.625rem;
    inline-size: 1.710625rem;
    inset-inline-start: 0;
    position: absolute;
    transition: all 0.15s ease-in-out;
    z-index: 0;
  }

  &__span {
    &:before,
    &:after {
      content: "";
    }

    &:before {
      inline-size: 1.463125rem;
      transform: translateY(-0.475rem);
    }

    &:after {
      inline-size: 1.094375rem;
      transform: translateY(0.475rem);
    }
  }

  &--active {
    .hamburger__span {
      transform: translateX(-3.125rem);
      background: transparent;

      &:before {
        transform: rotate(45deg) translate(2.1875rem, -2.1875rem);
        inline-size: 1.710625rem;
      }

      &:after {
        transform: rotate(-45deg) translate(2.1875rem, 2.1875rem);
        inline-size: 1.710625rem;
      }
    }
  }

  &:hover,
  &:focus {
    opacity: 0.7;
  }
}

const hamburger = document.querySelectorAll('.hamburger');

// Toggle hamburger(s)
function toggleHamburger() {
  hamburger.forEach((element) => {
    element.classList.toggle('hamburger--active');
    if (element.classList.contains('hamburger--active')) {
      element.setAttribute('aria-label', 'Hide Menu');
    } else {
      element.setAttribute('aria-label', 'Show Menu');
    }
  });
}

States & Variations

Active

When the hamburger is clicked/active, the icon will change to the close icon, and the popout menu will toggle.

<button class="hamburger hamburger--active" type="button" aria-label="Show Menu"><span class="hamburger__span"></span></button>