FTSE Russell Styleguide

Section Menu 

<nav role="navigation" class="side-navigation-container">
    <h2 class="visuallyhidden">SubNavigation</h2>
    <ul class="side-menu">

        <li class="side-menu__item">
            <a class="side-menu__link   side-menu__link_active " href="#">
                    
                        <svg class="side-menu__icon">
                            <use xlink:href="/assets/sprites/icons.svg#ico-correct"></use>
                        </svg>
                    
                    Menu item title
                    <span class="side-menu__subtitle">subtitle for item</span>
                    <svg class="arrow-menu__icon">
                        <use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
                    </svg>
                </a>
        </li>

        <li class="side-menu__item">
            <a class="side-menu__link  " href="#">
                    
                        <svg class="side-menu__icon">
                            <use xlink:href="/assets/sprites/icons.svg#ico-left-alignment"></use>
                        </svg>
                    
                    Menu item title
                    <span class="side-menu__subtitle">subtitle for item</span>
                    <svg class="arrow-menu__icon">
                        <use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
                    </svg>
                </a>
        </li>

        <li class="side-menu__item">
            <a class="side-menu__link  " href="#">
                    
                        <svg class="side-menu__icon">
                            <use xlink:href="/assets/sprites/icons.svg#ico-left-alignment"></use>
                        </svg>
                    
                    Menu item title
                    <span class="side-menu__subtitle">subtitle for item</span>
                    <svg class="arrow-menu__icon">
                        <use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
                    </svg>
                </a>
        </li>

        <li class="side-menu__item">
            <a class="side-menu__link  " href="#">
                    
                        <svg class="side-menu__icon">
                            <use xlink:href="/assets/sprites/icons.svg#ico-left-alignment"></use>
                        </svg>
                    
                    Menu item title
                    <span class="side-menu__subtitle">subtitle for item</span>
                    <svg class="arrow-menu__icon">
                        <use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
                    </svg>
                </a>
        </li>

        <li class="side-menu__item">
            <a class="side-menu__link  " href="#">
                    
                        <svg class="side-menu__icon">
                            <use xlink:href="/assets/sprites/icons.svg#ico-left-alignment"></use>
                        </svg>
                    
                    Menu item title
                    <span class="side-menu__subtitle">subtitle for item</span>
                    <svg class="arrow-menu__icon">
                        <use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
                    </svg>
                </a>
        </li>

        <li class="side-menu__item">
            <a class="side-menu__link  " href="#">
                    
                        <svg class="side-menu__icon">
                            <use xlink:href="/assets/sprites/icons.svg#ico-left-alignment"></use>
                        </svg>
                    
                    Menu item title
                    <span class="side-menu__subtitle">subtitle for item</span>
                    <svg class="arrow-menu__icon">
                        <use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
                    </svg>
                </a>
        </li>

        <li class="side-menu__item">
            <a class="side-menu__link  " href="#">
                    
                        <svg class="side-menu__icon">
                            <use xlink:href="/assets/sprites/icons.svg#ico-left-alignment"></use>
                        </svg>
                    
                    Menu item title
                    <span class="side-menu__subtitle">subtitle for item</span>
                    <svg class="arrow-menu__icon">
                        <use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
                    </svg>
                </a>
        </li>

    </ul>
</nav>
 
<nav role="navigation" class="side-navigation-container">
    <h2 class="visuallyhidden">SubNavigation</h2>
    <ul class="side-menu">
        {% for item in menuItems %}
            <li class="side-menu__item">
                <a class="side-menu__link  {% if item.active %} side-menu__link_active {% endif %}" href="{{ item.url }}">
                    {% if item.active %}
                        <svg class="side-menu__icon">
                            <use xlink:href="/assets/sprites/icons.svg#ico-correct"></use>
                        </svg>
                    {% else %}
                        <svg class="side-menu__icon">
                            <use xlink:href="/assets/sprites/icons.svg#ico-left-alignment"></use>
                        </svg>
                    {% endif %}
                    {{ item.title }}
                    <span class="side-menu__subtitle">{{ item.subtitle }}</span>
                    <svg class="arrow-menu__icon">
                        <use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
                    </svg>
                </a>
            </li>
        {% endfor %}
    </ul>
</nav>
 
{
  "menuItems": [
    {
      "title": "Menu item title",
      "subtitle": "subtitle for item",
      "active": true,
      "url": "#"
    },
    {
      "title": "Menu item title",
      "subtitle": "subtitle for item",
      "url": "#"
    },
    {
      "title": "Menu item title",
      "subtitle": "subtitle for item",
      "url": "#"
    },
    {
      "title": "Menu item title",
      "subtitle": "subtitle for item",
      "url": "#"
    },
    {
      "title": "Menu item title",
      "subtitle": "subtitle for item",
      "url": "#"
    },
    {
      "title": "Menu item title",
      "subtitle": "subtitle for item",
      "url": "#"
    },
    {
      "title": "Menu item title",
      "subtitle": "subtitle for item",
      "url": "#"
    }
  ]
}
  • Content: 
    .side-menu {
  &__item {
    border-bottom: 1px solid $gray-lighter;
    margin-bottom: 0;

    &:hover {
      border-left: 5px;

      .side-menu__icon {
        fill: $primary;
      }
    }
  }

  &__subtitle {
    display: none;
  }

  &__icon {
    fill: $gray-light;
    width: 20px;
    height: 20px;
    margin-right: 1rem;

    .side-menu__link_active & {
      fill: $primary;
    }
  }

  &__link {
    background-color: $white;
    border-left: 0 solid $primary;
    color: $gray;
    font-size: $font-size-base;
    padding: $space-xl $space-md;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    position: relative;

    &:hover,
    &_active {
      background-color: $gray-lighter;
      border-left: 5px solid $primary;
      color: $primary-dark;
    }
  }

  .arrow-menu__icon {
    fill: $primary;
    height: 8px;
    position: absolute;
    right: $space-md;
    top: calc(50% - 4px);
    transform: rotate(270deg);
    width: 12px;
  }
}

.side-navigation-container {
  @include mq-only($breakpoint-mob) {
    width: $sidebar-width-mob;
  }

  @include mq-only(320px) {
    width: 300px;
  }
}
  • URL: /components/raw/section-menu/_section-menu.scss
  • Filesystem Path: src/components/molecules/navigation/section-menu/_section-menu.scss
  • Size: 1.2 KB

There are no notes for this item.