Tab Collapse


This component allows the user to split the content into tabs and navigate by clicking on the tab title.
This is a block element and in the component options the user can select a background color.
Below 992px content will be displayed in collapsible elements.




How to Implement

This component begins in the div tab-collapse and in each tab the user can determine a title and content.

Other components can be used in the content area.

For each entry:

  • Add a li (nav-item) and in the button place a unique ID.  In the button attributes data-target and aria-controls put the ID of the corresponding tab-pane.  If it is the first tab, equal the attribute aria-selected to true, otherwise false;
  • In the tab-content place a unique ID;
  • For the corresponding tab-pane:
    • In the tab-pane attribute aria-labelledby put the ID of the respective nav-link and if it is the first tab put the classes active and show, otherwise do not print them;
    • In the card-header put a unique ID and in its child attributes data-target and aria-controls put the ID of the next div with the class collapse;
    • In the div with the collapse class put on its attribute aria-labelledby the ID of the sibling card-header and in the data-parent the ID of the parent tab-content.

To add a background color to the component place the existing style guide classes in the tab-collapse div

Tasks Front End

DMW-354 DMW-584

Tasks Back End

DMW-372 DMW-586 DMW-587 DMW-1082

Tasks details


Views Path


Component Variations


Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices varius libero, ac tincidunt libero ullamcorper ut. Donec ut mi quis nibh feugiat rutrum quis at lectus. Praesent nisl leo, semper vel venenatis id, malesuada sed sapien. Cras non eros sapien. Suspendisse et magna imperdiet, consectetur eros sed, lacinia mauris. Suspendisse turpis dolor, auctor vel velit id, tincidunt sollicitudin ipsum. 
Nullam elementum ultricies consectetur. Vivamus faucibus tellus ut tellus pharetra, eu gravida nibh laoreet. Aliquam auctor eget arcu eget aliquet. Suspendisse tempus, elit et lacinia consequat, quam libero pellentesque neque, at pharetra massa nibh eu tortor. Sed sed facilisis mauris. Vestibulum vehicula molestie interdum. Donec vestibulum, libero molestie tempus euismod, sapien lorem lobortis ipsum, sed interdum nibh mi vel velit.
Suspendisse ut leo ac velit blandit vestibulum et in massa. Praesent lacinia consectetur felis sed fringilla. Nullam ut aliquam nisl, eu blandit tellus. Phasellus sapien augue, ornare id accumsan eu, fringilla in dolor. Quisque interdum turpis enim. Donec feugiat pharetra viverra. Nam nec augue diam. Cras eget lacus malesuada, ullamcorper magna ut, aliquet est. Aliquam aliquet tincidunt velit, vitae semper tortor ullamcorper sed. Ut ac rhoncus metus. Mauris aliquam odio vel metus scelerisque, nec finibus lacus pellentesque.
How to use

1- Go to the Content Editor

2- Go to the folder “New Tab Section“, in /sitecore/content/Outsystems/Website/Data/New Tab Section

3- Insert a new tab section branch datasource. (A base structure will be created with 3 initial tabs)

4- Fill in the generated data with the expected information

5- Go to the Experience Editor and insert a New Tab Section Component in the grid.

     NOTE: to change tabs in experience editor, it’s necessary to use CTRL + mouse click at desired tab. (only for experience editor)

6- Select the datasource to render.

7- Customize and test.

Undeveloped Options


Example page

Figma Link