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

create a tab

Avatar

Level 2

Hi friends

                i have a requirement to create tab in AEM, i saw all the component in design but not got,,so can you please suggest me how to create a tab component in AEM, i have tabs component in /apps/weretail/components/content/tabs but i dont know how to use that,,i am new in AEM,,can u please help me

dhiraj85_0-1592029565815.png

 

 

Thanks 

 

1 Accepted Solution

Avatar

Correct answer by
Administrator

Answer by @Nirmal_Jose 

 

Adobe core component 'tab' [1] has got some very good features like highlight tab on load, nest tab etc. In case you want an enhanced user experience on top of this functionality, overlay this component to style the presentation. 

In one of my projects, we had done multiple enhancements like icon, better hover effect etc

[1] - https://aemcomponents.dev/content/core-components-examples/library/container/tabs.html



Kautuk Sahni

View solution in original post

7 Replies

Avatar

Employee Advisor

There is an OOTB Tab component. The location of the OOTB component in the repository is 

 

/apps/weretail/components/content/tabs

 

surabhikatiyar_1-1591897367570.png

 

 

 

Avatar

Community Advisor

You can extend Core components created by Adobe which is production ready, easily configurable with all latest features

https://docs.adobe.com/content/help/en/experience-manager-core-components/using/components/tabs.html

 

Avatar

Employee

You can download the demo component package (tab-component-1

-0.zip) from https://helpx.adobe.com/experience-manager/using/htl_tab_component.html and deploy using package manager.

Avatar

Level 2

yes..i am getting this..but this is not complete,

Avatar

Employee Advisor

Adobe core component 'tab' [1] has got some very good features like highlight tab on load, nest tab etc. In case you want an enhanced user experience on top of this functionality, overlay this component to style the presentation. 

In one of my projects, we had done multiple enhancements like icon, better hover effect etc

[1] - https://aemcomponents.dev/content/core-components-examples/library/container/tabs.html

Avatar

Correct answer by
Administrator

Answer by @Nirmal_Jose 

 

Adobe core component 'tab' [1] has got some very good features like highlight tab on load, nest tab etc. In case you want an enhanced user experience on top of this functionality, overlay this component to style the presentation. 

In one of my projects, we had done multiple enhancements like icon, better hover effect etc

[1] - https://aemcomponents.dev/content/core-components-examples/library/container/tabs.html



Kautuk Sahni

Avatar

Level 2
@Surabhi_Katiyar hi,,can u please tell me whole process,,i am new in AEM,,so please help me