Top Navigation - Top Navigation Documentation

Complete Sample Markup

Complete example of a top navigation

<header class="page-header" role="banner">
  <div class="content-wrapper grid grid-flex grid-fill-rows">
    <div class="page-header__content page-header__logo-container grid-item grid-align-center grid-item-fixed-width">
      <a href="index.html" title="ImmobilienScout24" aria-label="ImmobilienScout24" class="page-header__logo">
        <img src="../../img/logo/immobilienscout24.svg" alt="ImmobilienScout24"
             onerror="this.src='../../img/logo/immobilienscout24.png';this.onerror=null;" />
      </a>
    </div>
    <div class="page-header__content grid-item grid-align-center grid-item-fixed-width grid-justify-end order-two-down">
      <a href="#" class="topnavigation__overlay-trigger--account vertical-center-container">
        <div class="topnavigation__sso-login__user-avatar">
          <img alt="Placeholder" src="../img/topnavigation/log-in/avatar_placeholder_74x74.png" />
        </div><!-- this comment is here to eat up the white space between two inline-block elements
       --><span class="topnavigation__sso-login__label-text-wrapper vertical-center">
          <span class="sso-login__user-name block font-ellipsis">Anmelden</span>
          <span class="block">Mein Konto</span>
        </span>
      </a>
      <div class="topnavigation__overlay--account">
        <ul class="topnavigation__level--1 topnavigation__hover-tabs topnavigation__hover-tabs--small-layers topnavigation__slide-in--show-level-2 topnavigation__sso-login sso-login sso-login--show-avatar sso-login--logged-in">
          <li>
            <a class="topnavigation__level--1__label topnavigation__hover-tabs__label topnavigation__overlay--account__hide" href="#">
              <div class="topnavigation__sso-login__user-avatar">
                <img alt="Herzog Frosch von Unkenberg" src="../img/topnavigation/log-in/frog_80x80.jpg" />
              </div><!-- this comment is here to eat up the white space between two inline-block elements
              --><span class="topnavigation__sso-login__label-text-wrapper">
                <span class="topnavigation__sso-login__welcome-message font-ellipsis">
                  <span class="sso-login__user-name">
                    <span class="sso-login__user-name">Herzog Frosch von Unkenberg</span>
                  </span>
                </span>
                <span class="topnavigation__notification topnavigation__notification--account-tab-label topnavigation-last-search-notification" style="display: inline-block;">1</span>
                <span class="block">Mein Konto</span>
              </span>
            </a>

            <div class="topnavigation__level--2 topnavigation__hover-layer topnavigation__hover-layer--right-aligned font-s">
              <div class="topnavigation__hover-layer__navigation-wrapper">
                <ul class="topnavigation__sso-login__link-list--logged-out list-spacing padding-bottom-none" data-cms-qa="is24-cms-loginbox-logged-out">
                  <li class="border-bottom padding-bottom">
                    Persönliche Services nutzen und schneller ans Ziel kommen.
                    <a href="#" class="margin-vertical-s button-primary button-orange one-whole" id="link_loginLinkInternal">Jetzt anmelden</a>
                    Neu hier?
                    <a href="#" class="sso-login-link link-underline">Jetzt registrieren</a>
                  </li>
                </ul>
                <ul class="topnavigation__sso-login__link-list icon-arrow list-spacing">
                  <li>
                    <a href="#" class="topnavigation-overlay-touch-area">Übersicht</a>
                  </li>
                  <li>
                    <a href="#" class="topnavigation-overlay-touch-area">Merkzettel</a>
                  </li>
                  <li>
                    <a href="#" class="topnavigation-overlay-touch-area">Gespeicherte Suchen</a>
                  </li>
                  <li>
                    <a href="#" class="topnavigation-overlay-touch-area">Persönliches Profil</a>
                  </li>
                  <li>
                    <a href="#" class="topnavigation-overlay-touch-area">Immobilienanzeigen</a>
                  </li>
                  <li>
                    <a href="#" class="topnavigation-overlay-touch-area">EigentümerPlus</a>
                  </li>
                </ul>
                <ul class="topnavigation__sso-login__link-list--logged-in list-spacing padding-top-none" data-cms-qa="is24-cms-loginbox-logged-in">
                  <li class="border-top padding-top align-center">
                    <a href="#" class="sso-login-link link-underline">Abmelden</a>
                  </li>
                </ul>
              </div>
            </div>
          </li>
        </ul><!-- .topnavigation__sso-login -->
      </div>

    </div>
    <div class="page-header__content grid-item grid-align-center grid-item-fixed-width grid-justify-end order-one-down">
      <span class="top-navigation__anbieten-button-teaser">
        <a href="//www.immobilienscout24.de/anbieten/" class="button button-lightblue top-navigation__anbieten-button align-middle">
          Anzeige schalten
        </a>
      </span>
    </div>
    <nav class="topnavigation grid-item" role="navigation">
      <a href="#" class="topnavigation__overlay-trigger--menu" aria-label="Navigation anzeigen/verstecken">
        <div class="topnavigation__burger"><span></span><span></span><span></span><span></span></div>
      </a>
      <div class="topnavigation__overlay--menu">
        <ul class="topnavigation__level--1 topnavigation__hover-tabs topnavigation__hover-tabs--large-layers">
          <li>
            <span class="topnavigation__level--1__label topnavigation__hover-tabs__label">
              <span class="fa fa-search topnavigation__icon"></span><!-- prevent whitespace here! -->Suchen</span>
            <div class="topnavigation__level--2 topnavigation__hover-layer">
              <ul class="topnavigation__hover-layer__navigation-wrapper">
                <li class="grid-item desk-one-fifth">
                  <span class="topnavigation__level--2__label">Wohnen Wohnen Wohnen Wohnen Wohnen </span>
                  <div class="topnavigation__level--3">
                    <div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
                    <h3>Wohnen Wohnen Wohnen Wohnen Wohnen </h3>
                    <ul>
                      <li><a href="http://heise.de">Mietwohnungen Mietwohnungen Mietwohnungen Mietwohnungen </a></li>
                      <li><a href="http://gogl.de">Eigentumswohnungen</a></li>
                      <li><a href="#">Häuser mieten</a></li>
                      <li><a href="#">Häuser kaufen</a></li>
                      <li><a href="#">SCHUFA Bonitätscheck</a></li>
                      <li><a href="#">Veröffentlichte Profile</a></li>
                      <li><a href="#">Smart Home</a></li>
                      <li><a href="#">Hilfe zur Wohnungssuche</a></li>
                      <li><a href="#">Letzter Navi-Punkt!</a></li>
                    </ul>
                  </div>
                </li>

                <li class="grid-item desk-one-fifth">
                  <span class="topnavigation__level--2__label">Gewerbe</span>
                  <div class="topnavigation__level--3">
                    <div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
                    <h3>Gewerbe</h3>
                    <ul>
                      <li><a href="#">Mietwohnungen</a></li>
                      <li><a href="#">Eigentumswohnungen</a></li>
                      <li><a href="#">Häuser mieten</a></li>
                      <li><a href="#">Häuser kaufen</a></li>
                      <li><a href="#">SCHUFA Bonitätscheck</a></li>
                      <li><a href="#">Veröffentlichte Profile</a></li>
                      <li><a href="#">Smart Home</a></li>
                      <li><a href="#">Hilfe zur Wohnungssuche</a></li>
                      <li><a href="#">Letzter Navi-Punkt!</a></li>
                    </ul>
                  </div>
                </li>

                <li class="grid-item desk-one-fifth">
                  <span class="topnavigation__level--2__label">Neubau</span>
                  <div class="topnavigation__level--3">
                    <div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
                    <h3>Neubau</h3>
                    <ul>
                      <li><a href="#">Mietwohnungen</a></li>
                      <li><a href="#">Eigentumswohnungen</a></li>
                      <li><a href="#">Häuser mieten</a></li>
                    </ul>
                  </div>

                  <span class="topnavigation__level--2__label">Bauen</span>
                  <div class="topnavigation__level--3">
                    <div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
                    <h3>Bauen</h3>
                    <ul>
                      <li><a href="#">Mietwohnungen</a></li>
                      <li><a href="#">Eigentumswohnungen</a></li>
                    </ul>
                  </div>
                </li>

                <li class="grid-item desk-one-fifth">
                  <span class="topnavigation__level--2__label">Services</span>
                  <div class="topnavigation__level--3">
                    <div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
                    <h3>Services</h3>
                    <ul>
                      <li><a href="#">Mietwohnungen</a></li>
                      <li><a href="#">Eigentumswohnungen</a></li>
                      <li><a href="#">Häuser mieten</a></li>
                      <li><a href="#">Häuser kaufen</a></li>
                      <li><a href="#">SCHUFA Bonitätscheck</a></li>
                      <li><a href="#">Veröffentlichte Profile</a></li>
                      <li><a href="#">Smart Home</a></li>
                      <li><a href="#">Hilfe zur Wohnungssuche</a></li>
                      <li><a href="#">Letzter Navi-Punkt!</a></li>
                    </ul>
                  </div>
                </li>

                <li class="grid-item desk-one-fifth">
                  <span class="topnavigation__level--2__label">Ratgeber</span>
                  <div class="topnavigation__level--3">
                    <div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
                    <h3>Ratgeber</h3>
                    <ul>
                      <li><a href="#">Mietwohnungen</a></li>
                      <li><a href="#">Eigentumswohnungen</a></li>
                      <li><a href="#">Häuser mieten</a></li>
                      <li><a href="#">Häuser kaufen</a></li>
                      <li><a href="#">SCHUFA Bonitätscheck</a></li>
                      <li><a href="#">Veröffentlichte Profile</a></li>
                      <li><a href="#">Smart Home</a></li>
                      <li><a href="#">Hilfe zur Wohnungssuche</a></li>
                      <li><a href="#">Letzter Navi-Punkt!</a></li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
          </li>

          <li>
            <span class="topnavigation__level--1__label topnavigation__hover-tabs__label">
              <span class="fa fa-bullhorn topnavigation__icon"></span><!-- prevent whitespace here! -->Anbieten</span>
            <div class="topnavigation__level--2 topnavigation__hover-layer">
              <ul class="topnavigation__hover-layer__navigation-wrapper">
                <li class="grid-item desk-one-fourth">
                  <span class="topnavigation__level--2__label">Jetzt inserieren</span>
                  <div class="topnavigation__level--3">
                    <div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
                    <h3>Jetzt inserieren</h3>
                    <ul>
                      <li><a href="#"><button class="button-primary">Anzeige schalten</button></a></li>
                    </ul>
                  </div>

                  <span class="topnavigation__level--2__label">Makler finden</span>
                  <div class="topnavigation__level--3">
                    <div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
                    <h3>Makler finden</h3>
                    <ul>
                      <li><a href="#"><button class="button-secondary">Makler finden</button></a></li>
                    </ul>
                  </div>
                </li>

                <li class="grid-item desk-one-fourth">
                  <span class="topnavigation__level--2__label">Mieter finden</span>
                  <div class="topnavigation__level--3">
                    <div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
                    <h3>Mieter finden</h3>
                    <ul>
                      <li><a href="#">Mietwohnungen</a></li>
                      <li><a href="#">Eigentumswohnungen</a></li>
                      <li><a href="#">Häuser mieten</a></li>
                      <li><a href="#">Häuser kaufen</a></li>
                      <li><a href="#">SCHUFA Bonitätscheck</a></li>
                      <li><a href="#">Veröffentlichte Profile</a></li>
                    </ul>
                  </div>
                </li>

                <li class="grid-item desk-one-fourth">
                  <span class="topnavigation__level--2__label">Käufer finden</span>
                  <div class="topnavigation__level--3">
                    <div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
                    <h3>Käufer finden</h3>
                    <ul>
                      <li><a href="#">Mietwohnungen</a></li>
                      <li><a href="#">Eigentumswohnungen</a></li>
                      <li><a href="#">Häuser mieten</a></li>
                      <li><a href="#">Häuser kaufen</a></li>
                      <li><a href="#">SCHUFA Bonitätscheck</a></li>
                    </ul>
                  </div>
                </li>

                <li class="grid-item desk-one-fourth">
                  <span class="topnavigation__level--2__label">Ratgeber</span>
                  <div class="topnavigation__level--3">
                    <div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
                    <h3>Ratgeber</h3>
                    <ul>
                      <li><a href="#">Mietwohnungen</a></li>
                      <li><a href="#">Eigentumswohnungen</a></li>
                      <li><a href="#">Häuser mieten</a></li>
                      <li><a href="#">Häuser kaufen</a></li>
                      <li><a href="#">SCHUFA Bonitätscheck</a></li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
          </li>

          <li>
            <span class="topnavigation__level--1__label topnavigation__hover-tabs__label">
              <span class="fa fa-calculator topnavigation__icon"></span><!-- prevent whitespace here! -->Finanzieren</span>
            <div class="topnavigation__level--2 topnavigation__hover-layer">
              <ul class="topnavigation__hover-layer__navigation-wrapper">

                <li class="grid-item desk-one-fourth">
                  <div class="topnavigation__level--3">
                    <ul>
                      <li><a href="#"><button class="button-primary">Jetzt vergleichen</button></a></li>
                    </ul>
                  </div>
                </li>
                <li class="grid-item desk-one-fourth">
                  <span class="topnavigation__level--2__label">Baufinanzierung</span>
                  <div class="topnavigation__level--3">
                    <div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
                    <h3>Baufinanzierung</h3>
                    <ul>
                      <li><a href="#">Anzeige aufgeben</a></li>
                      <li><a href="#">Nachmieter suchen</a></li>
                      <li><a href="#">Makler finden</a></li>
                    </ul>
                  </div>
                </li>
                <li class="grid-item desk-one-fourth">
                  <span class="topnavigation__level--2__label">Anschlussfinanzierung</span>
                  <div class="topnavigation__level--3">
                    <div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
                    <h3>Anschlussfinanzierung</h3>
                    <ul>
                      <li><a href="#">Anzeige aufgeben</a></li>
                      <li><a href="#">Nachmieter suchen</a></li>
                    </ul>
                  </div>
                </li>
                <li class="grid-item desk-one-fourth">
                  <span class="topnavigation__level--2__label">Ratgeber</span>
                  <div class="topnavigation__level--3">
                    <div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
                    <h3>Ratgeber</h3>
                    <ul>
                      <li><a href="#">Anzeige aufgeben</a></li>
                      <li><a href="#">Nachmieter suchen</a></li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
          </li>

          <li>
            <span class="topnavigation__level--1__label topnavigation__hover-tabs__label">
              <span class="fa fa-calculator topnavigation__icon"></span><!-- prevent whitespace here! -->Umziehen</span>
            <div class="topnavigation__level--2 topnavigation__hover-layer">
              <ul class="topnavigation__hover-layer__navigation-wrapper">

                <li class="grid-item desk-one-fourth">
                  <div class="topnavigation__level--3">
                    <ul>
                      <li><a href="#"><button class="button-primary">Jetzt vergleichen</button></a></li>
                    </ul>
                  </div>
                </li>
                <li class="grid-item desk-one-fourth">
                  <span class="topnavigation__level--2__label">Umzugsunternehmen</span>
                  <div class="topnavigation__level--3">
                    <div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
                    <h3>Umzugsunternehmen</h3>
                    <ul>
                      <li><a href="#">Anzeige aufgeben</a></li>
                      <li><a href="#">Nachmieter suchen</a></li>
                      <li><a href="#">Makler finden</a></li>
                    </ul>
                  </div>
                </li>
                <li class="grid-item desk-one-fourth">
                  <span class="topnavigation__level--2__label">Transporter</span>
                  <div class="topnavigation__level--3">
                    <div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
                    <h3>Transporter</h3>
                    <ul>
                      <li><a href="#">Anzeige aufgeben</a></li>
                      <li><a href="#">Nachmieter suchen</a></li>
                    </ul>
                  </div>
                </li>
                <li class="grid-item desk-one-fourth">
                  <span class="topnavigation__level--2__label">Ratgeber</span>
                  <div class="topnavigation__level--3">
                    <div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
                    <h3>Ratgeber</h3>
                    <ul>
                      <li><a href="#">Anzeige aufgeben</a></li>
                      <li><a href="#">Nachmieter suchen</a></li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
          </li>

          <li>
            <span class="topnavigation__level--1__label topnavigation__hover-tabs__label">
              <span class="fa fa-calculator topnavigation__icon"></span><!-- prevent whitespace here! -->Markt &amp; Preise</span>
            <div class="topnavigation__level--2 topnavigation__hover-layer">
              <ul class="topnavigation__hover-layer__navigation-wrapper">

                <li class="grid-item desk-one-fourth">
                  <div class="topnavigation__level--3">
                    <ul>
                      <li><a href="#"><button class="button-primary">Bewertung starten</button></a></li>
                    </ul>
                  </div>
                </li>
                <li class="grid-item desk-one-fourth">
                  <span class="topnavigation__level--2__label">Immobilie bewerten</span>
                  <div class="topnavigation__level--3">
                    <div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
                    <h3>Immobilie bewerten</h3>
                    <ul>
                      <li><a href="#">Anzeige aufgeben</a></li>
                      <li><a href="#">Nachmieter suchen</a></li>
                      <li><a href="#">Makler finden</a></li>
                    </ul>
                  </div>
                </li>
                <li class="grid-item desk-one-fourth">
                  <span class="topnavigation__level--2__label">Miet-/Kaufpreise</span>
                  <div class="topnavigation__level--3">
                    <div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
                    <h3>Miet-/Kaufpreise</h3>
                    <ul>
                      <li><a href="#">Anzeige aufgeben</a></li>
                      <li><a href="#">Nachmieter suchen</a></li>
                    </ul>
                  </div>
                </li>
                <li class="grid-item desk-one-fourth">
                  <span class="topnavigation__level--2__label">Ratgeber</span>
                  <div class="topnavigation__level--3">
                    <div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
                    <h3>Ratgeber</h3>
                    <ul>
                      <li><a href="#">Anzeige aufgeben</a></li>
                      <li><a href="#">Nachmieter suchen</a></li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
          </li>
        </ul><!-- .topnavigation__level- -1 -->
      </div><!-- .topnavigation__overlay- -menu -->
    </nav><!-- .topnavigation -->
    <script type="text/javascript">
      document.addEventListener("DOMContentLoaded", function () {
        if (window.IS24 && IS24.core && IS24.core.extensions && IS24.core.extensions.topnavigation) {
          IS24.core.extensions.topnavigation.init();
        }
      });
    </script>

    <!-- placeholder to fill the grid if no navigation is present -->
    <div class="grid-item"></div>
  </div>
</header>

CSS and JS Dependencies

The Top Navigation relies on the Core Framework in an arbitrary version, as well as the additional top navigation CSS and JS included in this package.

Note: If you are using the central CMS header, you won't need to include the core-topnavigation resources as they are already delivered as part of the header snippet.

Top Navigation CSS and JS inclusion

<link rel="stylesheet" href="//www.static-immobilienscout24.de/fro/core-topnavigation/3.0.16/css/core-topnavigation.min.css" />
<script src="//www.static-immobilienscout24.de/fro/core-topnavigation/3.0.16/js/core-topnavigation.min.js"></script>

Brand Header

The white section of the top navigation, which includes the brand logo and claim, is a variation of the Core Framework's standard white header.

The page-header__content class handles the positioning of the individual content blocks. You may float these elements to the right where necessary.

Top navigation brand header (Note that image URLs will differ in production.)

<header class="page-header" role="banner">
  <div class="content-wrapper">
    <div class="page-header__content vertical-center-container float-left">
      <a href="index.html" title="ImmobilienScout24" aria-label="ImmobilienScout24" class="page-header__logo vertical-center">
        <img src="../../img/logo/immobilienscout24.svg" alt="ImmobilienScout24"
             onerror="this.src='../../img/logo/immobilienscout24.png';this.onerror=null;" />
      </a>
    </div>
    <div class="page-header__content vertical-center-container float-right">
      <div class="vertical-center">
        <!-- account tab goes here -->
      </div>
    </div>
  </div>
</header>

Navigation Frame

The top navigation is wrapped in a topnavigation block, which in turn contains a content-wrapper element to get the navigation items aligned with the left and right margins of any other content sections.

Page structure for top navigation

<nav class="topnavigation">
    <div class="content-wrapper"></div>
</nav>

Navigation Levels

Navigation items are grouped into three levels. These levels are displayed differently depending on the navigation state.

Since both the tab navigation (for desktop) and the overlay navigation (for mobile) are based on the same DOM elements, you won't need to maintain two independent navigations.

Tab Navigation

When the tab navigation is active, first-level navigation items are shown as tabs in the bottom navigation bar. Second and third-level items are grouped under their respective tabs and will be shown when the user clicks or taps on a tab.

The tab navigation is composed of three main components:

The tab navigation list (topnavigation__hover-tabs),
the individual list elements, each with a tab label (topnavigation__hover-tabs__label),
and the tab layer (topnavigation__hover-layer).

Top navigation tabs (Other classes omitted for the sake of simplicity.)

<nav class="topnavigation">
    <div class="content-wrapper">
        <div class="topnavigation__overlay--menu">
            <ul class="topnavigation__hover-tabs">
                <li>
                    <a class="topnavigation__hover-tabs__label" href="#">Wohnen</a>
                    <div class="topnavigation__hover-layer">
                        <!-- Layer content -->
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>

