Navbar: Default 

<h-include>
    <div class="eyecatcher eyecatcher--event">
        <p class="eyecatcher--event__text">
            INNOQ Technology Lunch: Software Architecture for Agile Enterprises 👉
            <a href="#" class="eyecatcher--event__link">20. Mai, 12:15 Uhr</a>
        </p>
    </div>
</h-include>
<a href="#main" class="skip-link">Zum Inhalt springen</a>
<nav class="main-navigation main-navigation--black" aria-label="Webseite Navigation">
    <a href="#" class="brand-link">
        <img alt="" class="brand-logo" src="../../assets/logos/edition-02/svg/innoq-logo--whiteapricot.svg" />
        <span class="link-alt">INNOQ Homepage</span>
    </a>
    <a href="#" class="search-link">
        <span class="icon icon-search icon--brand-white"></span>
        <span class="link-alt">Suche</span>
    </a>
    <!--
        NOTE: in order to ensure that users of assistive technologies can
        easily find the content that is being collapsed and expanded, it is
        important for the content to directly follow the toggle button in the
        focus order on the page. When this doesn't match the visual design that
        we are trying to achieve, we can change the visual order of the
        elements with CSS.

        See: https://inclusive-components.design/menus-menu-buttons/#ariacontrols
    -->
    <menu-toggle hidden>
        <button>Menü</button>
    </menu-toggle>
    <!--
        NOTE: for each `ul` list in the navbar, we should explicitly set
        an `aria-label` that correctly describes the contents of the list to
        provide this information to assistive technologies. Additionally, we
        set the `role="list"` attribute to ensure that the lists will be
        announced as lists in Safari/VoiceOver

        See: https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
        and note in CSS file
    -->
    <ul class="navigation-links navigation-links--black" role="list" aria-label="Seitennavigation">
        <li>
            <sub-menu>
                <details>
                    <summary>
                        Leistungen
                        <span class="icon icon-chevron-down-filled icon--brand-white"></span>
                    </summary>
                    <ul role="list" aria-label="Leistungen Untermenü">
                        <li>
                            <a href="#">Strategie- und Technologieberatung</a>
                        </li>
                    </ul>
                </details>
            </sub-menu>
        </li>
        <li>
            <a href="#">Success Stories</a>
        </li>
        <li>
            <sub-menu>
                <details>
                    <summary>
                        Kultur
                        <span class="icon icon-chevron-down-filled icon--brand-white"></span>
                    </summary>
                    <ul role="list" aria-label="Kultur Untermenü">
                        <li>
                            <!--
                                NOTE: use `aria-current="page"` for the link within the
                                navbar representing the current page. The CSS rules to
                                visually highlight this link are hooked to that attribute.

                                See: https://adrianroselli.com/2021/06/using-css-to-enforce-accessibility.html
                                and note in CSS file
                            -->
                            <a href="#" aria-current="page">Wie wir zusammenarbeiten</a>
                        </li>
                        <li>
                            <a href="#">Was uns wichtig ist</a>
                        </li>
                        <li>
                            <a href="#">Arbeiten bei INNOQ</a>
                        </li>
                    </ul>
                </details>
            </sub-menu>
        </li>
        <li>
            <sub-menu>
                <details>
                    <summary>
                        Magazin
                        <span class="icon icon-chevron-down-filled icon--brand-white"></span>
                    </summary>
                    <ul role="list" aria-label="Magazin Untermenü">
                        <li>
                            <a href="#">Blog & Artikel</a>
                        </li>
                        <li>
                            <a href="#">Podcasts</a>
                        </li>
                        <li>
                            <a href="#">Vorträge</a>
                        </li>
                        <li>
                            <a href="#">Primer</a>
                        </li>
                    </ul>
                </details>
            </sub-menu>
        </li>
        <li>
            <sub-menu>
                <details>
                    <summary>
                        Trends
                        <span class="icon icon-chevron-down-filled icon--brand-white"></span>
                    </summary>
                    <ul role="list" aria-label="Trends Untermenü">
                        <li>
                            <a href="#">Accessibility</a>
                        </li>
                        <li>
                            <a href="#">Cloud Migration</a>
                        </li>
                        <li>
                            <a href="#">Data Mesh</a>
                        </li>
                    </ul>
                </details>
            </sub-menu>
        </li>
        <li>
            <sub-menu>
                <details>
                    <summary>
                        Schulungen
                        <span class="icon icon-chevron-down-filled icon--brand-white"></span>
                    </summary>
                    <ul role="list" aria-label="Schulungen Untermenü">
                        <li>
                            <a href="#">Warum Online-Schulungen?</a>
                        </li>
                        <li>
                            <a href="#">Softwarearchitektur Kickstart</a>
                        </li>
                        <li>
                            <a href="#">Data Mesh</a>
                        </li>
                        <li>
                            <a href="#">iSAQB CPSA-F Foundation Level</a>
                        </li>
                        <li>
                            <a href="#">Accessibility</a>
                        </li>
                        <li>
                            <a href="#">Blockchain</a>
                        </li>
                        <li>
                            <a href="#">Cloud Native Infrastruktur</a>
                        </li>
                        <li>
                            <a href="#">Cloud Migration</a>
                        </li>
                        <li>
                            <a href="#">Domain-driven Design</a>
                        </li>
                        <li>
                            <a href="#">DDD für Machine Learning</a>
                        </li>
                        <li>
                            <a href="#">Flexible Architekturen</a>
                        </li>
                        <li>
                            <a href="#">JavaScript</a>
                        </li>
                        <li>
                            <a href="#">Modernisierung</a>
                        </li>
                        <li>
                            <a href="#">Product Ownership</a>
                        </li>
                        <li>
                            <a href="#">Remote Mob Programming</a>
                        </li>
                        <li>
                            <a href="#">Software Analytics</a>
                        </li>
                        <li>
                            <a href="#">Web-Architekturen</a>
                        </li>
                        <li>
                            <a href="#">Web-Security</a>
                        </li>
                    </ul>
                </details>
            </sub-menu>
        </li>
    </ul>
    <div class="navigation-meta">
        <a href="#">
            <span lang="ru" aria-label="Ви з України та розробляєте програмнi (software) продукти? Зв’язатися з нами.">💙💛</span>
        </a>
        <a href="#">Kontakt</a>
        <ul role="list" aria-label="Verfügbare Sprachen">
            <li>
                <!--
                    NOTE: use the `aria-current="true"` attribute to specify the language
                    which is currently selected. As with `aria-current="page"`, setting
                    this attribute correctly is necessary to obtain the visual CSS styles.
                -->
                <a lang="de" href="#" title="Zu Deutsch wechseln" aria-label="Zu Deutsch wechseln" aria-current="true">de</a>
            </li>
            <li>
                <a lang="de_CH" href="#" title="Zu Schweizerdeutsch wechseln" aria-label="Zu Schweizerdeutsch wechseln">ch</a>
            </li>
            <li>
                <a lang="en" href="#" title="Switch to English" aria-label="Switch to English">en</a>
            </li>
        </ul>
    </div>
