AFW Pattern Lab

Site Menu 

<div class="site-menu">
    <div class="site-menu__inner">

        <a class="a-btn site-menu__hamburger" aria-label="Elit et Exercitation">
            <span class="a-btn__bar"></span>
            <span class="a-btn__bar"></span>
            <span class="a-btn__bar"></span>
        </a>

        <nav class="site-menu__list">
            <a class="site-menu__link" href="#">Shop By Category</a>
            <a class="site-menu__link" href="#">Room Planner</a>
            <a class="site-menu__link" href="#">Deals</a>
        </nav>
    </div>
</div>
 
<div class="site-menu">
    <div class="site-menu__inner">
        {% render '@button--bars', hamburger, true %}
        <nav class="site-menu__list">
            {% for link in links -%}
            <a class="site-menu__link" href="{{link.href}}">{{link.text}}</a>
            {% endfor -%}
        </nav>
    </div>
</div>
 
{
  "hamburger": {
    "modifierClasses": "site-menu__hamburger"
  },
  "links": [
    {
      "href": "#",
      "text": "Shop By Category"
    },
    {
      "href": "#",
      "text": "Room Planner"
    },
    {
      "href": "#",
      "text": "Deals"
    }
  ]
}
  • Content: 
    .site-menu {
    $this: &;

    margin-inline: rem(15px);
    padding-inline: rem(12px);

    &__inner {
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
    }

    &__hamburger {
        @include media-lg-up {
            display: none;
        }
    }

    &__list {
        display: none;

        @include media-lg-up {
            display: flex;
        }
    }

    &__link {
        color: $color-primary-text;
        display: block;
        font-size: rem(15px);
        font-weight: 600;
        padding: rem(11.2);
        text-decoration: none;
    }
}
  • URL: /components/raw/site-menu/site-menu.scss
  • Filesystem Path: source/patterns/molecules/site-menu/site-menu.scss
  • Size: 611 Bytes

No notes defined.