Skip to content

Vertically-oriented tabs #219

Open

Description

@QuLogic

Context

On the Matplotlib homepage, we list some tools using vertically-oriented tabs. This is implemented through regular HTML. I am now porting the site to reST+sphinx-design, and would like to replicate it as best possible. While I have been able to replicate the styling relatively closely, I cannot figure out how to make the tabs vertical.

In our original site, the tab labels all come before the tab content divs, whereas in sphinx-design, the tab label is interleaved with the content divs. I think this is what makes it difficult to achieve vertical tabs purely in CSS, but I am no expert in web development, and it may still be possible.

Proposal

  • Add an option to tab-set for where to put the labels, stacked above, or stacked to the left.
  • For flexibility, it may also be nice to allow stacked on right or stack on bottom, but I don't know how difficult that is to implement.

Tasks and updates

No response

Activity

  1. chrisjsewell commented on Aug 28, 2024

    @chrisjsewell
    Member

    Interesting thanks, yeh I feel that should be possible; as you mention; outputting a "physically" different HTML structure for this mode, not just different CSS

  2. added a commit that references this issue on Aug 9, 2026
  3. added a commit that references this issue on Sep 10, 2026
    ea3a3b2
  4. kdeldycke commented on Nov 5, 2026

    @kdeldycke

    I proposed a PR implementing this at: #304 . @QuLogic can you test it?

  5. added a commit that references this issue on Nov 5, 2026
    f8ba02d
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions