Tabs container on 2 lines

Ask for Help
1

Hi there,

Is there a way to have something like this with the tabs container ?

image
image436×174 4.37 KB

or maybe it’s a feature requests

2

2 on top and 3 beneath, but it’s all the same tab menu?

3

If you just want 3-wide with wrapped tab buttons, try this:

[role="tablist"][data-orientation="horizontal"] {
    display: flex !important;
    flex-wrap: wrap !important;
    height: auto !important;
    gap: 0px !important;
}

[role="tablist"] [role="tab"] {
    flex: 0 0 33.33% !important;
    min-width: 33.33% !important;
    max-width: 33.33% !important;
    box-sizing: border-box !important;
    padding: 8px 4px !important;
}

[role="tab"] span {
    font-size: 0.8rem !important;
    text-align: center !important;
}

End result:

CleanShot 2026-04-15 at 15.35.24@2x
CleanShot 2026-04-15 at 15.35.24@2x1228×1024 56.1 KB

Note: this only works for mobile tabs. This CSS will mess up desktop tabs, so you’ll want to create two tab containers…one for mobile with this styling and one for desktop (no custom css style) with visibility conditions set to screen small and screen large respectively.