Header
The Header Component is utilized by every content page which is visible to all customers who is navigating through this website. In you will find extra information about this page about this component.
Examples
Atomic XF Component
This component follows the Atomic AEM Components design practice.
What is Atomic AEM Components design? Atomic AEM Components design comes in when components are combined together to form a component, utilizing AEM features like the editable templates, containers, and layouts.
Following the Atomic AEM Components design practice, this Header component is created under experience fragments (XF) with a group of components (within an editable template). If you take a look at the Header XF (edit mode), you'll notice that we use many containers and other content components to construct the experience of the AdvancedBionics Header.
The example below sits inside of the "demo component" which makes the Header Component not look as expected. To view Footer Component as working as expected, click here header XF (publish mode).
Header - Short Links
- Properties
- Markup
- JSON
- fragmentVariationPath: /content/experience-fragments/advancedbionics/samples/component-library/header/master
- sling:resourceType: advancedbionics/components/experiencefragment
Header - Elongated Links
This header with elongated links is in disabled mode for demo purposes. As such, nav interactions will not work as expected.
- Properties
- Markup
- JSON
- fragmentVariationPath: /content/experience-fragments/advancedbionics/samples/component-library/header-with-long-menu-labels/master
- sling:resourceType: advancedbionics/components/experiencefragment