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
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/tabs
References:
Core Tabs docs (features, accessibility, authoring): Tabs Component: https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/wcm-components/tabs
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-add-an-extra-field/m-p/436815
Children Editor notes (Tabs/Accordion/Carousel use this pattern): quick explainer: https://aemlab.blogspot.com/2022/09/aemaacs-core-components-children-editor.html
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.