Swegon Component Library

Secondary Nav 

<nav role="navigation" class="secondary-nav" aria-label="Menu">
    <ul class="secondary-nav__menu">
        <li class="secondary-nav__menu-item">
            <a class="secondary-nav__link   " href="#">
                <svg class="icon secondary-nav__icon" focusable="false">
                    <use xlink:href="#icon-documents-small"></use>
                </svg>
                Sök dokument
            </a>
        </li>
        <li class="secondary-nav__menu-item">
            <button class="secondary-nav__link   " aria-controls="market-selector">
                <svg class="icon secondary-nav__icon" focusable="false">
                    <use xlink:href="#icon-globe"></use>
                </svg>
                Sverige
            </button>
        </li>
        <li class="secondary-nav__menu-item">
            <a class="secondary-nav__link  secondary-nav__link--button " href="#">
                Kontakt
            </a>
        </li>
    </ul>
</nav>
 
<nav role="navigation" class="secondary-nav" aria-label="Menu">
    <ul class="secondary-nav__menu">
        {{#each items}}
            <li class="secondary-nav__menu-item">
                <{{getelement tag "a"}} class="secondary-nav__link  {{ getmodifiers modifiers "secondary-nav__link"}} {{additionalClasses}}" {{{getattributes attributes}}}>
                    {{#if icon}}
                        {{> @icon id=icon additionalClasses="secondary-nav__icon"}}
                    {{/if}}
                    {{{ label }}}
                </{{getelement tag "a"}}>
            </li>
        {{/each}}
    </ul>
</nav>
 
{
  "items": [
    {
      "label": "Sök dokument",
      "icon": "documents-small",
      "attributes": {
        "href": "#"
      }
    },
    {
      "label": "Sverige",
      "icon": "globe",
      "tag": "button",
      "attributes": {
        "aria-controls": "market-selector"
      }
    },
    {
      "label": "Kontakt",
      "modifiers": [
        "button"
      ],
      "attributes": {
        "href": "#"
      }
    }
  ]
}
  • Content: 
    .secondary-nav__menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;

    .secondary-nav__menu-item:not(:last-child) {
        margin-right: size(3);
    }

    .secondary-nav__link__divider {
        margin-left: 13px;
    }

    .secondary-nav__link__divider:before {
        content: "|";
        margin-left: -19px;
        color: #D1D2D2;
        font-size: 8px;
        vertical-align: middle;
        font-weight: 400;
        position: fixed;
    }

    .header--small & {
        margin-right: 0;
        flex-direction: column;
        align-items: initial;
        margin-right: 0;

        .secondary-nav__menu-item:not(:last-child) {
            margin-bottom: size(2);
        }
    }

    .header--subnav-animate & {
        transition: opacity .2s ease-out .1s, transform .2s ease-out .1s;
        opacity: 1;
        transform: none;
    }

    .header--subnav-animate-left &,
    .header--subnav-animate-right & {
        opacity: 0;
        transform: translateX(size(3));
    }

    .header--subnav-animate-right & {
        transform: translateX(size(-3));
    }
}

.secondary-nav__item {
    display: block;
    width: 100%;
}

.secondary-nav__icon {
    width: size(3);
    height: size(3);
    fill: $color-gray-4;
    margin-bottom: -7px;
}

.secondary-nav__link {
    font-size: size(1.75);
    font-weight: $font-weight-bold;
    color: $color-gray-4;
    line-height: size(3.25);
    cursor: pointer;
    outline: none;

    &:hover {
        text-decoration: underline;
    }

    .header--small & {
        font-size: size(1.75);
    }

    &--button {
        @extend .button--ghost;
        font-size: size(1.5);
        padding: size(.5) size(3);
        display: block;
        text-align: center;

        &:hover {
            text-decoration: none;
        }

        .header--small & {
            width: 100%;
            font-size: size(1.75);
            padding: size(2) size(6);
        }
    }
}
  • URL: /components/raw/secondary-nav/secondary-nav.scss
  • Filesystem Path: src/chrome/secondary-nav/secondary-nav.scss
  • Size: 2 KB

No notes defined.