Tab Group are not responsive.

[lloydowen]

When i have a fairly large tab group (~5 items) it doesn't scale on mobile. It causes an x-overflow.

  <flux:tabs variant="segmented" class="w-full">
    <flux:tab name="overview" icon="home">Overview</flux:tab>
    <flux:tab name="tasks" icon="list-bullet">Tasks</flux:tab>
    <flux:tab name="tab3" icon="academic-cap">
        Tab3
    </flux:tab>
    <flux:tab name="tab4" icon="tag">
        Tab4
    </flux:tab>
    <flux:tab name="tab5" icon="chat-bubble-left-right">
        Tab5
    </flux:tab>
    <flux:tab name="tb6" icon="folder">
        Tab6
    </flux:tab>
</flux:tabs>

using v1.0.14

[dean-stratman]

I was running into this same problem myself. But the question is, how do we make this responsive appropriately? If I have only 2-3 tabs, I likely would want it to remain in a horizontal orientation. If I have 4-6 tabs, I'd probably want it to be a vertical orientation on smaller screen sizes. Do you think the responsiveness should just be baked in based on # of tabs, or the width, or should it be something that could be opted into by the dev on any given tabs element?

[lloydowen]

@dean-stratman good point, for my app I've been wrapping it in a <div class="overflow-x-scroll"></div>. Whilst not great, it's better than it overflowing and it's fairly obvious to the user its scrollable.

But I am no designer

[dean-stratman]

Agreed, that is definitely an option to handle it. I was just remembering from shadcn-vue that they had tab groups that you could add

orientation="vertical"

and it would look like this:

I was thinking about how the tabs could respond in this way automatically if they were going to be too large for the viewport width.

[andreas-freitag]

Vertical seems to get out of hand for more than 10 items as well as you don't see the changing content on mobile screens and you might be thinking that nothing happened.

I think the tabs should be converted to a select input because it only takes one vertical "spot" of the page.

[LasseRafn]

vertical might be nice for a few, select input for many and horizontal scroll also a decent option.. feel like all options would be awesome to support but its probably not feasible to standardize , I imagine

[calebporzio]

Yeah, I think this is something that will need to be handled on a case-by-case basis.

For a general solution I recommend adding overflow-x-auto directly on flux:tabs like so:

<flux:tabs variant="segmented" class="w-full overflow-x-auto">
    <!-- ... -->
</flux:tabs>

https://github.com/user-attachments/assets/423daa70-8c8c-444c-942a-cefde52f6427

[calebporzio]

Closing this - re-submit if I've missed something. Thanks.