The sidebar tabs can be achieved using the solution described below. Please note that this is merely a slightly adjusted version of the Tab View posted here.
- Create a form called “Sidebar” and follow the steps 1 to 6 outlined in the “Tab View” guide linked above. In the end, you should have a subform containing all the entries of your sidebar.
- Create a second form called “Content”. There, follow the steps 7 and 8 of the guide. The result should be a form containing other subforms, each of which represents the content of a tab.
- Create a third form called “Master” where you combine the two above. First, add the “Sidebar” form as a subform. Make sure that it only occupies the left-most column of the grid. Then add the “Content” as a subform and let it take up the rest of the space. In the end, you should have two forms on one row. Finally, add the style class “tab-sidebar” to the first subform and “tab-content” to the second widget. This allows you to further style the contents. For instance, in your custom.css file. This allows you to specify the width of the content and the sidebar, for instance like this:
Using this solution, you can basically exploit the “responsive” feature of our grid layout. Since the “tab view” will only take up one column, each button (i.e. navigation element) will be moved to a new line.
Of course, you still need to style the buttons to give them a tab-like look.