Active Tabs

Tabs can be highlighted with the active class to give users a general idea about their whereabouts.

Active top navigation tab (Top navigation wrapper left out for the sake of simplicity.)

<ul class="topnavigation__hover-tabs">
    <li>
        <a class="topnavigation__hover-tabs__label" href="#">Inactive</a>
    </li>
    <li>
        <a class="topnavigation__hover-tabs__label topnavigation__menu-section--open" href="#">Active</a>
    </li>
    <li>
        <a class="topnavigation__hover-tabs__label" href="#">Inactive</a>
    </li>
</ul>

Layer Alignment

Layers are by default full-width. To align a layer to the right edge of the tab, use the topnavigation__hover-layer--right-aligned class.

Layers aligned to the left and to the right (Top navigation wrapper left out for the sake of simplicity.)

<ul class="topnavigation__level--1 topnavigation__hover-tabs">
    <li>
        <span class="topnavigation__level--1__label topnavigation__hover-tabs__label">
            Full-width
        </span>
        <div class="topnavigation__level--2 topnavigation__hover-layer font-s">
            This layer is full-width by default.
        </div>
    </li>
    <li>
        <span class="topnavigation__level--1__label topnavigation__hover-tabs__label">
            Right-aligned
        </span>
        <div class="topnavigation__level--2 topnavigation__hover-layer topnavigation__hover-layer--right-aligned font-s">
            This layer is aligned to the right, which comes in handy if there is not enough space on the right to fit the layer.
        </div>
    </li>
