Swegon Component Library

Subnav 

<div class="subnav " id="subnav-products-and-services" aria-hidden="false">
    <button class="subnav__button">
        <svg class="icon subnav__button-icon" focusable="false">
            <use xlink:href="#icon-chevron-left"></use>
        </svg>
        Main menu
    </button>
    <div class="subnav__header">
        <div class="subnav__title">Products and services</div>
        <a href="#" class="link link--small">
            <span class="link__label">Show all</span>
        </a>
    </div>
    <div class="subnav__content">
        <ul class="subnav__list">
            <li class="subnav__list-item">
                <a href="#" class="link link--icon link--dark link--small" aria-controls="subnav-air-handling">
                    <span class="link__label">Air Handling</span>
                    <svg class="icon link__icon" focusable="false">
                        <use xlink:href="#icon-chevron-right"></use>
                    </svg>
                </a>

                <div class="subnav subnav--submenu" id="subnav-air-handling" aria-hidden="">
                    <button class="subnav__button">
                        <svg class="icon subnav__button-icon" focusable="false">
                            <use xlink:href="#icon-chevron-left"></use>
                        </svg>
                        Products and services
                    </button>
                    <div class="subnav__header">
                        <div class="subnav__title">Air Handling</div>
                        <a href="#" class="link link--small">
                            <span class="link__label">Show all</span>
                        </a>
                    </div>
                    <div class="subnav__content">
                        <ul class="subnav__list">
                            <li class="subnav__list-item">
                                <a href="#" class="link link--dark link--small">
                                    <span class="link__label">Compact</span>
                                </a>

                            </li>
                            <li class="subnav__list-item">
                                <a href="#" class="link link--dark link--small">
                                    <span class="link__label">Gold</span>
                                </a>

                            </li>
                            <li class="subnav__list-item">
                                <a href="#" class="link link--dark link--small">
                                    <span class="link__label">Global</span>
                                </a>

                            </li>
                            <li class="subnav__list-item">
                                <a href="#" class="link link--dark link--small">
                                    <span class="link__label">Silver M</span>
                                </a>

                            </li>
                            <li class="subnav__list-item">
                                <a href="#" class="link link--dark link--small">
                                    <span class="link__label">Global FW</span>
                                </a>

                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="subnav__list-item">
                <a href="#" class="link link--icon link--dark link--small" aria-controls="subnav-room-units">
                    <span class="link__label">Room Units</span>
                    <svg class="icon link__icon" focusable="false">
                        <use xlink:href="#icon-chevron-right"></use>
                    </svg>
                </a>

                <div class="subnav " id="subnav-room-units" aria-hidden="">
                    <button class="subnav__button">
                        <svg class="icon subnav__button-icon" focusable="false">
                            <use xlink:href="#icon-chevron-left"></use>
                        </svg>
                        Products and services
                    </button>
                    <div class="subnav__header">
                        <div class="subnav__title">Room Units</div>
                        <a href="#" class="link link--small">
                            <span class="link__label">Show all</span>
                        </a>
                    </div>
                    <div class="subnav__content">
                        <ul class="subnav__list">
                            <li class="subnav__list-item">
                                <a href="#" class="link link--dark link--small">
                                    <span class="link__label">Waterbourne Climate</span>
                                </a>

                            </li>
                            <li class="subnav__list-item">
                                <a href="#" class="link link--dark link--small">
                                    <span class="link__label">Air Diffusers and Grilles</span>
                                </a>

                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="subnav__list-item">
                <a href="#" class="link link--dark link--small">
                    <span class="link__label">Air distribution</span>
                </a>

            </li>
            <li class="subnav__list-item">
                <a href="#" class="link link--icon link--dark link--small" aria-controls="subnav-cooling-and-heating">
                    <span class="link__label">Cooling &amp; Heating</span>
                    <svg class="icon link__icon" focusable="false">
                        <use xlink:href="#icon-chevron-right"></use>
                    </svg>
                </a>

                <div class="subnav subnav--submenu" id="subnav-cooling-and-heating" aria-hidden="">
                    <button class="subnav__button">
                        <svg class="icon subnav__button-icon" focusable="false">
                            <use xlink:href="#icon-chevron-left"></use>
                        </svg>
                        Products and services
                    </button>
                    <div class="subnav__header">
                        <div class="subnav__title">Cooling &amp; Heating</div>
                        <a href="#" class="link link--small">
                            <span class="link__label">Show all</span>
                        </a>
                    </div>
                    <div class="subnav__content">
                        <ul class="subnav__list">
                            <li class="subnav__list-item">
                                <a href="#" class="link link--dark link--small">
                                    <span class="link__label">Air-Cooled Chillers and Heat Pumps</span>
                                </a>

                            </li>
                            <li class="subnav__list-item">
                                <a href="#" class="link link--dark link--small">
                                    <span class="link__label">Water-cooled Chillers and Heat Pumps</span>
                                </a>

                            </li>
                            <li class="subnav__list-item">
                                <a href="#" class="link link--dark link--small">
                                    <span class="link__label">Air source multifunction</span>
                                </a>

                            </li>
                            <li class="subnav__list-item">
                                <a href="#" class="link link--dark link--small">
                                    <span class="link__label">IT Cooling</span>
                                </a>

                            </li>
                            <li class="subnav__list-item">
                                <a href="#" class="link link--dark link--small">
                                    <span class="link__label">Remote Source</span>
                                </a>

                            </li>
                            <li class="subnav__list-item">
                                <a href="#" class="link link--dark link--small">
                                    <span class="link__label">Water source multifunction</span>
                                </a>

                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="subnav__list-item">
                <a href="#" class="link link--dark link--small">
                    <span class="link__label">Louvres</span>
                </a>

            </li>
            <li class="subnav__list-item">
                <a href="#" class="link link--dark link--small">
                    <span class="link__label">Air Filtration</span>
                </a>

            </li>
            <li class="subnav__list-item">
                <a href="#" class="link link--dark link--small">
                    <span class="link__label">Optimisation systems</span>
                </a>

            </li>
            <li class="subnav__list-item">
                <a href="#" class="link link--dark link--small">
                    <span class="link__label">Connected services</span>
                </a>

            </li>
        </ul>
    </div>
