Simple Navigation
Short Description:
The Simple Navigation is a variation of the Main Navigation, which specifically addresses the needs of the AIDA Careers site. It is intended to enable the user to navigate the site easily and also includes a language switch for international users, which can switch between different languages. The Simple Navigation is simpler than the Main Navigation in that it does not require a fold-out menu under the Main Navigation item.
How to use it
You can find this XF in the Experience Fragments folder:
/experience-fragments/aida-component-library/demo/de/de/site/simple-navigation/
The folder that takes the navigation menus is:
/aida-careers/demo-pages/test-components/AIDA-624-Simple-Navigation
You can change the path to the folder where the desired menus are located.
Example
- Properties
- Markup
- JSON
- lockParsys: true
- sling:resourceType: aida-component-library/core/components/container/container
- cq:styleIds: 1674205580552
<div class="container responsivegrid cmp-container--simple-header-xf sticky-sm" data-initialized=""><div id="container-225a8520c3" class="cmp-container"><div class="container responsivegrid"><div id="container-52c16d8c7b" class="cmp-container"><div class="aem-Grid aem-Grid--12 aem-Grid--default--12 "><div class="container responsivegrid aem-GridColumn--default--none aem-GridColumn aem-GridColumn--offset--default--0 aem-GridColumn--default--4"><div id="container-ab921b3484" class="cmp-container"><div class="image"><div data-cmp-is="image" data-cmp-dmimage="" data-cmp-src="https://s7e5a.scene7.com/is/content/aida/fi_menu-3?ts=1713869465816&dpr=off&fit=constrain" data-cmp-filereference="/content/dam/aida-component-library/icons/fi_menu.svg" id="image-78a0d9e26b" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject"><img src="https://s7e5a.scene7.com/is/content/aida/fi_menu-3?ts=1713869465816&dpr=off&fit=constrain" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="48" height="34" alt="Hamburger Menu"></div></div><div class="teaser" data-initialized=""><div id="teaser-25ed42ba03" class="cmp-teaser" data-initialized=""><a class="cmp-teaser__link" href="#"><div class="cmp-teaser__content"><div class="cmp-teaser__title"><span>AIDA Cruises</span></div></div><div class="cmp-teaser__image"><div data-cmp-is="image" data-cmp-dmimage="" data-cmp-src="https://s7e5a.scene7.com/is/content/aida/fi_kussmund-5?ts=1713869475132&dpr=off&fit=constrain" data-cmp-filereference="/content/dam/aida-component-library/icons/fi_kussmund.svg" id="teaser-1b9181b60a-image" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject"><img src="https://s7e5a.scene7.com/is/content/aida/fi_kussmund-5?ts=1713869475132&dpr=off&fit=constrain" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="48" height="27" alt="AIDA Cruises icon"></div></div></a></div></div></div></div><div class="container responsivegrid aem-GridColumn--default--none aem-GridColumn aem-GridColumn--offset--default--0 aem-GridColumn--default--4"><div id="container-8e4c6a571d" class="cmp-container"><div class="teaser" data-initialized=""><div id="teaser-13e1209188" class="cmp-teaser" data-initialized=""><a class="cmp-teaser__link" href="https://aida.de/"><div class="cmp-teaser__content"></div><div class="cmp-teaser__image"><div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/aida-careers/AIDA-624-CP-simple-nav/_jcr_content/root/responsivegrid/demo/component/container_copy/container/container_1663291580/teaser_copy.coreimg.85{.width}.png" data-cmp-filereference="/content/dam/aida-careers/logos/aida-careers-logo.png" id="teaser-d43f683839-image" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject"><img src="/content/aida-component-library/library/aida-careers/AIDA-624-CP-simple-nav/_jcr_content/root/responsivegrid/demo/component/container_copy/container/container_1663291580/teaser_copy.coreimg.png" srcset="/content/aida-component-library/library/aida-careers/AIDA-624-CP-simple-nav/_jcr_content/root/responsivegrid/demo/component/container_copy/container/container_1663291580/teaser_copy.coreimg.85.320.png 320w,/content/aida-component-library/library/aida-careers/AIDA-624-CP-simple-nav/_jcr_content/root/responsivegrid/demo/component/container_copy/container/container_1663291580/teaser_copy.coreimg.85.480.png 480w,/content/aida-component-library/library/aida-careers/AIDA-624-CP-simple-nav/_jcr_content/root/responsivegrid/demo/component/container_copy/container/container_1663291580/teaser_copy.coreimg.85.600.png 600w,/content/aida-component-library/library/aida-careers/AIDA-624-CP-simple-nav/_jcr_content/root/responsivegrid/demo/component/container_copy/container/container_1663291580/teaser_copy.coreimg.85.800.png 800w,/content/aida-component-library/library/aida-careers/AIDA-624-CP-simple-nav/_jcr_content/root/responsivegrid/demo/component/container_copy/container/container_1663291580/teaser_copy.coreimg.85.1024.png 1024w,/content/aida-component-library/library/aida-careers/AIDA-624-CP-simple-nav/_jcr_content/root/responsivegrid/demo/component/container_copy/container/container_1663291580/teaser_copy.coreimg.85.1200.png 1200w,/content/aida-component-library/library/aida-careers/AIDA-624-CP-simple-nav/_jcr_content/root/responsivegrid/demo/component/container_copy/container/container_1663291580/teaser_copy.coreimg.85.1600.png 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="180" height="76" alt="Aida Logo"></div></div></a></div></div><div class="teaser" data-initialized=""><div id="teaser-9e41bebf2b" class="cmp-teaser" data-initialized=""><a class="cmp-teaser__link" href="/content/aida-component-library/demo-pages/test-components/AIDA-351-Navigation-XF.html"><div class="cmp-teaser__content"></div><div class="cmp-teaser__image"><div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/aida-careers/AIDA-624-CP-simple-nav/_jcr_content/root/responsivegrid/demo/component/container_copy/container/container_1663291580/teaser_copy_copy.coreimg.85{.width}.png" data-cmp-filereference="/content/dam/aida-careers/logos/aida-careers-logo.png" id="teaser-b74656892b-image" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject"><img src="/content/aida-component-library/library/aida-careers/AIDA-624-CP-simple-nav/_jcr_content/root/responsivegrid/demo/component/container_copy/container/container_1663291580/teaser_copy_copy.coreimg.png" srcset="/content/aida-component-library/library/aida-careers/AIDA-624-CP-simple-nav/_jcr_content/root/responsivegrid/demo/component/container_copy/container/container_1663291580/teaser_copy_copy.coreimg.85.320.png 320w,/content/aida-component-library/library/aida-careers/AIDA-624-CP-simple-nav/_jcr_content/root/responsivegrid/demo/component/container_copy/container/container_1663291580/teaser_copy_copy.coreimg.85.480.png 480w,/content/aida-component-library/library/aida-careers/AIDA-624-CP-simple-nav/_jcr_content/root/responsivegrid/demo/component/container_copy/container/container_1663291580/teaser_copy_copy.coreimg.85.600.png 600w,/content/aida-component-library/library/aida-careers/AIDA-624-CP-simple-nav/_jcr_content/root/responsivegrid/demo/component/container_copy/container/container_1663291580/teaser_copy_copy.coreimg.85.800.png 800w,/content/aida-component-library/library/aida-careers/AIDA-624-CP-simple-nav/_jcr_content/root/responsivegrid/demo/component/container_copy/container/container_1663291580/teaser_copy_copy.coreimg.85.1024.png 1024w,/content/aida-component-library/library/aida-careers/AIDA-624-CP-simple-nav/_jcr_content/root/responsivegrid/demo/component/container_copy/container/container_1663291580/teaser_copy_copy.coreimg.85.1200.png 1200w,/content/aida-component-library/library/aida-careers/AIDA-624-CP-simple-nav/_jcr_content/root/responsivegrid/demo/component/container_copy/container/container_1663291580/teaser_copy_copy.coreimg.85.1600.png 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="180" height="76" alt=""></div></div></a></div></div></div></div><div class="container responsivegrid aem-GridColumn--default--none aem-GridColumn aem-GridColumn--offset--default--0 aem-GridColumn--default--4"><div id="container-67e03d643b" class="cmp-container"></div></div></div></div></div><div class="container responsivegrid"><div id="container-4b32e3befa" class="cmp-container"><div class="header-navigation navigation header-navigation_desktop"><nav id="header-8a64ac5587" class="cmp-navigation cmp-navigation--simple" itemscope="" itemtype="http://schema.org/SiteNavigationElement" data-simple-navigation=""><ul class="cmp-navigation__group " data-options="{"stickyMobile": true,"stickyDesktop": false}"><li class="cmp-navigation__item cmp-navigation__item--level-0 "><a data-cmp-clickable="" class="cmp-navigation__item-link" href="/content/aida-careers/demo-pages/test-components/AIDA-624-Simple-Navigation/jobsuche.html">Jobsuche</a></li><li class="cmp-navigation__item cmp-navigation__item--level-0 "><a data-cmp-clickable="" class="cmp-navigation__item-link" href="/content/aida-careers/demo-pages/test-components/AIDA-624-Simple-Navigation/unternehmen.html">Unternehmen</a></li><li class="cmp-navigation__item cmp-navigation__item--level-0 "><a data-cmp-clickable="" class="cmp-navigation__item-link" href="/content/aida-careers/demo-pages/test-components/AIDA-624-Simple-Navigation/schueler---studenten.html">Schüler & Studenten</a></li><li class="cmp-navigation__item cmp-navigation__item--level-0 "><a data-cmp-clickable="" class="cmp-navigation__item-link" href="/content/aida-careers/demo-pages/test-components/AIDA-624-Simple-Navigation/faq.html">FAQ</a></li></ul></nav></div><div class="header-navigation navigation header-navigation_mobile"><nav id="header-8a64ac5587" class="cmp-navigation cmp-navigation--simple" itemscope="" itemtype="http://schema.org/SiteNavigationElement" data-simple-navigation=""><ul class="cmp-navigation__group " data-options="{"stickyMobile": true,"stickyDesktop": false}"><li class="cmp-navigation__item cmp-navigation__item--level-0 "><a data-cmp-clickable="" class="cmp-navigation__item-link" href="/content/aida-careers/demo-pages/test-components/AIDA-624-Simple-Navigation/jobsuche.html">Jobsuche</a></li><li class="cmp-navigation__item cmp-navigation__item--level-0 "><a data-cmp-clickable="" class="cmp-navigation__item-link" href="/content/aida-careers/demo-pages/test-components/AIDA-624-Simple-Navigation/unternehmen.html">Unternehmen</a></li><li class="cmp-navigation__item cmp-navigation__item--level-0 "><a data-cmp-clickable="" class="cmp-navigation__item-link" href="/content/aida-careers/demo-pages/test-components/AIDA-624-Simple-Navigation/schueler---studenten.html">Schüler & Studenten</a></li><li class="cmp-navigation__item cmp-navigation__item--level-0 "><a data-cmp-clickable="" class="cmp-navigation__item-link" href="/content/aida-careers/demo-pages/test-components/AIDA-624-Simple-Navigation/faq.html">FAQ</a></li></ul></nav></div></div></div></div></div>
{"columnClassNames": {"container": "aem-GridColumn aem-GridColumn--default--12","container_548718071": "aem-GridColumn aem-GridColumn--default--12"},"gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12","columnCount": 12,"appliedCssClassNames": "cmp-container--simple-header-xf",":itemsOrder": ["container","container_548718071"],":items": {"container": {"columnClassNames": {"container": "aem-GridColumn aem-GridColumn--default--4 aem-GridColumn--offset--default--0 aem-GridColumn--default--none","container_2043232870": "aem-GridColumn aem-GridColumn--default--4 aem-GridColumn--offset--default--0 aem-GridColumn--default--none","container_1663291580": "aem-GridColumn aem-GridColumn--default--4 aem-GridColumn--offset--default--0 aem-GridColumn--default--none"},"gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12","columnCount": 12,":itemsOrder": ["container","container_1663291580","container_2043232870"],":items": {"container": {"columnClassNames": {"image_copy": "aem-GridColumn aem-GridColumn--default--4","teaser_copy": "aem-GridColumn aem-GridColumn--default--4 aem-GridColumn--offset--default--0 aem-GridColumn--default--none"},"gridClassNames": "aem-Grid aem-Grid--4 aem-Grid--default--4","columnCount": 12,":itemsOrder": ["image_copy","teaser_copy"],":items": {"image_copy": {"id": "image-78a0d9e26b","componentData": {"@type": "aida-component-library/core/components/content/image","image": {"repo:id": "2350657d-74c5-479a-817b-87084ab6dd7c","repo:modifyDate": "2024-04-23T10:51:05Z","@type": "image/svg+xml","repo:path": "/content/dam/aida-component-library/icons/fi_menu.svg"}},"svgSize": {"width": 48,"height": 34},"sizes": "","lazyEnabled": true,"lazyThreshold": 0,"decorative": false,"dmImage": true,"src": "https://s7e5a.scene7.com/is/content/aida/fi_menu-3?ts=1713869465816&dpr=off&fit=constrain","alt": "Hamburger Menu","areas": [],"widths": [],"width": "48","height": "34",":type": "aida-component-library/core/components/content/image"},"teaser_copy": {"id": "teaser-25ed42ba03","title": "AIDA Cruises","linkURL": "#","titleLines": ["AIDA Cruises"],"imageResource": {"titleType": "div","linkTarget": "_self","textIsRich": "true","alt": "AIDA Cruises icon","sling:resourceType": "aida-component-library/core/components/content/image","imageLinkHidden": "true","titleFromPage": "false","isDecorative": "false","altValueFromDAM": "false","actionsEnabled": "true","jcr:primaryType": "nt:unstructured","imageFromPageImage": "false","id": "teaser-1b9181b60a-image","fileReference": "/content/dam/aida-component-library/icons/fi_kussmund.svg","descriptionFromPage": "false","modal": "false"},"actionsEnabled": true,"imageLinkHidden": false,"titleLinkHidden": false,"titleType": "div","link": {"valid": true,"url": "#"},"actions": [],":type": "aida-component-library/core/components/content/teaser"}},":type": "aida-component-library/core/components/container/container"},"container_1663291580": {"columnClassNames": {"teaser_copy": "aem-GridColumn aem-GridColumn--default--4","teaser_copy_copy": "aem-GridColumn aem-GridColumn--default--4"},"gridClassNames": "aem-Grid aem-Grid--4 aem-Grid--default--4","columnCount": 12,":itemsOrder": ["teaser_copy","teaser_copy_copy"],":items": {"teaser_copy": {"id": "teaser-13e1209188","linkURL": "https://aida.de/","imageResource": {"titleType": "div","disableLazyLoading": "false","linkTarget": "_self","textIsRich": "true","alt": "Aida Logo","sling:resourceType": "aida-component-library/core/components/content/image","titleFromPage": "false","isDecorative": "false","altValueFromDAM": "false","actionsEnabled": "true","jcr:primaryType": "nt:unstructured","imageFromPageImage": "false","id": "teaser-d43f683839-image","fileReference": "/content/dam/aida-careers/logos/aida-careers-logo.png","asset": "false","descriptionFromPage": "false","linkURLHidden": ["",""],"modal": "false"},"actionsEnabled": true,"imageLinkHidden": false,"titleLinkHidden": false,"titleType": "div","link": {"valid": true,"url": "https://aida.de/"},"actions": [],":type": "aida-component-library/core/components/content/teaser"},"teaser_copy_copy": {"id": "teaser-9e41bebf2b","linkURL": "/content/aida-component-library/demo-pages/test-components/AIDA-351-Navigation-XF.html","imageResource": {"titleType": "div","cq:styleIds": ["",""],"disableLazyLoading": "false","linkTarget": "_self","textIsRich": "true","sling:resourceType": "aida-component-library/core/components/content/image","titleFromPage": "false","isDecorative": "true","altValueFromDAM": "false","actionsEnabled": "true","linkURL": "/content/aida-component-library/demo-pages/test-components/AIDA-351-Navigation-XF","jcr:primaryType": "nt:unstructured","imageFromPageImage": "false","id": "teaser-b74656892b-image","fileReference": "/content/dam/aida-careers/logos/aida-careers-logo.png","asset": "false","descriptionFromPage": "false","linkURLHidden": ["",""],"modal": "false"},"actionsEnabled": true,"imageLinkHidden": false,"titleLinkHidden": false,"titleType": "div","link": {"valid": true,"url": "/content/aida-component-library/demo-pages/test-components/AIDA-351-Navigation-XF.html"},"actions": [],":type": "aida-component-library/core/components/content/teaser"}},":type": "aida-component-library/core/components/container/container"},"container_2043232870": {"columnClassNames": {},"gridClassNames": "aem-Grid aem-Grid--4 aem-Grid--default--4","columnCount": 12,":itemsOrder": [],":items": {},":type": "aida-component-library/core/components/container/container"}},":type": "aida-component-library/core/components/container/container"},"container_548718071": {"columnClassNames": {"navigation": "aem-GridColumn aem-GridColumn--default--12"},"gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12","columnCount": 12,":itemsOrder": ["navigation"],":items": {"navigation": {"id": "header-8a64ac5587","items": [{"id": "header-navigation-890366f2aa-item-2108082b8f","path": "/content/aida-careers/demo-pages/test-components/AIDA-624-Simple-Navigation/jobsuche","link": {"valid": true,"url": "/content/aida-careers/demo-pages/test-components/AIDA-624-Simple-Navigation/jobsuche.html"},"children": [],"level": 0,"active": false,"current": false,"lastModified": 1674124849615,"title": "Jobsuche",":type": "aida-component-library/core/components/global/page","dataLayer": {"header-navigation-890366f2aa-item-2108082b8f": {"@type": "aida-component-library/core/components/templating/header-navigation/item","repo:modifyDate": "2023-01-26T11:50:29Z","dc:title": "Jobsuche","xdm:linkURL": "/content/aida-careers/demo-pages/test-components/AIDA-624-Simple-Navigation/jobsuche.html"}}},{"id": "header-navigation-890366f2aa-item-be97930342","path": "/content/aida-careers/demo-pages/test-components/AIDA-624-Simple-Navigation/unternehmen","link": {"valid": true,"url": "/content/aida-careers/demo-pages/test-components/AIDA-624-Simple-Navigation/unternehmen.html"},"children": [],"level": 0,"active": false,"current": false,"lastModified": 1674124859651,"title": "Unternehmen",":type": "aida-component-library/core/components/global/page","dataLayer": {"header-navigation-890366f2aa-item-be97930342": {"@type": "aida-component-library/core/components/templating/header-navigation/item","repo:modifyDate": "2023-01-26T11:50:29Z","dc:title": "Unternehmen","xdm:linkURL": "/content/aida-careers/demo-pages/test-components/AIDA-624-Simple-Navigation/unternehmen.html"}}},{"id": "header-navigation-890366f2aa-item-4065a0e73e","path": "/content/aida-careers/demo-pages/test-components/AIDA-624-Simple-Navigation/schueler---studenten","link": {"valid": true,"url": "/content/aida-careers/demo-pages/test-components/AIDA-624-Simple-Navigation/schueler---studenten.html"},"children": [],"level": 0,"active": false,"current": false,"lastModified": 1674124866411,"title": "Schüler & Studenten",":type": "aida-component-library/core/components/global/page","dataLayer": {"header-navigation-890366f2aa-item-4065a0e73e": {"@type": "aida-component-library/core/components/templating/header-navigation/item","repo:modifyDate": "2023-01-26T11:50:29Z","dc:title": "Schüler & Studenten","xdm:linkURL": "/content/aida-careers/demo-pages/test-components/AIDA-624-Simple-Navigation/schueler---studenten.html"}}},{"id": "header-navigation-890366f2aa-item-5c0157eeb2","path": "/content/aida-careers/demo-pages/test-components/AIDA-624-Simple-Navigation/faq","link": {"valid": true,"url": "/content/aida-careers/demo-pages/test-components/AIDA-624-Simple-Navigation/faq.html"},"children": [],"level": 0,"active": false,"current": false,"lastModified": 1674124873579,"title": "FAQ",":type": "aida-component-library/core/components/global/page","dataLayer": {"header-navigation-890366f2aa-item-5c0157eeb2": {"@type": "aida-component-library/core/components/templating/header-navigation/item","repo:modifyDate": "2023-01-26T11:50:29Z","dc:title": "FAQ","xdm:linkURL": "/content/aida-careers/demo-pages/test-components/AIDA-624-Simple-Navigation/faq.html"}}}],":type": "aida-component-library/core/components/templating/header-navigation"}},":type": "aida-component-library/core/components/container/container"}},":type": "aida-component-library/core/components/container/container"}
Built with Core Components 2.27.0opens in a new tab.