TabsPlugin: fix overflow and support vertical tabs

[Light2Dark]

📝 Summary

Closes #9482 and support vertical tabs

📋 Pre-Review Checklist

• For large changes, or changes that affect the public API: this change was discussed or approved through an issue, on Discord, or the community discussions (Please provide a link if applicable).
• Any AI generated code has been reviewed line-by-line by the human PR author, who stands by it.
• Video or media evidence is provided for any visual changes (optional).

✅ Merge Checklist

• I have read the contributor guidelines.
• Documentation has been updated where applicable, including docstrings for API changes.
• Tests have been added for the changes made.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
marimo-docs	Ready	Preview, Comment	May 12, 2026 9:33pm

[cubic-dev-ai]

No issues found across 5 files

Architecture diagram

sequenceDiagram
    participant PyKernel as Python Kernel
    participant TabsPy as tabs() UIElement
    participant Frontend as Frontend (React)
    participant TabsComp as TabComponent
    participant TabsList as TabsList (Radix)
    participant TabsTrigger as TabsTrigger (Radix)
    participant Labeled as Labeled wrapper

    Note over PyKernel,Frontend: Initial render flow — NEW: orientation parameter

    PyKernel->>TabsPy: tabs({...}, orientation="vertical"|"horizontal")
    TabsPy->>TabsPy: NEW: Accept orientation kwarg (Literal["horizontal","vertical"])
    TabsPy->>Frontend: Send args: {"tabs": [...], "orientation": "vertical"}
    Note right of Frontend: orientation defaults to "horizontal" for back-compat

    Frontend->>TabsComp: render(props) – receives orientation in data
    TabsComp->>TabsComp: CHANGED: Check orientation === "vertical"
    alt Vertical orientation
        TabsComp->>TabsComp: NEW: Add flex-row/items-start CSS classes to Tabs wrapper
        TabsComp->>TabsList: NEW: Use className="flex-col items-stretch h-auto max-h-none"
        TabsComp->>TabsTrigger: NEW: Use className="w-full justify-start"
        TabsComp->>TabsComp: NEW: Wrap children in `<div className="flex-1 min-w-0">`
    else Horizontal orientation (default)
        TabsComp->>TabsList: CHANGED: Use className="max-w-full overflow-x-auto justify-start"
        Note over TabsList,Labeled: Fix for overflow bug #9482 — enables horizontal scroll
    end

    TabsComp->>Labeled: Pass fullWidth={true} for vertical layout
    Note over Labeled: NEW: fullWidth prop allows tab content to fill available space

    Note over PyKernel,Frontend: User interaction — tab selection (unchanged)

    User->>TabsTrigger: Click tab
    TabsTrigger->>TabsList: onValueChange(index)
    TabsList->>Frontend: setValue(index)
    Frontend->>PyKernel: POST value update
    PyKernel-->>TabsPy: Update value attribute

    Note over TabsComp: Fallback path — no orientation from older kernels
    alt Orientation omitted (back-compat)
        Frontend->>TabsComp: data.orientation defaults to "horizontal"
        TabsComp->>TabsList: Apply horizontal styling (scroll)
    end

    Note over TabsComp: Test validation — new assertions
    Test->>TabsComp: Verify vertical mode applies flex-col class
    Test->>TabsComp: Verify horizontal overflow-x-auto is absent in vertical
    Test->>TabsPy: Verify orientation defaults when omitted

Loading

[Copilot]

Pull request overview

This PR extends the mo.ui.tabs UI element to better handle large tab sets by adding a vertical orientation option and making horizontal tab bars scrollable when they overflow (addressing #9482).

Changes:

• Added orientation: Literal["horizontal", "vertical"] to mo.ui.tabs and wired it through to the frontend plugin.
• Updated the frontend tabs rendering to support vertical layout and horizontal overflow scrolling.
• Added backend + frontend tests, plus a new tabs smoke-test notebook.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
tests/_plugins/ui/_impl/test_tabs.py	Adds unit tests asserting default and vertical orientation propagation.
marimo/_plugins/ui/_impl/tabs.py	Adds orientation parameter and sends it to the frontend via component args.
frontend/src/plugins/impl/TabsPlugin.tsx	Implements vertical layout and horizontal overflow scrolling behavior.
frontend/src/plugins/impl/tests/TabsPlugin.test.tsx	Adds vitest coverage for orientation behavior and tab selection.
marimo/_smoke_tests/tabs.py	Adds a manual/CI smoke test notebook covering overflow + vertical tabs scenarios.

[mscolnick]

could we do scrollbar-thin?

[kirangadhave]

for the vertical tabs UI, can we have the tabs column span the entire height. Kinda like a sidebar. Right now the tabs are floating around (esp when there are only a few tabs)

[Light2Dark]

Thanks! Made the adjustment, could also do a design pass on this in the future.

[kirangadhave]

🚀 looks great!

[github-actions]

🚀 Development release published. You may be able to view the changes at https://marimo.app?v=0.23.7-dev10