FTSE Russell Styleguide

Top Menu 

<div class="top-menu">
    <nav class="nav navbar__top-menu text--right" aria-label="Top Menu">
        <h2 class="visuallyhidden">Top Menu</h2>
        <ul class="navbar__top-menu__links" role="menubar" aria-hidden="false">

            <li class="navbar__top-menu__item" role="menuitem">
                <a class="navbar__top-menu__item__link" href="#">About FTSE Russell</a>
            </li>

            <li class="navbar__top-menu__item" role="menuitem">
                <a class="navbar__top-menu__item__link" href="#">Support Portal</a>
            </li>

            <li class="navbar__top-menu__item" role="menuitem">
                <a class="navbar__top-menu__item__link" href="#">Client Login</a>
            </li>

        </ul>
    </nav>
    <nav role="navigation" class="language-switcher">
        <h2 class="visuallyhidden">Language</h2>
        <ul class="dropdown-menu" role="listbox" aria-hidden="false">

            <li class="lang active">
                <a title="Active Language English" tabindex="" href="#">English<i class='icon icon-caret'> <svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-caret"></use></svg></i></a>
            </li>

        </ul>
        <div class="lang-switcher__popup">
            <ul class="languages-list">

                <li class="lang active"><i class='icon icon-check'> <svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-check"></use></svg></i> English</li>

                <li class="lang"><a href="#" title="Language Français">Français</a></li>

                <li class="lang"><a href="#" title="Language Deutsche">Deutsche</a></li>

                <li class="lang"><a href="#" title="Language 日本語">日本語</a></li>

                <li class="lang"><a href="#" title="Language 中文">中文</a></li>

                <li class="lang"><a href="#" title="Language Español">Español</a></li>

            </ul>
        </div>
    </nav>
</div>
 
<div class="top-menu">
  <nav class="nav navbar__top-menu text--right" aria-label="Top Menu">
    <h2 class="visuallyhidden">Top Menu</h2>
    <ul class="navbar__top-menu__links" role="menubar" aria-hidden="false">
      {% for item in menuItems %}
      <li class="navbar__top-menu__item" role="menuitem">
        {% if item.external %}<span class="icon-expanded"></span> {% endif %}<a class="navbar__top-menu__item__link" href="#">{{ item.title }}</a>
      </li>
       {% endfor %}
    </ul>
  </nav>
  {% render '@language-switcher', language_switcher %}
  </div>
 
{
  "menuItems": [
    {
      "title": "About FTSE Russell",
      "url": "#",
      "description": "About FTSE Russell",
      "enabled": true
    },
    {
      "title": "Support Portal",
      "url": "#",
      "description": "Support Portal",
      "enabled": true
    },
    {
      "title": "Client Login",
      "url": "#",
      "description": "Client Login",
      "enabled": true
    }
  ],
  "language_switcher": {
    "menuItems": [
      {
        "title": "English",
        "url": "#",
        "description": "English",
        "active": true
      },
      {
        "title": "Français",
        "url": "#",
        "description": "Français",
        "active": null
      },
      {
        "title": "Deutsche",
        "url": "#",
        "description": "Deutsche",
        "active": null
      },
      {
        "title": "日本語",
        "url": "#",
        "description": "Japanese",
        "active": null
      },
      {
        "title": "中文",
        "url": "#",
        "description": "Chinese",
        "active": null
      },
      {
        "title": "Español",
        "url": "#",
        "description": "Español",
        "active": null
      }
    ]
  }
}
  • Content: 
    .top-menu {
    display: flex;
    justify-content: flex-end;
}

.navbar__top-menu__links {
    display: inline-flex;
    margin: 0;

    .caret {
        @include caret(bottom, 5px, $gray);
        content: '';
        display: inline-block;
        margin-left: $space-sm;
    }
}

.navbar__top-menu__item {
    padding: $space-xs $space-lg;

    &__link {
        color: $gray;
        text-decoration: none;
        font-size: $font-size-sm;
        font-weight: $font-weight-normal;
        line-height: $space-md;

        &:hover {
            color: $primary;
        }
    }
}
  • URL: /components/raw/top-menu/_top-menu.scss
  • Filesystem Path: src/components/molecules/navigation/top-menu/_top-menu.scss
  • Size: 585 Bytes

There are no notes for this item.