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.