--- title: "Tabs" description: "Tabs make it possible for the Users to explore different Content without losing the Context by switching from one Tab to next Tab." path: https://www.eonshowroom.eon.com/en/content-elements/tabs.html lastModified: 2025-10-17T05:56:30.405Z --- # Tabs # Tabs ## Support ![wind energy at it's best](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/Smiling_boy_in_car_near_wind_turbines_rgb%3A1-1?fmt=webp) ##### Some Text in a Tab with 6-6 Column Grid Soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. [Link](https://www.eonshowroom.eon.com/en/content-elements/tabs.html) ## General Information #### Some Text in a Tab with 12 Column Grid Soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. ## Specifications ##### A Bullet List in a Tab with 8-4 Column Grid Soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. ![wind energy at it's best](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/Smiling_boy_in_car_near_wind_turbines_rgb%3A2-1?fmt=webp) [Link](https://www.eonshowroom.eon.com/en/content-elements/tabs.html) ## Reviews [A classical Link Example](https://www.eonshowroom.eon.com/en.html) [A Mail Link Example](mailto:abc@eon.test) [A Phone Link Example](tel:+49%2012345) ##### Some Links in a Tab with 4-8 Column Grid Soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. [How to Configure](#how-to) ### Description The Tab Component make it possible for the Users to explore different Content without losing the Context. - Can have multiple Tab Elements - Tab Elements contain other Components [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/content-aggregation-tabs--interactive) ### Inspirations ##### What are the Components of a Heat Pump Heating System? The **Components of a Heat Pump** work together in a **closed Circuit** to absorb Heat Energy and use it for **Heating Purposes**. A Heat Pump Heating System consists of **various Components** that make this Process possible. ## Source of Heat The **Energy Source** can be the **Air**, the **Groundwater** or the Earth. In an Air-to-Water Heat Pump, the Heat is taken from the Air, while in a Ground-Source Heat Pump, the Thermal Energy is taken from the Ground. ## Heat Pump The **Heat Pump** itself consists of an **Evaporator**, a **Compressor**, a **Condenser** and an **Expansion Valve**. The Evaporator absorbs the Heat from the Heat Source and evaporates the **Refrigerant** it contains. The Compressor increases the pressure of the Refrigerant and transfers it to the Condenser, where it delivers the absorbed Energy to the **Heat Distribution and Storage System**. ## Distribution and Storage System The **Heat Distribution and Storage System** consists of a Heating System, a Heat Storage Tank and a Heat Distribution System. The Heating System can be Floor Heating, Radiators or a Combination of both. The **Heat Storage Tank stores** the generated Energy and releases it when needed. The Heat Distribution System now transports the Heat Energy to the Radiators or Underfloor Heating in the Building. ### Usage Rules & Features ##### Features - Multiple Tabs are possible ##### Properties - The Grid Control of a Tab Element can be maintained for 12, 8-4, 4-8, or 6-6 Grid Column ##### Design - Each Tab Element must have an unique Tab Element Title ##### In which Grid Columns does it fit? | Grid Columns | Does it fit? | | --- | --- | | 2 | no | | 3 | no | | 4 | no | | 5 | no | | 6 | no | | 8 | yes | | 9 | yes | | 10 | yes | | 12 | yes | ##### DO's - Use Tabs if the Contents of the individual Tab Elements are connectable closely ##### DONT's - Do not use more than 6 Tab Elements inside a Tabs Component - Avoid long Titles as, if it is too long, User might not see that there are other Tabs as well - Do not lead the User to different Areas using Tabs, because this should only be done with the Navigation ## Configuration ## Trackable Component This Component can be tracked. [Read more about Tracking](https://www.eonshowroom.eon.com/en/aem-basics/tracking.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_7-1%3A2-1?fmt=webp-alpha) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/tabs_add-items%3A4-3?fmt=webp) ### Add multiple Tabs In Editor Dialog, Editor can add multiple Tab Elements as Grid Controls and give each an unique Title. This Title will be used as Tab Element Title on the Page. Furthermore, Editor can decide to show Tabs as Dropdown Options on Mobil Viewports. ![Select one Tab](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/tabs_switch%3A2-1?fmt=webp) ### Switch between Tab Element After adding the Tab Elements, Editor can select them one by one by selecting it from Dialog and configuring each Grid Control similar to a normal [Grid](https://www.eonshowroom.eon.com/en/page-elements/grid.html). ![Select Column Layout](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/tab-grid_options%3A1-1?fmt=webp) ### Maintain Grid Control of a Tab Element The Grid Control itself can be maintained for 12, 8-4, 4-8, or 6-6 Grid Column. Furthermore, Editor can add a Grid ID. This ID can be used as an Anchor for a Link to jump directly to this Tab Element (Grid). Beside that, also an Icon to be placed in Front of Tab Name can be choosen. ![Add Content in a Tab](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/tab-item_add-content%3A2-1?fmt=webp) ### Enter Content in Tab Element Editor can add other Components inside the Grid Columns as Content.