Core Framework – Top Navigation v1.0.1 – Documentation
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 white section of the top navigation, which includes the brand logo and claim, is a variation of the
Core Framework's standard white header. It introduces the page-header--white--composite class,
along with a few minor markup changes.
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.
When the tab navigation is active, first-level navigation items are shown as tabs in the orange 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).
Tabs can be highlighted with the active class to give users a general idea
about their whereabouts.
Top navigation layers come in two sizes: small and large. Large layers will span the whole width of the top navigation,
while small layers are just wide enough for a single link list.
Small layers are by default left-aligned. To align a layer to the right edge of the tab, use the
Since the top navigation has flexible dimensions depending on display size, layers may need to be right-aligned
only some of the time.
To have layers aligned on demand, set the topnavigation__hover-tabs--self-aligned class
on the respective tab list. The required script will be run as part of IS24.core.extensions.topnavigation.init.
The content of a layer is structured differently depending on the layer's size.
Small layers need only the topnavigation__hover-layer__navigation-wrapper
wrapper element, which takes care of spacing.
Large layers have a slightly more complex structure to allow for multiple link list blocks, teasers, and equally
sized content columns.
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)
A tab decorator icon (topnavigation__sso-login__tab-decorator)
Also, the classes sso-login and sso-login__user-name serve as handles for the log-in script.
Reduced Account Tab
On small displays, the account tab may be stripped of its label and the user name to save space.
To do so, apply the class topnavigation__hover-tabs__label--reduced to the label.
The account tab on the right 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.
To initialize the top navigation logic (including the slide-in behavior and support for touch interfaces),
Note: If you use the CMS header snippet, this is already taken care of.
“Powered by” Logo
The powered-by logo in the top right hand corner is absolutely positioned so that it can be placed
low in the document tree.
Place it within a corporate-powered-by-container element
to give it a proper positioning reference.
Note: You don't need to worry about the wrapper if you get your header markup from the CMS. The snippet brings its own