</ul>

Layer Content

Layers are made up of a topnavigation__hover-layer element, wrapped around a topnavigation__hover-layer__navigation-wrapper, which takes care of internal spacing.

Content structure for small and large layers

<ul class="topnavigation__level--1 topnavigation__hover-tabs">
    <li>
        <span class="topnavigation__level--1__label topnavigation__hover-tabs__label">
            A layer
        </span>
        <div class="topnavigation__level--2 topnavigation__hover-layer font-s">
            <div class="topnavigation__hover-layer__navigation-wrapper">
                <ul class="icon-arrow list-spacing">
                    <li><a href="#">A couple</a></li>
                    <li><a href="#">of entries</a></li>
                    <li><a href="#">in a single</a></li>
                    <li><a href="#">link list</a></li>
                </ul>
            </div>
        </div>
    </li>
</ul>

Account Tab

The account tab layout differs from ordinary tabs. Depending on configuration and log-in status, it may show a user image and a user name.

Account Tab Structure

The account tab contains a number of additional DOM elements.

A user image (topnavigation__sso-login__user-avatar)
A welcome message to the logged-in user (topnavigation__sso-login__welcome-message)

Also, the classes sso-login and sso-login__user-name serve as handles for the log-in script.

An account tab (Wrapper elements left out for the sake of simplicity.)

