FTSE Russell Styleguide

Sub Menu 

<nav class="nav__sub-menu text--center" aria-label="Sub Menu">
    <h2 class="visuallyhidden">Sub Menu</h2>
    <div class="mobile-bar">
        <svg class="icon">
      <use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
    </svg>
    </div>
    <ul class="nav navbar__sub-menu" role="menubar" aria-hidden="false">

        <li class="navbar__sub-menu__item" role="menuitem">
            <a class="navbar__sub-menu__item__link active" href="#">Our Story</a>
        </li>

        <li class="navbar__sub-menu__item" role="menuitem">
            <a class="navbar__sub-menu__item__link" href="#">Our Clients</a>
        </li>

        <li class="navbar__sub-menu__item" role="menuitem">
            <a class="navbar__sub-menu__item__link" href="#">Corporate Responsibility</a>
        </li>

        <li class="navbar__sub-menu__item" role="menuitem">
            <a class="navbar__sub-menu__item__link" href="#">Index Industry Association (IIA)</a>
        </li>

        <li class="navbar__sub-menu__item" role="menuitem">
            <a class="navbar__sub-menu__item__link" href="#">Press Releases</a>
        </li>

        <li class="navbar__sub-menu__item" role="menuitem">
            <a class="navbar__sub-menu__item__link" href="#">Careers</a>
        </li>

    </ul>
</nav>
 
<nav class="nav__sub-menu text--center" aria-label="Sub Menu">
  <h2 class="visuallyhidden">Sub Menu</h2>
  <div class="mobile-bar">
    <svg class="icon">
      <use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
    </svg>
  </div>
  <ul class="nav navbar__sub-menu" role="menubar" aria-hidden="false">
    {% for item in menuItems %}
    <li class="navbar__sub-menu__item" role="menuitem">
      {% if item.external %}<span class="icon-expanded"></span> {% endif %}<a class="navbar__sub-menu__item__link{% if item.active %} active{% endif %}" href="#">{{ item.title }}</a>
    </li>
    {% endfor %}
  </ul>
</nav>
 
{
  "menuItems": [
    {
      "title": "Our Story",
      "url": "#",
      "description": "Our Story",
      "enabled": true,
      "active": true
    },
    {
      "title": "Our Clients",
      "url": "#",
      "description": "Our Clients",
      "enabled": true
    },
    {
      "title": "Corporate Responsibility",
      "url": "#",
      "description": "Corporate Responsibility",
      "enabled": true
    },
    {
      "title": "Index Industry Association (IIA)",
      "url": "#",
      "description": "Index Industry Association (IIA)",
      "enabled": true
    },
    {
      "title": "Press Releases",
      "url": "#",
      "description": "Press Releases",
      "enabled": true
    },
    {
      "title": "Careers",
      "url": "#",
      "description": "Careers",
      "enabled": true
    }
  ]
}
  • Content: 
    .nav__sub-menu {
  background-color: $gray-dark;

  @include mq($breakpoint-lg) {
    padding: $space-xs 0;
  }

  &.opened {
    .mobile-bar .icon {
      transform: rotate(180deg);
      transition: $transition-base;
    }

    .navbar__sub-menu {
      display: grid;
      transition: $transition-base;
    }
  }
}

.mobile-bar {
  padding: $space-sm $space-lg;
  text-align: right;

  .icon {
    display: inline-block;
    fill: $white;
    height: $space-md;
    transition: $transition-base;
    vertical-align: middle;
    width: $space-md;
  }

  @include mq($breakpoint-lg) {
    display: none;
  }
}

.navbar__sub-menu {
  display: none;
  margin: 0;
  transition: $transition-base;

  @include mq($breakpoint-lg) {
    display: inline-flex;
  }

  &__item {
    padding: $space-xs $space-lg;

    &__link {
      color: $white;
      cursor: pointer;
      text-decoration: none;
      font-size: $space-sm;
      font-weight: $font-weight-light;
      line-height: $space-md;

      &.active,
      &:hover {
        color: $primary-lighter;
        text-decoration: underline;
      }
    }
  }
}
  • URL: /components/raw/sub-menu/_sub-menu.scss
  • Filesystem Path: src/components/molecules/navigation/sub-menu/_sub-menu.scss
  • Size: 1.1 KB

There are no notes for this item.