Core Framework – Top Navigation v3.0.19 – Documentation
Top Navigation
The global top navigation is ImmobilienScout24's central navigation hub. It links to all of the most relevant product and content pages
and provides access to the user's account area.
The header configuration is centrally managed within the CMS,
so if you wish to use the top navigation in your pages, you should include it by way of a CMS content snippet.
(For more information on how to do that, please refer to the Wiki or bribe your CMS team with shiny things.)
See the Change Log to find out what's changed from previous versions.
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.
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.
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.)
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.)
<ulclass="topnavigation__level--1 topnavigation__hover-tabs"><li><spanclass="topnavigation__level--1__label topnavigation__hover-tabs__label">
Full-width
</span><divclass="topnavigation__level--2 topnavigation__hover-layer font-s">
This layer is full-width by default.
</div></li><li><spanclass="topnavigation__level--1__label topnavigation__hover-tabs__label">
Right-aligned
</span><divclass="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>
<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
<ulclass="topnavigation__level--1 topnavigation__hover-tabs"><li><spanclass="topnavigation__level--1__label topnavigation__hover-tabs__label">
A layer
</span><divclass="topnavigation__level--2 topnavigation__hover-layer font-s"><divclass="topnavigation__hover-layer__navigation-wrapper"><ulclass="icon-arrow list-spacing"><li><ahref="#">A couple</a></li><li><ahref="#">of entries</a></li><li><ahref="#">in a single</a></li><li><ahref="#">link list</a></li></ul></div></div></li></ul>
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.)
<divclass="topnavigation__overlay--account"><ulclass="topnavigation__hover-tabs topnavigation__sso-login sso-login"><li><ahref="#"class="topnavigation__level--1__label topnavigation__hover-tabs__label topnavigation__overlay--account__hide"><divclass="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
--><spanclass="topnavigation__sso-login__label-text-wrapper"><spanclass="topnavigation__sso-login__welcome-message font-ellipsis"><spanclass="sso-login__user-name"><spanclass="sso-login__user-name">Anmelden</span></span></span><spanclass="block">Mein Konto</span></span></a><divclass="topnavigation__level--2 topnavigation__hover-layer topnavigation__hover-layer--right-aligned font-s"></div></li></ul></div>
<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>
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.)
<ulclass="topnavigation__hover-tabs topnavigation__sso-login sso-login"><li><ahref="#"class="topnavigation__level--1__label topnavigation__hover-tabs__label topnavigation__overlay--account__hide"><divclass="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
--><spanclass="topnavigation__sso-login__label-text-wrapper"><spanclass="topnavigation__sso-login__welcome-message font-ellipsis"><spanclass="sso-login__user-name"><spanclass="sso-login__user-name">Anmelden</span></span></span><spanclass="block">Mein Konto</span></span></a></li></ul>
<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>
<ulclass="topnavigation__hover-tabs topnavigation__sso-login sso-login sso-login--show-avatar"><li><ahref="#"class="topnavigation__level--1__label topnavigation__hover-tabs__label topnavigation__overlay--account__hide"><divclass="topnavigation__sso-login__user-avatar"><imgalt="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
--><spanclass="topnavigation__sso-login__label-text-wrapper"><spanclass="topnavigation__sso-login__welcome-message font-ellipsis"><spanclass="sso-login__user-name">Anmelden</span></span><spanclass="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>
<ulclass="topnavigation__hover-tabs topnavigation__sso-login sso-login sso-login--show-avatar sso-login--logged-in"><li><aclass="topnavigation__level--1__label topnavigation__hover-tabs__label topnavigation__overlay--account__hide"href="#"><divclass="topnavigation__sso-login__user-avatar"><imgalt="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
--><spanclass="topnavigation__sso-login__label-text-wrapper"><spanclass="topnavigation__sso-login__welcome-message font-ellipsis"><spanclass="sso-login__user-name"><spanclass="sso-login__user-name">Herzog Frosch von Unkenberg</span></span></span><spanclass="topnavigation__notification topnavigation__notification--account-tab-label topnavigation-last-search-notification"style="display:inline-block;">1</span><spanclass="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>
<ulclass="topnavigation__hover-tabs topnavigation__sso-login sso-login sso-login--show-avatar sso-login--logged-in"><liclass="active"><aclass="topnavigation__level--1__label topnavigation__hover-tabs__label topnavigation__overlay--account__hide"href="#"><divclass="topnavigation__sso-login__user-avatar"><imgalt="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
--><spanclass="topnavigation__sso-login__label-text-wrapper"><spanclass="topnavigation__sso-login__welcome-message font-ellipsis"><spanclass="sso-login__user-name"><spanclass="sso-login__user-name">Herzog Frosch von Unkenberg</span></span></span><spanclass="topnavigation__notification topnavigation__notification--account-tab-label topnavigation-last-search-notification"style="display:inline-block;">1</span><spanclass="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>
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.