--- title: "Web Navigation" description: "The Web Navigation itself consists of three Parts. One is the Web Meta Navigation, one is the Web Toolbar Navigation, and another one is the Web Main Navigation." path: https://www.eonshowroom.eon.com/en/page-elements/new-web-navigation.html lastModified: 2026-09-22T10:33:20.684Z --- # Web Navigation # New Web Navigation [How to Configure](#how-to) ### Description The Web Navigation itself consists of three Parts. One is the Meta Navigation, one is the Toolbar Navigation, and another one is the Main Navigation. It can be used to configure a Navigation for the Needs of the Website. - Consists of Meta, Toolbar, and Main Navigation - It needs to be maintained as Experience Fragment - Toolbar Navigation can also contain Icon Links and Logo (but should not be placed in Primary and Toolbar Navigation at the same Time) - Main Navigation can contain Titles for Flyouts, as well as Icon Links and Logo - Flyout Navigation can be connected to Main Navigation via Navigation Flyout Experience Fragment [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/navigation-navigation-navigation--interactive) ### Inspirations [Check out Live Example of a Page with fully reduced Web Navigation and Footer](https://www.eonshowroom.eon.com/en/page-elements/page-reduced-footer-and-header.html) ### Usage Rules & Features ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/GettyImages-1040970776-2%3A16-9?fmt=webp) ## Navigation Training Videos [Watch the Video](https://www.eonshowroom.eon.com/en/aem-basics/video-trainings.html#navi) ##### Features - Consists of Web Meta, WebbToolbar, and Web Main Navigation - It needs to be maintained as Experience Fragment ##### Properties - Web Toolbar Navigation can also contain Icon Links, Language Switch, Partner Logo, and Logo (but should not be placed in Primary and Toolbar Navigation at the same Time) - Web Main Navigation can contain Titles for Flyouts, as well as Icon Links, Language Switch, Partner Logo, and Logo - Web Flyout Navigation can be connected to Main Navigation via Navigation Flyout Experience Fragment ##### Design - Web Navigation can also be used in a very reduced Format of a Header - Editors are very flexible on what they include in Web Navigation ##### In which Grid Columns does it fit? **Never put a Navigation in a Grid !**A Web Navigation needs to be maintained as Experience Fragment and loaded in to the Pages via FoundationNg Global Elements Config. [Read more about Experience Fragment Handling](https://www.eonshowroom.eon.com/en/aem-basics/experience-fragment-handling.html) [Read more about Configuration Pages](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages.html) ##### DO's - Configure Navigation to your Needs, as it is very flexible - Use "only on Desktop" Option of Web Main Navigation when having more than 2 Links to have Links in Burger Menu on Mobile Viewports - Use a Language Switch once on a Page, either in Web Toolbar or in Web Main Navigation ##### DONT's - Generally, it is not adviceable to use Web Meta Navigation, but if it is needed, it can be used - Do not add to many Links in Web Main Navigation, as it is in Responsibility of the Editor how many Links look good ## Configuration ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_4-1%3A3-1?fmt=webp-alpha) ### Create Experience Fragment At first, Editor needs to create an Experience Fragment in Experience Fragments Part. [Find out more about Experience Fragment Handling](https://www.eonshowroom.eon.com/en/aem-basics/experience-fragment-handling.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/new-web-navigation_composition%3A2-1?fmt=webp) digit 0 light Web Navigation Container ##### Navigation (including Flyouts) Experience Fragment / Config Page The Navigation consists of three Parts: - Meta Navigation - Toolbar Navigation - Main Navigation [Navigation in Showroom](https://www.eonshowroom.eon.com/en/page-elements/web-navigation.html) digit 1 light Web Meta Navigation ##### Meta Navigation Experience Fragment / Config Page Inside the Navigation Component, there are three Components. One of it is Meta Navigation. For Meta Navigation Editor can add Meta Navigation Links. [Navigation in Showroom](https://www.eonshowroom.eon.com/en/page-elements/web-navigation.html) digit 2 light Web Toolbar Navigation ##### Toolbar Navigation Experience Fragment / Config Page Toolbar Navigation can contain Icon Links and Logo. [Navigation in Showroom](https://www.eonshowroom.eon.com/en/page-elements/web-navigation.html) digit 3 light Web Main Navigation ##### Main Navigation Experience Fragment / Config Page Main Navigation can contain Titles for Flyouts or direct Links, as well as Icon Links and Logo. While Flyout Navigation can be connected to Main Navigation via Navigation Flyout Experience Fragment. [Navigation in Showroom](https://www.eonshowroom.eon.com/en/page-elements/web-navigation.html) ### Web Navigation Composition The Web Navigation (0) consists of three Parts: - Web Meta Navigation - Web Toolbar Navigation - Web Main Navigation ### Add Web Navigation Then, Editor needs to add Web Navigation Component inside the Experience Fragment. ![1. Add Web Navigation](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/new-web-navigation_add-1%3A1-1?fmt=webp) ![2. Added Web Navigation](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/new-web-navigation_add-2%3A2-1?fmt=webp) ![Maintain Web Navigation](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/new-web-navigation_general%3A1-1?fmt=webp) ### Maintain Web Navigation The Editor Dialog has 4 Checkboxes: 1. Hide Meta Navigation 2. Hide Toolbar Navigation 3. Hide Main Navigation 4. Activate Sticky Behaviour With the first 3 Checkboxes, Editor can hide or show different Parts of the Navigation, while using the last one de-/activates fixed Positioning and Sticky Behaviour. For Sticky Behaviour, Editor musr choose a Sticky Level. Sticky Level should be depending on what is the first Element visible inside the Web Navigation. ![Configure Web Meta Navigation](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/new-web-navigation_meta%3A1-1?fmt=webp) ### Configure Web Meta Navigation Inside the Web Navigation Component, there are three Components. One of it is Web Meta Navigation. For Web Meta Navigation, Editor can add Meta Navigation Links, each having Link Text and URL. Editor can add one or multiple Links, but it is adviceable to use Web Meta Navigation with at least a Minimum of two Links. Furthermore, Editor can choose Alignment of Web Meta Navigation between Left, Center, or Right. ### Configure Web Toolbar Navigation Inside the Navigation Component, there are three Components. One of it is Web Toolbar Navigation. In Editor Dialog of Web Toolbar Navigation two Tabs exist. - Logo Tab Editor can configure the Path towards the Logo File, the Link where a Click on the Logo should lead to, as well as a short Description. - Layout Tab Editor can configure a Revert Layout *(= Toolbar left and Logo right)*, a Logo Alignment *(left, center, right inside it's Column)*, the hole Toolbar Alignment *(left, center, right)*, as well as a Dominant Column *(None, Toolbar, Logo)*. ![Configure Web Toolbar Navigation - Logo Tab](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/new-web-navigation_toolbar-logo%3A1-1?fmt=webp) ![Configure Web Toolbar Navigation - Layout Tab](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/new-web-navigation_toolbar-layout%3A1-1?fmt=webp) ### Configure Web Main Navigation Inside the Web Navigation Component, there are three Components. One of it is Web Main Navigation. In Editor Dialog of Main Navigation three Tabs exist. - Links Tab - Logo Tab - Layout Tab ![Configure Web Main Navigation - Links Tab](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/new-web-navigation_main-links%3A3-4?fmt=webp) ##### Links Tab of Web Main Navigation Editor can configure one or multiple Web Main Navigation Links. Each Link needs at least a Link Text, which is the displayed Name, as well as a Link URL. A Link URL is a Path to a Page or a [Web Navigation Flyout Experience Fragment](#flyout). That means, this is the Place, where Editor can add the Path of the Experience Fragment that is created as Web Flyout for this Link. Beside that, for each Link it can be defined, which Link should be highlighted. This Navigation Highlighting is always a Link to a Normal Page. Furthermore, it is possible that Burger Menu can be hidden from Mobile and Tablet Viewports. #### Keep in Mind If Web Main Navigation has more than two Links, do not choose "Hide Burger Menu from Mobile and Tablet Viewports". With this deactivated Option, Links are inside Burger Menu for Mobile and Tablet Viewports. If having more than two Links and activating this Option, Design will break on Mobile and Tablet Viewports. ![Configure Web Main Navigation - Logo Tab](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/new-web-navigation_main-logo%3A1-1?fmt=webp) ##### Logo Tab of Web Main Navigation Editor can configure the Path towards the Logo File, the Link where a Click on the Logo should lead to, as well as a short Description. Furthermore, it can be made visible "Only on desktop", "Only on mobile", or "Always". ![Configure Web Main Navigation - Layout Tab](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/new-web-navigation_main-layout%3A3-4?fmt=webp) ##### Layout Tab of Web Main Navigation Editor can configure: - Layout The Layout Options define the Order of the Web Main Navigation Elements. - Links Alignment Links can be left, center, or right aligned inside Link Column. - Icon Alignment Icons can be left, center, or right aligned inside Icon Column. - Logo Alignment Logo can be left, center, or right aligned inside Logo Column. - Dominant Column Defines which Column is dominant (streched to maximal Width). Options are None, Links, Icons, or Logo. - Main Navigation Color (Requires UI Kit 4.44.0 or higher) Specify whether default, white or grey color shall be used for the navigation. - Adjust dominant Column on Mobile If another Column should be dominant on Mobile than on Desktop and Tablet, activate this Checkbox and select the dominant Column on Mobile from appearing Dialog. - Mobile Burger Menu Position The Position of the Mobile Burger Menu can be left or right. ## Web Navigation Links, Partner Logo & Web Language Switch Keep in Mind Using the Stand Alone Components is our new Way to configure Icon Links, Partner Logo, and Language Switch! - More Flexibility than before - Custom Order of Web Navigation Links, Parner Logo, and Web Language Switch ![Add Icon Link / Language Switch](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/new-web-navigation_parsys%3A2-1?fmt=webp) ### Add Web Navigation Links, Parner Logo, and / or Web Language Switch Web Navigation Links, Partner Logo, and / or Web Language Switch can be added as Stand Alone Component to Parsys of Web Main Navigation and / or Web Toolbar Navigation. ![Configuration of Web Navigation Links with an Icon from E.ON Icon Library](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/new-web-navigation_navigation-link%3A1-1?fmt=webp) ##### Configuration of Web Navigation Links For Web Navigation Links, Editor needs to decide first if an Icon from E.ON Icon Library should be used, or if it should be an Image from DAM. - If an Icon from E.ON Icon Library should be used: Add an Icon Name, a Title, as well as the URL where to lead to. [Visit the E.ON Icon Library to see all Icons and its Names.](https://storybook.web-ui.eon.com/eon/master/?path=/story/icon--all-icons) ![Configuration of Web Navigation Links with an Image from DAM](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/new-web-navigation_navigation-link-img%3A3-4?fmt=webp) - If an Image from DAM should be used: At first, activate Checkbox to enable it for Image Link Path. Then, provide the Path of the Image, as well as the URL where to lead to. #### Keep in Mind The Image Link should not be used in Combination with a Flyout, so please avoid doing so. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/new-web-navigation_partner-link%3A1-1?fmt=webp) ##### Configuration of Partner Link For Partner Logo, Editor needs to add a Path to a Logo, a URL where it should lead to, as well as an description Text. Beside that Editor should decide if it should be visible only on Mobile and Tablet Viewports, only on Desktop Viewports, or always. ![Configuration of Web Language Switch](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/new-web-navigation_language-switch%3A1-1?fmt=webp) ##### Configuration of Web Language Switch For Web Language Switch, Editor needs to add an Icon Name, and a Title. Furthermore, an Alignment *(left or right)* can be choosen. [Visit the E.ON Icon Library to see all Icons and its Names.](https://storybook.web-ui.eon.com/eon/master/?path=/story/icon--all-icons) #### Keep in Mind It is advisable to only use a Web Language Switch once on a Page. So, decide for either in Web Toolbar or in Web Main Navigation. ## Web Navigation Flyout Keep in Mind Per Flyout a separat Experience Fragment is needed as Flyout Navigation ! ### Add Web Navigation Flyout For each needed Web Navigation Flyout, Editor must [create an separate Experience Fragment](/content/foundationNG/en/aem-basics/experience-fragment-handling.html). Inside this Experience Fragment Editor needs to add Web Navigation Flyout Component. ![Configure Grid of Web Navigation Flyout](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/new-web-navigation-flyout%3A3-4?fmt=webp) ### Configure Grid A Web Navigation Flyout is configurable similar to a Grid. Editor can select Number of Columns and choose a Column Layout. Furthermore, if Same Hight is checked Components having Background will come in Same Height. Editor can also remove Spaces between Components on Left-Right and / or Top-Bottom, as well as set a minimal Height and / or configure Content Position per Column. ![Add Content to Columns of Web Navigation Flyout](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/new-web-navigation-flyout_add%3A2-1?fmt=webp) ### Add Content Inside each Column multiple Components can be added. All possible Components are defined in our Component Policy. But there are two special Components, only for Web Navigation Flyout: [Web Flyout Link](#flyout-link) [Navigation Divider (horizontal Line with no further Configuration Options)](#content-adding) ![Configure Web Flyout-Link - Part 1](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/new-web-navigation-flyout-link%3A4-3?fmt=webp) ![Configure Flyout-Link - Part 2](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/new-web-navigation-flyout-link_subpages%3A4-3?fmt=webp) ### Configure Web Flyout Link To configure a Web Flyout Link, Editor needs to enter a Link Text and choose an URL where to lead to. Furthermore, Editor can choose to have a large (Headline) Link Style. Beside this, Editor can include Subpages automatically. If selected, Editor can further choose to render only Headline Text for the Root Page i.e no Link. Moreover, Sorting Order of automatically added Subpages can be aranged via rearanging Pages using Drag&Drop in [List View](/content/foundationNG/en/aem-basics/page-handling.html) of Pages. ## Get Web Navigation on Pages Use Context Aware Configuration For getting the Web Navigation on the Pages, use the FoundationNG Global Element Config. If it should be the same Web Navigation for all Pages, do it on Homepage Configuration Page. Use CAC only if it should be changed for just some Subpages. [Read more about FoundationNG Global Element Config](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages.html)