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.
Editing Screen
In editing mode, content editors have the ability to modify each individual tab, including title and content.
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.
Sample Code
You can find a full implementation sample in the GitHub Gist below: