Tabs in the Header for Bootstrap template

I did a quick search here, and did not notice anything similar to the problem I have at hand, so I thought I might as well ask.

Inspired by TOC at awesome-panel by @Marc on the left side of the page, I was wondering if I could somehow organize my panels into Tabs, and place their buttons into the header of the Bootstrap template.

As of now, I did assign panels into tabs, but I have no clue what I need to hack to get the tab switching functionality into the header. One idea was to have them as links to two separate panel apps, but then that is an overkill and potentially wont work as some of the sidebar components are meant to be shared.

Another idea I guess is to plug buttons into the header, stylize them with CSS, and link to tabs.active property change. Feels like a hack to me, but perhaps that is a solution. Would love to confirm / have it proven wrong :slight_smile:

As of now, tabs are neatly sitting below the header row, leaving that space unused…

Any suggestions are appreciated.

1 Like