</nav>

<h-include>
    <div class="eyecatcher eyecatcher--event">
        <p class="eyecatcher--event__text">
            INNOQ Technology Lunch: Software Architecture for Agile Enterprises 👉
            <a href="#" class="eyecatcher--event__link">20. Mai, 12:15 Uhr</a>
        </p>
    </div>
</h-include>
<a href="#main" class="skip-link">Zum Inhalt springen</a>
<nav class="main-navigation" aria-label="Webseite Navigation">
    <a href="#" class="brand-link">
        <img alt="" class="brand-logo" src="../../assets/logos/edition-02/svg/innoq-logo--whiteapricot.svg" />
        <span class="link-alt">INNOQ Homepage</span>
    </a>
    <a href="#" class="search-link">
        <span class="icon icon-search icon--brand-white"></span>
        <span class="link-alt">Suche</span>
    </a>
    <!--
        NOTE: in order to ensure that users of assistive technologies can
        easily find the content that is being collapsed and expanded, it is
        important for the content to directly follow the toggle button in the
        focus order on the page. When this doesn't match the visual design that
        we are trying to achieve, we can change the visual order of the
        elements with CSS.

        See: https://inclusive-components.design/menus-menu-buttons/#ariacontrols
    -->
    <menu-toggle hidden>
        <button>Menü</button>
    </menu-toggle>
    <!--
        NOTE: for each `ul` list in the navbar, we should explicitly set
        an `aria-label` that correctly describes the contents of the list to
        provide this information to assistive technologies. Additionally, we
        set the `role="list"` attribute to ensure that the lists will be
        announced as lists in Safari/VoiceOver

        See: https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
        and note in CSS file
    -->
    <ul class="navigation-links" role="list" aria-label="Seitennavigation">
        <li>
            <sub-menu>
                <details>
                    <summary>
                        Leistungen
                        <span class="icon icon-chevron-down-filled icon--brand-white"></span>
                    </summary>
                    <ul role="list" aria-label="Leistungen Untermenü">
                        <li>
                            <a href="#">Strategie- und Technologieberatung</a>
                        </li>
                    </ul>
                </details>
            </sub-menu>
        </li>
        <li>
            <a href="#">Success Stories</a>
        </li>
        <li>
            <sub-menu>
                <details>
                    <summary>
                        Kultur
                        <span class="icon icon-chevron-down-filled icon--brand-white"></span>
                    </summary>
                    <ul role="list" aria-label="Kultur Untermenü">
                        <li>
                            <!--
                                NOTE: use `aria-current="page"` for the link within the
                                navbar representing the current page. The CSS rules to
                                visually highlight this link are hooked to that attribute.

                                See: https://adrianroselli.com/2021/06/using-css-to-enforce-accessibility.html
                                and note in CSS file
                            -->
                            <a href="#" aria-current="page">Wie wir zusammenarbeiten</a>
                        </li>
                        <li>
                            <a href="#">Was uns wichtig ist</a>
                        </li>
                        <li>
                            <a href="#">Arbeiten bei INNOQ</a>
                        </li>
                    </ul>
                </details>
            </sub-menu>
        </li>
        <li>
            <sub-menu>
                <details>
                    <summary>
                        Magazin
                        <span class="icon icon-chevron-down-filled icon--brand-white"></span>
                    </summary>
                    <ul role="list" aria-label="Magazin Untermenü">
                        <li>
                            <a href="#">Blog & Artikel</a>
                        </li>
                        <li>
                            <a href="#">Podcasts</a>
                        </li>
                        <li>
                            <a href="#">Vorträge</a>
                        </li>
                        <li>
                            <a href="#">Primer</a>
                        </li>
                    </ul>
                </details>
            </sub-menu>
        </li>
        <li>
            <sub-menu>
                <details>
                    <summary>
                        Trends
                        <span class="icon icon-chevron-down-filled icon--brand-white"></span>
                    </summary>
                    <ul role="list" aria-label="Trends Untermenü">
                        <li>
                            <a href="#">Accessibility</a>
                        </li>
                        <li>
                            <a href="#">Cloud Migration</a>
                        </li>
                        <li>
                            <a href="#">Data Mesh</a>
                        </li>
                    </ul>
                </details>
            </sub-menu>
        </li>
        <li>
            <sub-menu>
                <details>
                    <summary>
                        Schulungen
                        <span class="icon icon-chevron-down-filled icon--brand-white"></span>
                    </summary>
                    <ul role="list" aria-label="Schulungen Untermenü">
                        <li>
                            <a href="#">Warum Online-Schulungen?</a>
                        </li>
                        <li>
                            <a href="#">Softwarearchitektur Kickstart</a>
                        </li>
                        <li>
                            <a href="#">Data Mesh</a>
                        </li>
                        <li>
                            <a href="#">iSAQB CPSA-F Foundation Level</a>
                        </li>
                        <li>
                            <a href="#">Accessibility</a>
                        </li>
                        <li>
                            <a href="#">Blockchain</a>
                        </li>
                        <li>
                            <a href="#">Cloud Native Infrastruktur</a>
                        </li>
                        <li>
                            <a href="#">Cloud Migration</a>
                        </li>
                        <li>
                            <a href="#">Domain-driven Design</a>
                        </li>
                        <li>
                            <a href="#">DDD für Machine Learning</a>
                        </li>
                        <li>
                            <a href="#">Flexible Architekturen</a>
                        </li>
                        <li>
                            <a href="#">JavaScript</a>
                        </li>
                        <li>
                            <a href="#">Modernisierung</a>
                        </li>
                        <li>
                            <a href="#">Product Ownership</a>
                        </li>
                        <li>
                            <a href="#">Remote Mob Programming</a>
                        </li>
                        <li>
                            <a href="#">Software Analytics</a>
                        </li>
                        <li>
                            <a href="#">Web-Architekturen</a>
                        </li>
                        <li>
                            <a href="#">Web-Security</a>
                        </li>
                    </ul>
                </details>
            </sub-menu>
        </li>
    </ul>
    <div class="navigation-meta">
        <a href="#">
            <span lang="ru" aria-label="Ви з України та розробляєте програмнi (software) продукти? Зв’язатися з нами.">💙💛</span>
        </a>
        <a href="#">Kontakt</a>
        <ul role="list" aria-label="Verfügbare Sprachen">
            <li>
                <!--
                    NOTE: use the `aria-current="true"` attribute to specify the language
                    which is currently selected. As with `aria-current="page"`, setting
                    this attribute correctly is necessary to obtain the visual CSS styles.
                -->
                <a lang="de" href="#" title="Zu Deutsch wechseln" aria-label="Zu Deutsch wechseln" aria-current="true">de</a>
            </li>
            <li>
                <a lang="de_CH" href="#" title="Zu Schweizerdeutsch wechseln" aria-label="Zu Schweizerdeutsch wechseln">ch</a>
            </li>
            <li>
                <a lang="en" href="#" title="Switch to English" aria-label="Switch to English">en</a>
            </li>
        </ul>
    </div>
