Description Main Navigation
The Main Navigation appears always visible on top of every side and allows the user to reach easily almost every important side or information.
Several visible and hidden areas structure the Main Navigation
- Logo
- Meta navigation
- "Cockpit" navigation (buttons)
- Main menu (navbar)
- Flyout menu
- "Burger" menu
The logo and the cockpit navigation buttons (if alvailable*) are always visible on all "screen" devices (and viewport widths). Depending on device or viewport width the meta navigation, main navigation and burger menu may be hidden or visible while the flyout menu is always hidden and only appears after clicking some navigation item in the main menu.
The logo usually refers to the homepage and also marks the website with the brand.
The "cockpit" navigation buttons open topmost modal flyouts while pushing down the rest of the the page. They provide opportunities to globally search the website or to switch language or countrybased website (with the so called language picker).
*) Cockpit navigation availability depends on requirements for website, microsite or landingpage (except for burger menu which may be assumed as part of the cockpit navigation but is always available on small viewports).
Depending on the device (or the viewport width) the main menu navbar and the meta navigation are hidden and a burger menu is shown in the cockpit navigation although tapping the burger menu will reveal the main menu and meta navigation. A further click let "fly-in" the next level navigation, which in fact correlates to the flyout menu on larger devices with wider viewport widths.
Vice versa on wider screens or viewports the burger menu is hidden and main menu and meta navigation are shown (see below).
All pages in the CMS will appear in the main menu and the levels below – the flyout menu – unless explicitly stated different (e. g. 'Hide in navigation') and provided they're created at the common structure.
Meta navigation and logo may be edited in the header file, which is part of the _Config file (neighboured to the homepage in the navigation root).
The flyout menu on the wide viewports (as well as the opened burger menu navigation on small viewports) consists of:
- navigation category items
- secondary navigation (headline + hyperlink)
- optional highlight teaser ("Im Fokus")
- breadcrumb
- close button
All navigation category items (like 'products' or 'industries') show a squared thumbnail that has to be maintained at the appropriate page properties tab ('thumbnail').
For 'product categories' and 'products' only use cropped product stills for the thumbnail (photography or 3d renderings including reflections and mirroring but also alpha chanel transparency),
for 'industry categories' and 'company categories' "real life" photography is intended.
At last, white graphical icons should be taken for 'applications', 'manuals' or for 'newsroom category' thumbnails.
Node-pages in the main menu without a direct descent to a content site and navigation category items without a direct descent won't resign an arrow indicator. Direct deeplinks to a content show an indicator icon (rightside arrow) behind the linkage while navigation categories with external links to highlight microsites are displayed with arrow-up indicator icons.
The highlight teasers can optionally being set and configurated on node-pages' properties at the "Teaser Highlight" tab.