Design for Tabs within tabs (contextual tabs)
Overview
We can several places in GitLab where we have top-level tabs for categories but we need further context within and thus we use tabs under the content of top-level tab. One such example is on /dashboard/projects
page which looks like this;
Tabs inside tabs is very common UX pattern and it is generally preferred to have slightly different design for sub-tabs than the one you have to main tabs.
See the discussions around this design in following threads on StackExchange.
- Is there evidence to suggest that designing tabs within tabs creates a bad user experience?
- Elegant, simple and obvious sub-tabs?
Proposal
Let's discuss possible alternative designs (or reasoning behind current design)
I think Bootstrap Pills are ideal choice when we want to have nested tabs but I'll leave our options open.
Although I've put together a quick mock up on CodePen which uses Pills under Tabs, check it out here.