<div class="topnavigation__overlay--account">
    <ul class="topnavigation__hover-tabs topnavigation__sso-login sso-login">
        <li>
            <a href="#" class="topnavigation__level--1__label topnavigation__hover-tabs__label topnavigation__overlay--account__hide">
              <div class="topnavigation__sso-login__user-avatar" data-cms-qa="is24-login-avatar">
                <!-- user image goes here -->
              </div><!-- this comment is here to eat up the white space between two inline-block elements
              --><span class="topnavigation__sso-login__label-text-wrapper">
                <span class="topnavigation__sso-login__welcome-message font-ellipsis">
                  <span class="sso-login__user-name">
                    <span class="sso-login__user-name">Anmelden</span>
                  </span>
                </span>
                <span class="block">Mein Konto</span>
              </span>
            </a>

            <div class="topnavigation__level--2 topnavigation__hover-layer topnavigation__hover-layer--right-aligned font-s"></div>
        </li>
    </ul>
</div>

Log-in Status

The account tab is displayed differently depending on whether or not the user is logged in. The view is toggled with the sso-login--logged-in class on the surrounding list element.

Similarly, the sso-login--show-avatar class determines whether to show or hide the user avatar or placeholder image.

Login panel in logged-in and logged-out state (Wrapper elements left out for the sake of simplicity.)

