Need Help in solutioning authoring design for header of the website | Community
Skip to main content
S
SudarshanV1
Level 3
February 11, 2026
Solved

Need Help in solutioning authoring design for header of the website

  • February 11, 2026
  • 3 replies
  • 37 views

we have requirement to design website header.

requirements dynamic tabs/menu (header).

when we over on any tab/menu it should display sub header/ sub menu and this submenu items are dynamic.

when we over on subheader/sub menu it should show its nested menu (nested menu is also dynamic).

i dont want to use multifield design for nested menu’s.

is there any ways we can design this configuration in dialog?

Best answer by giuseppebaglio

hi ​@SudarshanV1, 

If your “submenu” and “nested submenu” are more than just links (e.g., promo tiles, images, teasers, CTA buttons, personalization), you can split the header into Experience Fragments (XFs), then assemble them in a single header/menu component at render time.

 

XF can be referenced from pages, so they’re a good fit for reusable header/subheader blocks. XFs can also contain other EF, which maps nicely to a “tab → submenu → nested submenu” structure without forcing everything into a single dialog.

Here my authoring model suggestion:

  • Create one XF per top-level tab (or per “mega menu” panel), authored as real components (teasers, images, link lists, etc.) instead of nested multifields

  • If you need variations (per locale/brand/audience), use XF variations for each tab/panel so authors manage it in one place

  • For simple link-only parts, you can still generate items from the content tree (Navigation component / site structure) and use XFs only for the rich panels

To assemble all parts server-side, you implement a Header/Menu component (HTL + Sling Model) that. leverages the logic of Core Component Experience Fragment (it simply renders an XF variation):

  • Reads a config mapping (e.g., “Tab label → XF path/variation”), and outputs the top-level tabs.

  • For each tab hover panel, includes the corresponding XF (or nested XF) so the submenu content is authored independently but rendered together in the header

 

3 replies

kautuk_sahni
Community Manager
kautuk_sahniCommunity Manager
Community Manager
February 11, 2026

​@arunpatidar ​@AmitVishwakarma  Pulling you into this discussion to get your take, especially if there are best practices we should be thinking about. Thanks in advance for any input you can share.

Kautuk Sahni
EstebanBustamante
Community Advisor and Adobe Champion
EstebanBustamanteCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
February 11, 2026

Hi, 

I would strongly recommend using the Navigation component from the Core Components. You can learn more about it here: https://www.aemcomponents.dev/content/core-components-examples/library/core-structure/navigation.html

In most cases, it’s easier to extend this component and adapt it to your needs. However, if you truly need to build something from scratch, keep in mind that the “Header” menu traditionally follows the page hierarchy. The typical approach is to define a root path and then display a certain number of child pages, or apply business rules (checkboxes, page rank, page order, page naming, etc) to determine which pages should appear in the header menu. 

 

Hope this helps

Esteban Bustamante
    giuseppebaglio
    giuseppebaglioAccepted solution
    Level 10
    February 11, 2026

    hi ​@SudarshanV1, 

    If your “submenu” and “nested submenu” are more than just links (e.g., promo tiles, images, teasers, CTA buttons, personalization), you can split the header into Experience Fragments (XFs), then assemble them in a single header/menu component at render time.

     

    XF can be referenced from pages, so they’re a good fit for reusable header/subheader blocks. XFs can also contain other EF, which maps nicely to a “tab → submenu → nested submenu” structure without forcing everything into a single dialog.

    Here my authoring model suggestion:

    • Create one XF per top-level tab (or per “mega menu” panel), authored as real components (teasers, images, link lists, etc.) instead of nested multifields

    • If you need variations (per locale/brand/audience), use XF variations for each tab/panel so authors manage it in one place

    • For simple link-only parts, you can still generate items from the content tree (Navigation component / site structure) and use XFs only for the rich panels

    To assemble all parts server-side, you implement a Header/Menu component (HTL + Sling Model) that. leverages the logic of Core Component Experience Fragment (it simply renders an XF variation):

    • Reads a config mapping (e.g., “Tab label → XF path/variation”), and outputs the top-level tabs.

    • For each tab hover panel, includes the corresponding XF (or nested XF) so the submenu content is authored independently but rendered together in the header

     

      Terms & ConditionsAccessibility statement

      Loading footer...