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

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.

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