</nav>
 
<h-include>
    <div class="eyecatcher eyecatcher--event">
        <p class="eyecatcher--event__text">
            INNOQ Technology Lunch: Software Architecture for Agile Enterprises 👉
            <a href="#" class="eyecatcher--event__link">20. Mai, 12:15 Uhr</a>
        </p>
    </div>
</h-include>
<a href="#main" class="skip-link">Zum Inhalt springen</a>
<nav class="main-navigation main-navigation--black" aria-label="Webseite Navigation">
    <a href="#" class="brand-link">
        <img alt="" class="brand-logo" src="{{ path '/assets/logos/edition-02/svg/innoq-logo--whiteapricot.svg' }}" />
        <span class="link-alt">INNOQ Homepage</span>
    </a>
    <a href="#" class="search-link">
        <span class="icon icon-search icon--brand-white"></span>
        <span class="link-alt">Suche</span>
    </a>
    <!--
        NOTE: in order to ensure that users of assistive technologies can
        easily find the content that is being collapsed and expanded, it is
        important for the content to directly follow the toggle button in the
        focus order on the page. When this doesn't match the visual design that
        we are trying to achieve, we can change the visual order of the
        elements with CSS.

        See: https://inclusive-components.design/menus-menu-buttons/#ariacontrols
    -->
    <menu-toggle hidden>
        <button>Menü</button>
    </menu-toggle>
    <!--
        NOTE: for each `ul` list in the navbar, we should explicitly set
        an `aria-label` that correctly describes the contents of the list to
        provide this information to assistive technologies. Additionally, we
        set the `role="list"` attribute to ensure that the lists will be
        announced as lists in Safari/VoiceOver

        See: https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
        and note in CSS file
    -->
    <ul class="navigation-links navigation-links--black" role="list" aria-label="Seitennavigation">
        <li>
            <sub-menu>
                <details>
                    <summary>
                        Leistungen
                        <span class="icon icon-chevron-down-filled icon--brand-white"></span>
                    </summary>
                    <ul role="list" aria-label="Leistungen Untermenü">
                        <li>
                            <a href="#">Strategie- und Technologieberatung</a>
                        </li>
                    </ul>
                </details>
            </sub-menu>
        </li>
        <li>
            <a href="#">Success Stories</a>
        </li>
        <li>
            <sub-menu>
                <details>
                    <summary>
                        Kultur
                        <span class="icon icon-chevron-down-filled icon--brand-white"></span>
                    </summary>
                    <ul role="list" aria-label="Kultur Untermenü">
                        <li>
                            <!--
                                NOTE: use `aria-current="page"` for the link within the
                                navbar representing the current page. The CSS rules to
                                visually highlight this link are hooked to that attribute.

                                See: https://adrianroselli.com/2021/06/using-css-to-enforce-accessibility.html
                                and note in CSS file
                            -->
                            <a href="#" aria-current="page">Wie wir zusammenarbeiten</a>
                        </li>
                        <li>
                            <a href="#">Was uns wichtig ist</a>
                        </li>
                        <li>
                            <a href="#">Arbeiten bei INNOQ</a>
                        </li>
                    </ul>
                </details>
            </sub-menu>
        </li>
        <li>
            <sub-menu>
                <details>
                    <summary>
                        Magazin
                        <span class="icon icon-chevron-down-filled icon--brand-white"></span>
                    </summary>
                    <ul role="list" aria-label="Magazin Untermenü">
                        <li>
                            <a href="#">Blog & Artikel</a>
                        </li>
                        <li>
                            <a href="#">Podcasts</a>
                        </li>
                        <li>
                            <a href="#">Vorträge</a>
                        </li>
                        <li>
                            <a href="#">Primer</a>
                        </li>
                    </ul>
                </details>
            </sub-menu>
        </li>
        <li>
            <sub-menu>
                <details>
                    <summary>
                        Trends
                        <span class="icon icon-chevron-down-filled icon--brand-white"></span>
                    </summary>
                    <ul role="list" aria-label="Trends Untermenü">
                        <li>
                            <a href="#">Accessibility</a>
                        </li>
                        <li>
                            <a href="#">Cloud Migration</a>
                        </li>
                        <li>
                            <a href="#">Data Mesh</a>
                        </li>
                    </ul>
                </details>
            </sub-menu>
        </li>
        <li>
            <sub-menu>
                <details>
                    <summary>
                        Schulungen
                        <span class="icon icon-chevron-down-filled icon--brand-white"></span>
                    </summary>
                    <ul role="list" aria-label="Schulungen Untermenü">
                        <li>
                            <a href="#">Warum Online-Schulungen?</a>
                        </li>
                        <li>
                            <a href="#">Softwarearchitektur Kickstart</a>
                        </li>
                        <li>
                            <a href="#">Data Mesh</a>
                        </li>
                        <li>
                            <a href="#">iSAQB CPSA-F Foundation Level</a>
                        </li>
                        <li>
                            <a href="#">Accessibility</a>
                        </li>
                        <li>
                            <a href="#">Blockchain</a>
                        </li>
                        <li>
                            <a href="#">Cloud Native Infrastruktur</a>
                        </li>
                        <li>
                            <a href="#">Cloud Migration</a>
                        </li>
                        <li>
                            <a href="#">Domain-driven Design</a>
                        </li>
                        <li>
                            <a href="#">DDD für Machine Learning</a>
                        </li>
                        <li>
                            <a href="#">Flexible Architekturen</a>
                        </li>
                        <li>
                            <a href="#">JavaScript</a>
                        </li>
                        <li>
                            <a href="#">Modernisierung</a>
                        </li>
                        <li>
                            <a href="#">Product Ownership</a>
                        </li>
                        <li>
                            <a href="#">Remote Mob Programming</a>
                        </li>
                        <li>
                            <a href="#">Software Analytics</a>
                        </li>
                        <li>
                            <a href="#">Web-Architekturen</a>
                        </li>
                        <li>
                            <a href="#">Web-Security</a>
                        </li>
                    </ul>
                </details>
            </sub-menu>
        </li>
    </ul>
    <div class="navigation-meta">
        <a href="#">
            <span lang="ru" aria-label="Ви з України та розробляєте програмнi (software) продукти? Зв’язатися з нами.">💙💛</span>
        </a>
        <a href="#">Kontakt</a>
        <ul role="list" aria-label="Verfügbare Sprachen">
            <li>
                <!--
                    NOTE: use the `aria-current="true"` attribute to specify the language
                    which is currently selected. As with `aria-current="page"`, setting
                    this attribute correctly is necessary to obtain the visual CSS styles.
                -->
                <a lang="de" href="#" title="Zu Deutsch wechseln" aria-label="Zu Deutsch wechseln" aria-current="true">de</a>
            </li>
            <li>
                <a lang="de_CH" href="#" title="Zu Schweizerdeutsch wechseln" aria-label="Zu Schweizerdeutsch wechseln">ch</a>
            </li>
            <li>
                <a lang="en" href="#" title="Switch to English" aria-label="Switch to English">en</a>
            </li>
        </ul>
    </div>
