<nav role="navigation" class="primary-nav" aria-label="Menu">
    <div class="primary-nav__inner">
        <ul class="primary-nav__menu">
            <li class="primary-nav__menu-item ">
                <a href="#" class="primary-nav__link">
                    <span class="primary-nav__menu-item-inner">
                        Why Swegon?
                    </span>
                </a>
            </li>
            <li class="primary-nav__menu-item ">
                <a href="#" class="primary-nav__link" aria-controls="references">
                    <span class="primary-nav__menu-item-inner">
                        References
                    </span>
                    <span class="primary-nav__icon">
                        <svg class="icon " focusable="false">
                            <use xlink:href="#icon-chevron-right"></use>
                        </svg>
                    </span>
                </a>
            </li>
            <li class="primary-nav__menu-item ">
                <a href="#" class="primary-nav__link">
                    <span class="primary-nav__menu-item-inner">
                        Guides
                    </span>
                </a>
            </li>
            <li class="primary-nav__menu-item ">
                <a href="#" class="primary-nav__link" aria-controls="products-and-services">
                    <span class="primary-nav__menu-item-inner">
                        Products &amp; Services
                    </span>
                    <span class="primary-nav__icon">
                        <svg class="icon " focusable="false">
                            <use xlink:href="#icon-chevron-right"></use>
                        </svg>
                    </span>
                </a>
            </li>
            <li class="primary-nav__menu-item ">
                <a href="#" class="primary-nav__link">
                    <span class="primary-nav__menu-item-inner">
                        Support
                    </span>
                </a>
            </li>
            <li class="primary-nav__menu-item ">
                <a href="#" class="primary-nav__link">
                    <span class="primary-nav__menu-item-inner">
                        About Swegon
                    </span>
                </a>
            </li>
            <li class="primary-nav__menu-item ">
                <a href="#" class="primary-nav__link" target="_blank">
                    <span class="primary-nav__menu-item-inner">
                        Blog
                    </span>
                </a>
            </li>
            <li class="primary-nav__menu-item ">
                <a href="#" class="primary-nav__link" target="_blank">
                    <span class="primary-nav__menu-item-inner">
                        Air Academy
                    </span>
                </a>
            </li>
            <li class="primary-nav__menu-item ">
                <a href="#" class="primary-nav__link">
                    <span class="primary-nav__menu-item-inner">
                        Our brands
                    </span>
                </a>
            </li>
        </ul>
    </div>
</nav>
<nav role="navigation" class="primary-nav" aria-label="Menu">
    <div class="primary-nav__inner">
        <ul class="primary-nav__menu">
            {{#each items}}
                <li class="primary-nav__menu-item {{ getmodifiers modifiers "primary-nav__menu-item"}}">
                    <a href="#" class="primary-nav__link" {{{getattributes attributes}}}>
                        <span class="primary-nav__menu-item-inner">
                            {{{ label }}}
                        </span>
                        {{#if icon}}
                        <span class="primary-nav__icon">
                            {{>@icon id=icon}}
                        </span>
                        {{/if}}
                    </a>
                </li>
            {{/each}}
        </ul>
    </div>
</nav>
{
  "items": [
    {
      "label": "Why Swegon?"
    },
    {
      "label": "References",
      "icon": "chevron-right",
      "attributes": {
        "aria-controls": "references"
      }
    },
    {
      "label": "Guides"
    },
    {
      "label": "Products &amp; Services",
      "icon": "chevron-right",
      "attributes": {
        "aria-controls": "products-and-services"
      }
    },
    {
      "label": "Support"
    },
    {
      "label": "About Swegon"
    },
    {
      "label": "Blog",
      "attributes": {
        "target": "_blank"
      }
    },
    {
      "label": "Air Academy",
      "attributes": {
        "target": "_blank"
      }
    },
    {
      "label": "Our brands"
    }
  ]
}
  • Content:
    .primary-nav {
        left: 0;
        width: 100%;
        background-color: $color-gray-1;
        z-index: $z-promoted;
    
        .header--small & {
            opacity: 0;
            transform: translateY(size(-1));
            transition: opacity .2s ease-out .1s, transform .3s ease-out;
        }
    
        .header--mobile-menu-open & {
            opacity: 1;
            transform: none;
        }
    
        .header--mobile-menu-open.header--subnav-open & {
            opacity: 0;
            transform: translateX(size(-5));
            visibility: hidden;
            position: absolute;
        }
    }
    
    .primary-nav__menu {
        list-style-type: none;
        margin: 0;
        padding: 0;
    
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    
        .header--small & {
            flex-direction: column;
            flex-wrap: wrap;
        }
    
        .header--medium &,
        .header--large & {
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
        }
    
        .header--medium &,
        .header--large & {
            .primary-nav__menu-item:first-child {
                padding-left: 0;
            }
    
            .primary-nav__menu-item:last-child {
                padding-right: 0;
            }
        }
    }
    
    .primary-nav__menu-item {
        .header--medium & {
            padding: 0 size(1);
        }
    
        .header--large & {
            padding: 0 size(2);
        }
    
        .header--small & {
            margin-bottom: size(1.5);
        }
    }
    
    .primary-nav__link {
        display: flex;
        position: relative;
        font-size: size(1.5);
        font-weight: $font-weight-bold;
        line-height: size(2);
        letter-spacing: 1px;
        text-transform: uppercase;
        white-space: nowrap;
        background-color: $color-gray-1;
        color: $color-black;
    
        @include breakpoint($xxl) {
            font-size: size(1.75);
    
        }
    
        .header--medium & {
            font-size: size(1.5);
        }
    
        .header--small & {
            padding-right: size(3);
        }
    
        &:hover {
            text-decoration: none;
    
            .primary-nav__menu-item-inner {
                text-decoration: none;
    
                &:after {
                    opacity: 1;
                    background-color: $color-green-dark;
    
                    @include color-theme {
                        background-color: $arg-theme-color;
                    }
                }
            }
        }
    }
    
    .primary-nav__menu-item-inner {
        position: relative;
        padding: size(1) 0;
    
        &:after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            display: block;
            opacity: 0;
            width: 100%;
            height: 4px;
        }
    
        .primary-nav__menu-item--active & {
            color: $color-green-dark;
    
            @include color-theme {
                color: $arg-theme-color;
            }
    
            &:after {
                opacity: 1;
                background-color: $color-green-dark;
    
                @include color-theme {
                    background-color: $arg-theme-color;
                }
            }
        }
    }
    
    .primary-nav__icon {
        display: none;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(calc(-50% - #{size(0.5)}));
        width: size(2);
        height: size(2);
    
        .icon {
            width: 100%;
            height: 100%;
            fill: $color-green-dark;
    
            @include color-theme {
                fill: $arg-theme-color;
            }
        }
    
        .header--small & {
            display: block;
        }
    }
  • URL: /components/raw/primary-nav/primary-nav.scss
  • Filesystem Path: src/chrome/primary-nav/primary-nav.scss
  • Size: 3.3 KB

No notes defined.