Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Navigation-Component <-- how to display left fragment

Avatar

Level 3

Hi, there is  a nav like the image below  

kristwang_0-1684391807696.png

kristwang_0-1684392232047.png

 

but  l only finish it like the image below,  and how to do the left frag

kristwang_1-1684391877260.png

 

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @krist_wang ,

 

If your question is how to add the highlighted card in the header for each navigation then I believe you must be having a header/navigation component (HTL) where you must have a placeholder/DIV for the left section fragment if not then you need to put write logic as per the business requirement. 

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

Hi @krist_wang ,

 

If your question is how to add the highlighted card in the header for each navigation then I believe you must be having a header/navigation component (HTL) where you must have a placeholder/DIV for the left section fragment if not then you need to put write logic as per the business requirement. 

Avatar

Community Advisor

Hi @krist_wang You can fetch the data at any level from the dialog and pass the value returned to the HTL with a particular class, as the sub-navigation items will also populate on the click event and it is always remain hidden till then.

 

And based on the class you can have the combination of the various css i.e. display-flex, padding, margin, etc based on the UX business requirement to achieve the above use-case.

Hope this helps!

Thanks