Creating a **Tab** component helps organize content into clickable sections, enhancing navigation.

## How to edit in the back office? 



 

 

 



   ![Details for adding a Tab in Drupal ](/sites/g/files/dvc2391/files/styles/media/public/image/2024/11/Screenshot%202024-11-18%2016.23.55.png.webp?itok=H8Bp7BFi)   





 

 





 

 

First, add **tab item titles** for each section, and pick a **title background** color to make the headers stand out.

Inside each tab, use a **Grid** layout to present content neatly, and choose a distinct **content background** for visual contrast.

You can easily reorder tabs using drag-and-drop and add new ones as needed, but keeping the number of tabs limited ensures a cleaner, user-friendly layout.

This setup offers a seamless way to present detailed information in an accessible format.



 

 

 



 

 

 

 





## Example:



 

 

 



 

 

 

 





 First Tab 

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lobortis elementum felis, ac facilisis nisl. Vestibulum id est nulla. Ut dignissim luctus nunc, eget elementum lorem commodo non. In hac habitasse platea dictumst. Nunc a est a odio pharetra malesuada. Phasellus nec diam eu ex ultricies tincidunt. Nam et erat pharetra, interdum felis vel, porta massa. Proin cursus, dolor id ultrices tincidunt, tellus orci vulputate ipsum, vitae rhoncus enim nibh eget augue. Proin nec leo non dolor tincidunt ultrices. Aenean bibendum urna ac euismod pretium. Quisque ut nunc vitae nunc tincidunt convallis a sed dolor. Proin ut erat scelerisque, fermentum purus vitae, congue lacus. Mauris ac ipsum vitae mauris mollis rhoncus.



 

 

 

 

 

 





 



 Second Tab 

    ![Image veolia example ](/sites/g/files/dvc2391/files/styles/media/public/image/2024/11/capture_video-0008.jpg.webp?itok=SlzQQy2t)   





 

 



 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lobortis elementum felis, ac facilisis nisl. Vestibulum id est nulla. Ut dignissim luctus nunc, eget elementum lorem commodo non. In hac habitasse platea dictumst. Nunc a est a odio pharetra malesuada. Phasellus nec diam eu ex ultricies tincidunt. Nam et erat pharetra, interdum felis vel, porta massa. Proin cursus, dolor id ultrices tincidunt, tellus orci vulputate ipsum, vitae rhoncus enim nibh eget augue. Proin nec leo non dolor tincidunt ultrices. Aenean bibendum urna ac euismod pretium. Quisque ut nunc vitae nunc tincidunt convallis a sed dolor. Proin ut erat scelerisque, fermentum purus vitae, congue lacus. Mauris ac ipsum vitae mauris mollis rhoncus.

[Button](https://www.google.com)

 



 

 

 

 

 

 





 



 Third tab

 **Key figure**

**n°1**



 

 

 

 

 

 



 

 [PDF

  Résultats annuels 2023  (452.35 KB)  

    ](/sites/g/files/dvc2391/files/document/2024/11/Finance_CP_VE_Resultats_annuels_2023_29-02-2024.pdf) 

 



[Button](https://www.google.com)

 



 

 

 

 

 

 





 



 

 






## Enhance your web pages with components

[Discover all the components here](/drupal-essentials/components)

 



 

 

 



 [   ![container icon](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Design%20sans%20titre%20%2812%29.jpg.webp?h=b202b291&itok=vmeeKQt-)   ](/text)[Text](/text)

 

###       [Text](/text) 

 

 

 



 

 [   ![Card logo](/sites/g/files/dvc2391/files/styles/media/public/image/2025/02/Design%20sans%20titre%20%2832%29.png.webp?itok=IkpmBO28)   ](/card)[Card](/card)

 

###       [Card](/card) 

 

 

 



 

 [   ![Quote logo](/sites/g/files/dvc2391/files/styles/media/public/image/2025/02/Design%20sans%20titre%20%2833%29.png.webp?itok=h2rKsDhF)   ](/quote)[Quote](/quote)

 

###       [Quote](/quote) 

 

 

 



 

 [   ![content carosel icon](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Design%20sans%20titre%20%2811%29.jpg.webp?itok=h0W8b7g1)   ](/carousel)[Carousel](/carousel)

 

###       [Carousel](/carousel) 

 

 

 



 

 [   ![Employee logo](/sites/g/files/dvc2391/files/styles/media/public/image/2025/02/Design%20sans%20titre%20%2835%29.png.webp?h=7699e6c3&itok=Po8T6NPm)   ](/employees)[Employee](/employees)

 

###       [Employee](/employees) 

 

 

 



 

 [   ![Iframe logo](/sites/g/files/dvc2391/files/styles/media/public/image/2025/02/Design%20sans%20titre%20%2836%29.png.webp?h=3089ca13&itok=yg-giCJz)   ](/iframe)[Iframe](/iframe)

 

###       [Iframe](/iframe) 

 

 

 



 

 [   ![Integration Code logo](/sites/g/files/dvc2391/files/styles/media/public/image/2025/02/Design%20sans%20titre%20%2838%29.png.webp?itok=vZx3cgmj)   ](/integration-code)[Integration Code](/integration-code)

 

###       [Integration Code](/integration-code) 

 

 

 



 

 

  Previous         Next        

 

 

 




## Ask for support

We use ServiceNow to track all of your requests and questions

[Create a ticket now](https://veglobal.service-now.com/s3c?id=service_catalog&root=fcec05201b1649504d79dce2b24bcb50)

 



 

 

 



 

 

   ![](/sites/g/files/dvc2391/files/styles/crop_freeform/public/image/2024/04/image%2014%20%283%29.png.webp?itok=j1xAfftb)