</nav>

<h-include>
    <div class="eyecatcher eyecatcher--event">
        <p class="eyecatcher--event__text">
            INNOQ Technology Lunch: Software Architecture for Agile Enterprises 👉
            <a href="#" class="eyecatcher--event__link">20. Mai, 12:15 Uhr</a>
        </p>
    </div>
</h-include>
<a href="#main" class="skip-link">Zum Inhalt springen</a>
<nav class="main-navigation" aria-label="Webseite Navigation">
    <a href="#" class="brand-link">
        <img alt="" class="brand-logo" src="{{ path '/assets/logos/edition-02/svg/innoq-logo--whiteapricot.svg' }}" />
        <span class="link-alt">INNOQ Homepage</span>
    </a>
    <a href="#" class="search-link">
        <span class="icon icon-search icon--brand-white"></span>
        <span class="link-alt">Suche</span>
    </a>
    <!--
        NOTE: in order to ensure that users of assistive technologies can
        easily find the content that is being collapsed and expanded, it is
        important for the content to directly follow the toggle button in the
        focus order on the page. When this doesn't match the visual design that
        we are trying to achieve, we can change the visual order of the
        elements with CSS.

        See: https://inclusive-components.design/menus-menu-buttons/#ariacontrols
    -->
    <menu-toggle hidden>
        <button>Menü</button>
    </menu-toggle>
    <!--
        NOTE: for each `ul` list in the navbar, we should explicitly set
        an `aria-label` that correctly describes the contents of the list to
        provide this information to assistive technologies. Additionally, we
        set the `role="list"` attribute to ensure that the lists will be
        announced as lists in Safari/VoiceOver

        See: https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
        and note in CSS file
    -->
    <ul class="navigation-links" role="list" aria-label="Seitennavigation">
        <li>
            <sub-menu>
                <details>
                    <summary>
                        Leistungen
                        <span class="icon icon-chevron-down-filled icon--brand-white"></span>
                    </summary>
                    <ul role="list" aria-label="Leistungen Untermenü">
                        <li>
                            <a href="#">Strategie- und Technologieberatung</a>
                        </li>
                    </ul>
                </details>
            </sub-menu>
        </li>
        <li>
            <a href="#">Success Stories</a>
        </li>
        <li>
            <sub-menu>
                <details>
                    <summary>
                        Kultur
                        <span class="icon icon-chevron-down-filled icon--brand-white"></span>
                    </summary>
                    <ul role="list" aria-label="Kultur Untermenü">
                        <li>
                            <!--
                                NOTE: use `aria-current="page"` for the link within the
                                navbar representing the current page. The CSS rules to
                                visually highlight this link are hooked to that attribute.

                                See: https://adrianroselli.com/2021/06/using-css-to-enforce-accessibility.html
                                and note in CSS file
                            -->
                            <a href="#" aria-current="page">Wie wir zusammenarbeiten</a>
                        </li>
                        <li>
                            <a href="#">Was uns wichtig ist</a>
                        </li>
                        <li>
                            <a href="#">Arbeiten bei INNOQ</a>
                        </li>
                    </ul>
                </details>
            </sub-menu>
        </li>
        <li>
            <sub-menu>
                <details>
                    <summary>
                        Magazin
                        <span class="icon icon-chevron-down-filled icon--brand-white"></span>
                    </summary>
                    <ul role="list" aria-label="Magazin Untermenü">
                        <li>
                            <a href="#">Blog & Artikel</a>
                        </li>
                        <li>
                            <a href="#">Podcasts</a>
                        </li>
                        <li>
                            <a href="#">Vorträge</a>
                        </li>
                        <li>
                            <a href="#">Primer</a>
                        </li>
                    </ul>
                </details>
            </sub-menu>
        </li>
        <li>
            <sub-menu>
                <details>
                    <summary>
                        Trends
                        <span class="icon icon-chevron-down-filled icon--brand-white"></span>
                    </summary>
                    <ul role="list" aria-label="Trends Untermenü">
                        <li>
                            <a href="#">Accessibility</a>
                        </li>
                        <li>
                            <a href="#">Cloud Migration</a>
                        </li>
                        <li>
                            <a href="#">Data Mesh</a>
                        </li>
                    </ul>
                </details>
            </sub-menu>
        </li>
        <li>
            <sub-menu>
                <details>
                    <summary>
                        Schulungen
                        <span class="icon icon-chevron-down-filled icon--brand-white"></span>
                    </summary>
                    <ul role="list" aria-label="Schulungen Untermenü">
                        <li>
                            <a href="#">Warum Online-Schulungen?</a>
                        </li>
                        <li>
                            <a href="#">Softwarearchitektur Kickstart</a>
                        </li>
                        <li>
                            <a href="#">Data Mesh</a>
                        </li>
                        <li>
                            <a href="#">iSAQB CPSA-F Foundation Level</a>
                        </li>
                        <li>
                            <a href="#">Accessibility</a>
                        </li>
                        <li>
                            <a href="#">Blockchain</a>
                        </li>
                        <li>
                            <a href="#">Cloud Native Infrastruktur</a>
                        </li>
                        <li>
                            <a href="#">Cloud Migration</a>
                        </li>
                        <li>
                            <a href="#">Domain-driven Design</a>
                        </li>
                        <li>
                            <a href="#">DDD für Machine Learning</a>
                        </li>
                        <li>
                            <a href="#">Flexible Architekturen</a>
                        </li>
                        <li>
                            <a href="#">JavaScript</a>
                        </li>
                        <li>
                            <a href="#">Modernisierung</a>
                        </li>
                        <li>
                            <a href="#">Product Ownership</a>
                        </li>
                        <li>
                            <a href="#">Remote Mob Programming</a>
                        </li>
                        <li>
                            <a href="#">Software Analytics</a>
                        </li>
                        <li>
                            <a href="#">Web-Architekturen</a>
                        </li>
                        <li>
                            <a href="#">Web-Security</a>
                        </li>
                    </ul>
                </details>
            </sub-menu>
        </li>
    </ul>
    <div class="navigation-meta">
        <a href="#">
            <span lang="ru"
                aria-label="Ви з України та розробляєте програмнi (software) продукти? Зв’язатися з нами.">💙💛</span>
        </a>
        <a href="#">Kontakt</a>
        <ul role="list" aria-label="Verfügbare Sprachen">
            <li>
                <!--
                    NOTE: use the `aria-current="true"` attribute to specify the language
                    which is currently selected. As with `aria-current="page"`, setting
                    this attribute correctly is necessary to obtain the visual CSS styles.
                -->
                <a lang="de" href="#" title="Zu Deutsch wechseln" aria-label="Zu Deutsch wechseln"
                    aria-current="true">de</a>
            </li>
            <li>
                <a lang="de_CH" href="#" title="Zu Schweizerdeutsch wechseln"
                    aria-label="Zu Schweizerdeutsch wechseln">ch</a>
            </li>
            <li>
                <a lang="en" href="#" title="Switch to English" aria-label="Switch to English">en</a>
            </li>
        </ul>
    </div>