<ul class="topnavigation__hover-tabs topnavigation__sso-login sso-login">
    <li>
        <a href="#" class="topnavigation__level--1__label topnavigation__hover-tabs__label topnavigation__overlay--account__hide">
          <div class="topnavigation__sso-login__user-avatar" data-cms-qa="is24-login-avatar">
            <!-- user image goes here -->
          </div><!-- this comment is here to eat up the white space between two inline-block elements
          --><span class="topnavigation__sso-login__label-text-wrapper">
            <span class="topnavigation__sso-login__welcome-message font-ellipsis">
              <span class="sso-login__user-name">
                <span class="sso-login__user-name">Anmelden</span>
              </span>
            </span>
            <span class="block">Mein Konto</span>
          </span>
        </a>

    </li>
</ul>

<ul class="topnavigation__hover-tabs topnavigation__sso-login sso-login sso-login--show-avatar">
    <li>
        <a href="#" class="topnavigation__level--1__label topnavigation__hover-tabs__label topnavigation__overlay--account__hide">
          <div class="topnavigation__sso-login__user-avatar">
            <img alt="Placeholder" src="../img/topnavigation/log-in/avatar_placeholder_74x74.png" />
          </div><!-- this comment is here to eat up the white space between two inline-block elements
          --><span class="topnavigation__sso-login__label-text-wrapper">
            <span class="topnavigation__sso-login__welcome-message font-ellipsis">
              <span class="sso-login__user-name">Anmelden</span>
            </span>
            <span class="block">Mein Konto</span>
          </span>
        </a>

    </li>
</ul>

<ul class="topnavigation__hover-tabs topnavigation__sso-login sso-login sso-login--show-avatar sso-login--logged-in">
    <li>
        <a class="topnavigation__level--1__label topnavigation__hover-tabs__label topnavigation__overlay--account__hide" href="#">
          <div class="topnavigation__sso-login__user-avatar">
            <img alt="Herzog Frosch von Unkenberg" src="../img/topnavigation/log-in/frog_80x80.jpg" />
          </div><!-- this comment is here to eat up the white space between two inline-block elements
          --><span class="topnavigation__sso-login__label-text-wrapper">
            <span class="topnavigation__sso-login__welcome-message font-ellipsis">
              <span class="sso-login__user-name">
                <span class="sso-login__user-name">Herzog Frosch von Unkenberg</span>
              </span>
            </span>
            <span class="topnavigation__notification topnavigation__notification--account-tab-label topnavigation-last-search-notification" style="display: inline-block;">1</span>
            <span class="block">Mein Konto</span>
          </span>
        </a>

    </li>
</ul>

<ul class="topnavigation__hover-tabs topnavigation__sso-login sso-login sso-login--show-avatar sso-login--logged-in">
    <li class="active">
        <a class="topnavigation__level--1__label topnavigation__hover-tabs__label topnavigation__overlay--account__hide" href="#">
          <div class="topnavigation__sso-login__user-avatar">
            <img alt="Herzog Frosch von Unkenberg" src="../img/topnavigation/log-in/frog_80x80.jpg" />
          </div><!-- this comment is here to eat up the white space between two inline-block elements
          --><span class="topnavigation__sso-login__label-text-wrapper">
            <span class="topnavigation__sso-login__welcome-message font-ellipsis">
              <span class="sso-login__user-name">
                <span class="sso-login__user-name">Herzog Frosch von Unkenberg</span>
              </span>
            </span>
            <span class="topnavigation__notification topnavigation__notification--account-tab-label topnavigation-last-search-notification" style="display: inline-block;">1</span>
            <span class="block">Mein Konto</span>
          </span>
        </a>

    </li>
</ul>

JavaScript

To initialize the top navigation logic (including the slide-in behavior and support for touch interfaces), call IS24.core.extensions.topnavigation.init.

Note: If you use the CMS header snippet, this is already taken care of.

if (window.IS24 && IS24.core && IS24.core.extensions && IS24.core.extensions.topnavigation) {
  IS24.core.extensions.topnavigation.init();
}