Examples of Tab component

[ChrisPhillipsUC]

Does anyone have any nice examples using the AEM Tab component?

Ideally using icons+text in each tab, reducing to icon only for mobile use.

Something along the lines of:
https://codepen.io/yyzygter-the-looper/pen/MYadwdR

[SantoshSai · Accepted solution]

Hi @ChrisPhillipsUC,

Use the Core Components Tabs as your base, then extend it to add an “icon” field per tab and hide the text on small screens. Out-of-the-box Tabs don’t ship with icons in the tab labels, but they’re designed to be extended exactly for cases like this: https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/wcm-components/t...

References: 

• Core Tabs docs (features, accessibility, authoring): Tabs Component: https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/wcm-components/t...

• Live examples of Tabs markup (great for inspecting DOM & classes you’ll extend): Core Components Example Library: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/tabs.html

• How to add fields / extend dialogs & models (pattern you’ll use for the icon field): community thread & general extension docs: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-tabs-component-how-to-...

• Children Editor notes (Tabs/Accordion/Carousel use this pattern): quick explainer: https://aemlab.blogspot.com/2022/09/aemaacs-core-components-children-editor.html