</nav>
 
/* No context defined. */
  • Content: 
    $navbar-primary-font-size-big: ms(7);
$navbar-primary-font-size: ms(3);
$navbar-secondary-font-size: ms(-2);
$navbar-focus-outline-width: 2px;
$navbar-btn-transition: color 0.175s ease;
$navbar-toggle-width: calc((#{$navbar-focus-outline-width} * 2) + (#{$navbar-padding} * 3));
$navbar-toggle-transition-speed: $transition-time-standard * 3;
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
$navbar-dropdown-shadow:
  0 20px 25px -5px rgb(0 0 0 / 0.1),
  0 8px 10px -6px rgb(0 0 0 / 0.1);
$navbar-dropdown-z-index: 1;
$navbar-dropdown-z-index-expanding: 2;
$navbar-dropdown-z-index-hover: 3;

%navigation-action {
  cursor: pointer;

  display: inline-block;

  margin: var(--forced-colors-action-margin);

  color: $navbar-link-color;

  transition: $navbar-btn-transition;

  &:hover,
  &:focus {
    color: $navbar-link-hover-color;
    transition: $navbar-btn-transition;

    .icon {
      background-color: $navbar-link-hover-color;
    }
  }

  &:focus {
    border-color: $navbar-link-hover-color;
    outline: $navbar-focus-outline-width solid $navbar-lightened-bg;
  }

  &:focus-visible {
    border-color: $navbar-link-hover-color;
    outline: $navbar-focus-outline-width solid $navbar-lightened-bg;
  }

  // Remove outline styles when the user is not navigating with the keyboard
  &:focus:not(:focus-visible) {
    border-color: transparent;
    outline: none;
  }
}

%navigation-link {
  @extend %navigation-action;

  text-decoration: var(--forced-colors-link-decoration, none);
  border: var(--forced-colors-link-border-width, #{$navbar-focus-outline-width}) solid transparent;
}

%navigation-button {
  @extend %navigation-action;

  background-color: transparent;
  border: $navbar-focus-outline-width solid transparent;
}

.skip-link {
  @extend %heading-font-regular;
  @extend %navigation-link;

  display: block;
  margin-bottom: $navbar-focus-outline-width;
  padding: $navbar-padding;
  background-color: $navbar-lightened-bg;

  &:not(:focus) {
    @extend %sr-only;
  }
}

.main-navigation {
  --navbar-background-color: #{$navbar-body-bg};

  @extend %heading-font-regular;

  display: grid;
  grid-template-areas:
    'brand menu search'
    'nav nav nav'
    'meta meta meta';
  grid-template-columns: 1fr auto auto;
  background-color: var(--navbar-background-color);

  // A helper for providing alternative text for images and icons to assistive
  // technologies. This is similar to the `.sr-only` helper, but the
  // `.link-alt` helper will additionally be shown to users using a
  // `forced-colors` mode where icons/images are also difficult to discern
  .link-alt {
    @extend %sr-only;
  }

  &--transparent {
    --navbar-background-color: transparent;
  }

  &--black {
    /* stylelint-disable-next-line */
    --navbar-background-color: #242424;
  }

  ul {
    padding: 0;
  }

  a:hover,
  a:focus {
    background-color: transparent; // Override style from a:not([class])
  }

  // Removing `list-style` attributes causes the list to no longer appear as a
  // list in the accessibility tree. As a workaround, this only removes the
  // list styling once the ARIA `role="list"` has been set to reinstate the
  // list semantics for the list.
  // See: https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
  ul[role='list'],
  ol[role='list'] {
    list-style: none;
    list-style-type: none;
  }

  .brand-link {
    @extend %navigation-link;

    display: flex;
    grid-area: brand;
    flex-direction: column;
    padding: $navbar-padding;

    .brand-logo {
      width: $navbar-logo-height-small * 3.94;
      height: $navbar-logo-height-small;
    }
  }

  .search-link {
    @extend %navigation-link;

    display: flex;
    grid-area: search;
    align-items: center;
    padding: $navbar-padding;

    .icon {
      width: $navbar-padding;
      height: $navbar-padding;
    }
  }

  menu-toggle {
    grid-area: menu;
    align-items: center;

    &::after {
      content: '';
      width: 0;
      height: $navbar-padding;
      border: 1px solid $navbar-link-color;
    }

    &:not([hidden]) {
      display: flex;
    }

    button {
      @extend %navigation-button;

      padding: $navbar-padding;
      font-size: $navbar-primary-font-size;
      font-weight: bold;
    }
  }

  .navigation-links {
    grid-area: nav;
    font-size: $navbar-primary-font-size;
    background-color: $navbar-lightened-bg;

    &--black {
      /* stylelint-disable-next-line */
      background-color: #242424;

      sub-menu {
        /* stylelint-disable-next-line */
        details > ul,
        > div {
          /* stylelint-disable-next-line */
          background-color: #242424;
        }
      }
    }

    > :first-child {
      margin-top: $navbar-padding * 2;
    }

    > :last-child {
      margin-bottom: $navbar-padding * 2;
    }

    a {
      @extend %navigation-link;
    }

    summary,
    button {
      @extend %navigation-button;
    }

    a,
    summary,
    button {
      display: flex;
      align-items: center;
      padding: ($navbar-padding * 0.5) $navbar-padding;
      background-color: transparent;
    }

    /* stylelint-disable-next-line selector-max-compound-selectors */
    > li > a,
    summary,
    button {
      font-size: $navbar-primary-font-size-big;
      font-weight: bold;
    }

    // Use CSS rules to enforce the accessibility of the current link within the
    // navbar. If it is visually correct, it will also be semantically correct.
    // See: https://adrianroselli.com/2021/06/using-css-to-enforce-accessibility.html
    a[aria-current='page'] {
      text-decoration: underline;
      text-decoration-color: $navbar-link-active-color;
      text-decoration-thickness: 3px;
      text-underline-offset: $spacer-xs;
    }
  }

  .navigation-meta {
    position: sticky;
    bottom: 0;

    display: flex;
    grid-area: meta;
    align-items: center;
    justify-content: space-around;

    padding: 0 $navbar-padding;

    font-size: var(--pointer-fine-navbar-meta-font-size, inherit);
    color: $navbar-link-color;
    text-transform: uppercase;

    background-color: var(--navbar-background-color);

    > * {
      margin: $navbar-padding 0;
    }

    a {
      @extend %navigation-link;

      padding: var(--pointer-fine-navbar-meta-spacer, #{$spacer-xs});

      // Styles to indicate that the language is the current language selected
      // for the site.
      &[aria-current='true'] {
        text-decoration: underline;
        text-decoration-color: $navbar-link-active-color;
        text-decoration-thickness: 2px;
        text-underline-offset: $spacer-xxs;
      }
    }

    ul {
      display: flex;
    }

    li {
      display: flex;
      align-items: center;

      &:not(:last-child)::after {
        content: '|';
      }
    }
  }

  // CSS Styles for expanding/collapsing the navbar on mobile devices
  // This animates the changing height for browsers which support animation
  // of the `grid-row-transition` property.
  //
  // See: https://nemzes.net/posts/animating-height-auto/
  // Browser Support: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows#browser_compatibility
  &[data-expanded] {
    grid-template-rows: var(--main-navigation-grid-template-rows);
    transition: var(--grid-row-transition);

    .navigation-links,
    .navigation-meta {
      overflow: hidden;
      min-height: 0;
      visibility: var(--main-navigation-menu-visibility);
      transition: var(--visibility-transition);
    }
  }

  &[data-expanded='true'] {
    --main-navigation-grid-template-rows: min-content 1fr min-content;
    --main-navigation-menu-visibility: visibility;
  }

  &[data-expanded='false'] {
    --main-navigation-grid-template-rows: min-content 0fr 0fr;
    --main-navigation-menu-visibility: hidden;
  }

  sub-menu {
    display: flex;
    flex-direction: column;

    .icon {
      transform: rotate(-90deg);

      width: $spacer-xs;
      height: $spacer-xs;
      margin-left: auto;

      transition: standard-transition(all);

      &:hover,
      &:focus {
        background: $sharing-interaction-color;
      }
    }

    details[open],
    [aria-expanded='true'] {
      /* stylelint-disable-next-line selector-max-compound-selectors */
      .icon {
        transform: rotate(0);
      }
    }

    // CSS Styles for expanding/collapsing the submenu
    // This animates the changing height for browsers which support animation
    // of the `grid-template-rows` property.
    // In order for this to work properly, we need to animate the
    // `grid-template-rows` of the outer container and the `visibility` of the
    // inner container.
    //
    // When we absolutely position the menu on larger viewports, the animation
    // no longer works when we use the `sub-menu` as the outer container.
    // For this reason, we add a `div` element surrounding the `ul` with
    // JavaScript to enable us to have a container on which to place the
    // necessary transition.
    //
    // See: https://nemzes.net/posts/animating-height-auto/
    // Browser Support: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows#browser_compatibility
    div {
      overflow: hidden;
      display: grid;
      grid-template-rows: var(--submenu-grid-template-rows);
      transition: var(--grid-row-transition);
    }

    ul {
      min-height: 0;
      margin-bottom: $spacer-xs;
      visibility: var(--submenu-visibility);
      transition: var(--visibility-transition);
    }

    /* stylelint-disable-next-line selector-max-compound-selectors */
    [aria-expanded='false'] + div {
      --submenu-grid-template-rows: 0fr;
      --submenu-visibility: hidden;
    }

    /* stylelint-disable-next-line selector-max-compound-selectors */
    [aria-expanded='true'] + div {
      --submenu-grid-template-rows: 1fr;
      --submenu-visibility: visible;
    }
  }

  // Use CSS properties to tweak the navbar theme based on CSS media features
  @media (prefers-reduced-motion: no-preference) {
    --grid-row-transition: grid-template-rows #{$navbar-toggle-transition-speed} #{$transition-easing-standard};
    --visibility-transition: visibility #{$navbar-toggle-transition-speed} #{$transition-easing-standard};
  }

  @media (forced-colors: active) {
    --forced-colors-link-border-width: 0;
    --forced-colors-action-margin: #{$navbar-focus-outline-width};
    --forced-colors-link-decoration: underline;
    --forced-colors-navbar-toggler-width: 10rem;

    .link-alt {
      all: revert;
      text-align: left;
    }
  }

  @media (pointer: fine) {
    --pointer-fine-navbar-meta-font-size: #{$navbar-secondary-font-size * 0.9};
    --pointer-fine-navbar-meta-spacer: #{$spacer-xs * 0.5};
  }

  //
  // Breakpoints for larger devices
  //

  @media (min-width: $grid-breakpoint-xs-sm) {
    .navigation-meta {
      gap: $spacer-sm;
      justify-content: center;
    }
  }

  @media (min-width: $nav-breakpoint-px) {
    --navbar-toggler-width: var(--forced-colors-navbar-toggler-width, #{$navbar-toggle-width});

    grid-template-areas:
      '. . brand meta search'
      'nav nav nav nav nav';
    grid-template-columns: var(--navbar-toggler-width) 1fr 1fr 1fr var(--navbar-toggler-width);

    .brand-link {
      align-items: center;
    }

    menu-toggle:not([hidden]) {
      display: none;
    }

    .navigation-links {
      display: flex;
      justify-content: center;
      padding: 0 ($navbar-padding * 0.5);
      background-color: var(--navbar-background-color);

      a {
        white-space: nowrap;
      }

      /* stylelint-disable-next-line selector-max-compound-selectors */
      > li > a,
      summary,
      button {
        padding: $navbar-padding ($navbar-padding * 0.5);
        font-size: $navbar-primary-font-size;
      }

      > :first-child {
        margin-top: 0;
      }

      > :last-child {
        --submenu-position-right: 0;

        margin-bottom: 0;
      }
    }

    .navigation-meta {
      display: flex;
      justify-content: flex-end;
      padding: 0;
    }

    &[data-expanded] {
      .navigation-links,
      .navigation-meta {
        overflow: visible;
        min-height: auto;
        visibility: visible;
      }
    }

    sub-menu {
      position: relative;
      display: grid;
      grid-template-areas:
        'button .'
        'menu menu';

      > button {
        grid-area: button;
      }

      > div {
        grid-area: menu;
      }

      .icon {
        transform: rotate(0deg);
        margin-left: $spacer-xs;
      }

      details[open],
      ul {
        margin-bottom: 0;
      }

      li:first-child {
        margin-top: $navbar-padding * 0.5;
      }

      li:last-child {
        margin-bottom: $navbar-padding * 0.5;
      }

      /* stylelint-disable-next-line selector-max-compound-selectors */
      details > ul,
      > div {
        position: absolute;
        z-index: $navbar-dropdown-z-index;
        right: var(--submenu-position-right);

        background-color: $navbar-lightened-bg;
        box-shadow: $navbar-dropdown-shadow;
      }

      /* stylelint-disable-next-line selector-max-compound-selectors */
      [aria-expanded='true'] + div {
        z-index: $navbar-dropdown-z-index-expanding;
      }

      &:hover {
        z-index: $navbar-dropdown-z-index-hover;

        /* stylelint-disable-next-line max-nesting-depth */
        > div {
          --submenu-visibility: visible;
          --submenu-grid-template-rows: 1fr;
        }
      }
    }
  }

  @media (min-width: $default-page-layout-content-width-xl) {
    $logo-width: 10rem; // Magic Number
    $side-column-width: calc(
      (#{$default-page-layout-content-width-xl} - #{$logo-width} - var(--navbar-toggler-width) * 2) * 0.5
    );

    grid-template-areas:
      '. . . brand meta search .'
      '. . nav nav nav . .';
    grid-template-columns:
      1fr var(--navbar-toggler-width) $side-column-width $logo-width $side-column-width var(--navbar-toggler-width)
      1fr;

    .navigation-links {
      gap: $navbar-padding;
    }
  }
}
  • URL: /components/raw/navbar/_navbar.scss
  • Filesystem Path: components/03-organisms/navbar/_navbar.scss
  • Size: 14.1 KB
  • Content: 
    export default class MenuToggle extends HTMLElement {
  connectedCallback() {
    if (!this.button) {
      return
    }

    this.hidden = false
    this.button.type = 'button'
    this.button.addEventListener('click', () => this.toggle())
    this.toggle(false)
  }

  toggle(expanded = !(this.button.getAttribute('aria-expanded') === 'true')) {
    let button = this.button
    button.setAttribute('aria-expanded', expanded)
    this.navbar.setAttribute('data-expanded', expanded)
  }

  get button() {
    return this.querySelector('button')
  }

  get navbar() {
    return this.closest('nav')
  }
}
  • URL: /components/raw/navbar/menu-toggle.js
  • Filesystem Path: components/03-organisms/navbar/menu-toggle.js
  • Size: 605 Bytes
  • Content: 
    export default class Submenu extends HTMLElement {
  connectedCallback() {
    let summary = this.querySelector('summary')
    let ul = this.querySelector('ul')
    if (!summary && !ul) {
      return
    }

    // With out method of animating the collapsing/expanding of the menu, it is
    // necessary to wrap the content of the menu in a `<div>`
    this.innerHTML = `<button type="button" aria-expanded="false">${summary.innerHTML}</button><div>${ul.outerHTML}</div>`
    this.button.addEventListener('click', () => this.toggle())

    this.navigation.addEventListener('submenu-toggle', (ev) => {
      if (ev.detail && ev.detail.expanded && ev.target !== this.button) {
        if (this.button.getAttribute('aria-expanded') === 'true') {
          this.toggle(false)
        }
      }
    })
    this.toggle(false)
  }

  toggle(expanded = !(this.button.getAttribute('aria-expanded') === 'true')) {
    let button = this.button
    button.setAttribute('aria-expanded', expanded)
    button.dispatchEvent(new CustomEvent('submenu-toggle', { detail: { expanded }, bubbles: true }))
  }

  get navigation() {
    return this.closest('ul')
  }

  get button() {
    return this.querySelector('button')
  }

  get div() {
    return this.querySelector('div')
  }

  get ul() {
    return this.querySelector('ul')
  }
}
  • URL: /components/raw/navbar/submenu.js
  • Filesystem Path: components/03-organisms/navbar/submenu.js
  • Size: 1.3 KB

Navbar V2

This version of the INNOQ navbar has been built from the ground up with accessibility in mind. The HTML structure for the navigation bar was tested with a screenreader before the actual implementation with HTML, CSS and JavaScript was begun.

The tests for the navbar can be found here. Many thanks to Andreas Maier for his support with the testing.

This navbar was built using progressive enhancement. Each layer adds specific functionality and improves the component without removing necessary functionality. The following sections describe the design decisions that were made in each layer.

HTML: Providing the base functionality

The navigation consists of an unordered list (<ul>) of elements containing either a link (<a>) to a page or a <details> disclosure widget containing an unordered list of links representing the submenu for that specific topic. At the HTML layer, we also add a skip link before the navigation region in order to allow a keyboard user to spring directly to the main content area. For the INNOQ logo image and search icon, we add a <span> including a textual label to ensure that these links are usable even when CSS is not available.

We also have tried to ensure that the order of the items is intuitive when navigating with the keyboard. For instance, the main navigation topics preceed the list of links for changing the language within the HTML DOM. If and when the logical order of the navigational items differs from the visual order prescribed by the design, we can change the order using CSS in the next step.

The first version of the INNOQ Navbar included both a link to a topic page and a toggle button which disclosed a submenu of options. The content of the topic page was virtually identical to the list of links provided by the submenu. In accessibility testing, this construct was found to be confusing because both the link and the toggle button appear as interactive elements in the accessibility tree (with almost identical functionality). This finding was in alignment with other user feedback -- when clicking on a link in the navbar, users expected a submenu dropdown to open and were surprised when they instead navigated to a completely different page. For these reasons, the link to the topic page was completely removed from the navbar.

The decision to wrap the submenu links inside of a <details> disclosure widget is unconventional because usually a Disclosure Navigation Menu is implemented using HTML <button> elements with an aria-expanded attribute corresponding to whether or not the submenu is expanded or collapsed. However, the <details> element provides a similar functionality out-of-the-box and is also exposed to assistive technologies in a way that is intuitive to use.

Moreover, using the <details> element provides a valuable function to users who do not have JavaScript activated or for whom JavaScript does not work, namely it hides a (theoretically) long submenu until the user has indicated that they are interested in viewing it. This also should improve the usability of the HTML only version of the site for users with cognitive difficulties by making it easier to find the actual content of the page (the user no longer has to scroll past a large list of links in order to reach the main content) and by reducing the amount of visible information on a page that the user needs to process before making a decision about what they want to do.

At the HTML layer, we also add a few ARIA roles and attributes in order to improve the accessibility of the component. These include:

  • Each unordered list of links has an aria-label attribute to let assistive technologies know what the list contains (e.g. the list of links for the submenu "Services" will be labelled Services submenu).
  • The link to the current page in the navigation is marked with an aria-current="page" attribute.
  • The link to the current language that is selected for the site is marked with an aria-current="true" attribute.
  • We add a role="list" attribute to all navigation lists. This actually duplicates the default role of the list, but it is a fix to ensure that the list is still exposed as a list to assistive technologies even when we remove the list styling and change the display property. See: https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html

CSS: Adding the design

The CSS layer adds the INNOQ corporate design on top of the HTML bones of the navbar. The navbar was developed using a mobile-first approach to ensure that it works for any given viewport and device.

We hide the skip link using CSS but ensure that it is shown to keyboard users by disclosing it upon focus. We also visually hide the <span> labels that we added to the INNOQ logo and search icons.

We ensure the navbar is accessible for keyboard users by adding clear focus styles to the interactive elements. This is always the default, although we do use the absense of the focus-visible pseudo-class where supported to identify user agents which do not require a focus ring (e.g. when a user is navigating using a mouse) and then remove the focus style.

We also ensure that the navbar is accessible for user agents with a forced-colors mode. Our focus style uses a combination of the border and outline property in order to draw a two-colored ring around an interactive element. In order to reduce layout shift, all interactive elements have a transparent border by default, but we remove it when forced-colors are active so that it doesn't show up everywhere. We also add a small margin around the interactive elements to ensure that the focus ring is correctly shown. We also determined that the search icon and INNOQ logo are not consistently shown when a forced-colors mode is activated, because we no longer control the color of the background of the navbar. For this reason, we display the <span> labels for these images when forced-colors mode is activated, even though these are visually hidden for other user agents.

JavaScript: Adding enhancements

The navbar includes two JavaScript components for enhancing the navbar.

By default, on smaller viewports the main navigation topics will always be visible and vertically stacked. When JavaScript is activated, the <menu-toggle> component will reveal a toggle button that can be used to expand and collapse the navbar. The non-JavaScript version does take up some vertical real estate, but because the desired layout differs quite a bit from what a <details> element offers and because the main navigation only includes six main navigation items, the extra JavaScript that would have been required to progressively enhance the <details> element wasn't deemed to be worth it.

The <sub-menu> component wraps around the <details> element containing the submenu and progressively enhances it to replace the <details> element with the more "conventional" toggle button which then expands and collapses the menu. This enhancement is primarily because we then have more control over the HTML DOM and can expand the menu on larger viewports when hovering over the toggle button which is a behavior that users will expect. It also makes it possible to add an animation for collapsing and expanding the menus.

Both of these toggle components use the same approach for animating the collapsing and expanding of the content. However, since animation on websites can trigger discomfort for certain user groups, we only activate the animations if the user has specified no preference for prefers-reduced-motion.