</div>
 
<div class="subnav {{ getmodifiers modifiers "subnav"}}" id="{{id}}" aria-hidden="{{hidden}}">
    <button class="subnav__button">
        {{>@icon id="chevron-left" additionalClasses="subnav__button-icon" }}
        {{#if backButtonLabel}}{{backButtonLabel}}{{else}}Previous{{/if}}
    </button>
    <div class="subnav__header">
        <div class="subnav__title">{{title}}</div>
        {{>@link link }}
    </div>
    <div class="subnav__content">
        <ul class="subnav__list">
            {{#each items}}
            <li class="subnav__list-item">
                {{>@link link}}

                {{#if submenu}}
                    {{>@subnav submenu}}
                {{/if}}
            </li>
            {{/each}}
        </ul>
    </div>
</div>
 
{
  "id": "subnav-products-and-services",
  "hidden": false,
  "title": "Products and services",
  "backButtonLabel": "Main menu",
  "link": {
    "label": "Show all",
    "href": "#",
    "modifiers": "small"
  },
  "items": [
    {
      "link": {
        "label": "Air Handling",
        "href": "#",
        "icon": "chevron-right",
        "modifiers": [
          "dark",
          "small"
        ],
        "attributes": {
          "aria-controls": "subnav-air-handling"
        }
      },
      "submenu": {
        "id": "subnav-air-handling",
        "modifiers": [
          "submenu"
        ],
        "title": "Air Handling",
        "backButtonLabel": "Products and services",
        "link": {
          "label": "Show all",
          "href": "#",
          "modifiers": "small"
        },
        "items": [
          {
            "link": {
              "label": "Compact",
              "href": "#",
              "modifiers": [
                "dark",
                "small"
              ]
            }
          },
          {
            "link": {
              "label": "Gold",
              "href": "#",
              "modifiers": [
                "dark",
                "small"
              ]
            }
          },
          {
            "link": {
              "label": "Global",
              "href": "#",
              "modifiers": [
                "dark",
                "small"
              ]
            }
          },
          {
            "link": {
              "label": "Silver M",
              "href": "#",
              "modifiers": [
                "dark",
                "small"
              ]
            }
          },
          {
            "link": {
              "label": "Global FW",
              "href": "#",
              "modifiers": [
                "dark",
                "small"
              ]
            }
          }
        ]
      }
    },
    {
      "link": {
        "label": "Room Units",
        "href": "#",
        "icon": "chevron-right",
        "modifiers": [
          "dark",
          "small"
        ],
        "attributes": {
          "aria-controls": "subnav-room-units"
        }
      },
      "submenu": {
        "id": "subnav-room-units",
        "title": "Room Units",
        "backButtonLabel": "Products and services",
        "link": {
          "label": "Show all",
          "href": "#",
          "modifiers": "small"
        },
        "items": [
          {
            "link": {
              "label": "Waterbourne Climate",
              "href": "#",
              "modifiers": [
                "dark",
                "small"
              ]
            }
          },
          {
            "link": {
              "label": "Air Diffusers and Grilles",
              "href": "#",
              "modifiers": [
                "dark",
                "small"
              ]
            }
          }
        ]
      }
    },
    {
      "link": {
        "label": "Air distribution",
        "href": "#",
        "modifiers": [
          "dark",
          "small"
        ]
      }
    },
    {
      "link": {
        "label": "Cooling & Heating",
        "href": "#",
        "icon": "chevron-right",
        "modifiers": [
          "dark",
          "small"
        ],
        "attributes": {
          "aria-controls": "subnav-cooling-and-heating"
        }
      },
      "submenu": {
        "id": "subnav-cooling-and-heating",
        "modifiers": [
          "submenu"
        ],
        "title": "Cooling & Heating",
        "backButtonLabel": "Products and services",
        "link": {
          "label": "Show all",
          "href": "#",
          "modifiers": "small"
        },
        "items": [
          {
            "link": {
              "label": "Air-Cooled Chillers and Heat Pumps",
              "href": "#",
              "modifiers": [
                "dark",
                "small"
              ]
            }
          },
          {
            "link": {
              "label": "Water-cooled Chillers and Heat Pumps",
              "href": "#",
              "modifiers": [
                "dark",
                "small"
              ]
            }
          },
          {
            "link": {
              "label": "Air source multifunction",
              "href": "#",
              "modifiers": [
                "dark",
                "small"
              ]
            }
          },
          {
            "link": {
              "label": "IT Cooling",
              "href": "#",
              "modifiers": [
                "dark",
                "small"
              ]
            }
          },
          {
            "link": {
              "label": "Remote Source",
              "href": "#",
              "modifiers": [
                "dark",
                "small"
              ]
            }
          },
          {
            "link": {
              "label": "Water source multifunction",
              "href": "#",
              "modifiers": [
                "dark",
                "small"
              ]
            }
          }
        ]
      }
    },
    {
      "link": {
        "label": "Louvres",
        "href": "#",
        "modifiers": [
          "dark",
          "small"
        ]
      }
    },
    {
      "link": {
        "label": "Air Filtration",
        "href": "#",
        "modifiers": [
          "dark",
          "small"
        ]
      }
    },
    {
      "link": {
        "label": "Optimisation systems",
        "href": "#",
        "modifiers": [
          "dark",
          "small"
        ]
      }
    },
    {
      "link": {
        "label": "Connected services",
        "href": "#",
        "modifiers": [
          "dark",
          "small"
        ]
      }
    }
  ]
}
  • Content: 
    const Subnav = el => {
    const header = document.querySelector('.header');
    const headerSubmenuOpenClass = 'header--subnav-open';
    const headerSubnavAnimateClass = 'header--subnav-animate';
    const activeSubnavClass = 'subnav__list-item--active';
    const submenuToggleClass = 'subnav--submenu-open';

    const onClick = e => {
        e.preventDefault();
        const currentMenu = document.getElementById(e.currentTarget.getAttribute('aria-controls'));
        open(currentMenu, el);
    };

    const open = (currentMenu, el) => {
        el.classList.add(submenuToggleClass);
        currentMenu.parentNode.classList.add(activeSubnavClass);
        currentMenu.setAttribute('aria-hidden', false);
        animateSubnav('left');
    };

    const close = (el, currentMenu) => {
        el.classList.remove(submenuToggleClass);
        currentMenu.parentNode.classList.remove(activeSubnavClass);
        currentMenu.setAttribute('aria-hidden', true);
        animateSubnav('right');
    };

    const showSubnav = e => {
        el.setAttribute('aria-hidden', false);
        header && header.classList.add(headerSubmenuOpenClass);
        animateSubnav('left');
    };

    const hideSubnav = () => {
        el.setAttribute('aria-hidden', true);
        header && header.classList.remove(headerSubmenuOpenClass);
        animateSubnav('right');
    };

    const animateSubnav = (direction) => {
        header.classList.add(`${headerSubnavAnimateClass}-${direction}`);

        setTimeout(() => {
            header.classList.add(headerSubnavAnimateClass);

            setTimeout(() => {
                header.classList.remove(`${headerSubnavAnimateClass}-${direction}`);

                setTimeout(() => {
                    header.classList.remove(headerSubnavAnimateClass);
                    header.querySelector('.header__primary-nav').scrollTop = 0;
                }, 300);
            }, 10);
        }, 10);
    };

    const init = el => {
        el.addEventListener('triggerSubnav', showSubnav);
        el.querySelector('.subnav__button').addEventListener('click', hideSubnav);

        const triggers = el.querySelectorAll('.link[aria-controls]');
        for (let trigger of triggers) {
            trigger.addEventListener('click', onClick);
        }

        const backButtons = el.querySelectorAll('.subnav__button');
        for (let button of backButtons) {
            button.addEventListener('click', () => close(el, button.parentNode));
        }
    };

    init(el);
};

export default Subnav;
  • URL: /components/raw/subnav/Subnav.js
  • Filesystem Path: src/chrome/subnav/Subnav.js
  • Size: 2.5 KB
  • Content: 
    import Subnav from './Subnav';
const els = document.querySelectorAll('.subnav:not(.subnav--submenu)');

for (let el of els) {
    Subnav(el);
};
  • URL: /components/raw/subnav/index.js
  • Filesystem Path: src/chrome/subnav/index.js
  • Size: 145 Bytes
  • Content: 
    .subnav {
    display: none;

    .header--mobile-menu-open & {
        &[aria-hidden="false"] {
            display: block;
        }
    }

    .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));
    }
}

.subnav__header {
    background-color: $color-gray-1;
    margin: 0 size(-3);
    padding: size(3);

    .subnav--submenu-open > & {
        display: none;
    }
}

.subnav__title {
    font-weight: $font-weight-bold;
    margin-bottom: size(0.75);
}

.subnav__content {
    background-color: $color-white;
    margin: 0 size(-3);
    padding: size(2) size(3) 0;


    .subnav__item > & {
        padding-bottom: size(2);
        border-bottom: 1px solid $color-gray-1;
    }

    .subnav--submenu-open > & {
        padding-top: 0;
    }
}

.subnav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.subnav__list-item {
    .subnav--submenu-open > .subnav__content > .subnav__list > & {
        display: none;
    }

    > a.link {
        display: block;
        padding: size(1.5) 0;

        &--icon {
            position: relative;
            padding-right: size(4);
        }

        .link__icon {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    &--active {
        display: block !important;

        > a.link {
            display: none;
        }
    }
}

.subnav__button {
    position: fixed;
    margin-top: size(-6.5);
    padding: size(1) 0;
    font-size: size(1.75);
    cursor: pointer;

    .subnav--submenu-open > & {
        display: none;
    }
}

.subnav__button-icon {
    vertical-align: middle;
    width: size(2);
    height: size(2);
    fill: $color-green-dark;
    margin-right: size(0.5);
    transform: translateX(size(-0.5)) translateY(-1px);

    @include color-theme {
        fill: $arg-theme-color;
    }
}
  • URL: /components/raw/subnav/subnav.scss
  • Filesystem Path: src/chrome/subnav/subnav.scss
  • Size: 2.2 KB

No notes defined.