Sitefinity Grid Tab Layout

sitefinity | 2020-11-21

Overkill Tab Layout

This layout supports up to 7 tabs in total. For a streamlined user experience, tabs 4 through 7 are hidden by default using the Bootstrap utility class d-none.

This allows content editors to future-proof the layout with extra tabs while keeping the interface clean and manageable for end users.


Widget Editing Screen

The following view represents the configuration interface within the Sitefinity backend, where content editors can manage the tab layout.

screen1


Editing Screen

In editing mode, content editors have the ability to modify each individual tab, including title and content.

screen2


Actual Screen (Frontend)

The live view of the tab layout. Tabs 1 to 3 are shown by default, while tabs 4 to 7 remain hidden unless revealed intentionally.

screen3


Sample Code

You can find a full implementation sample in the GitHub Gist below: