Repository navigation
Implements vertical tabs - #304
Merged
Merged
Conversation
kdeldycke
force-pushed
the
vertical-tabs
branch
from
September 10, 2026 16:02
9eeaeea to
ea3a3b2
Compare
kdeldycke
force-pushed
the
vertical-tabs
branch
from
November 5, 2026 07:28
82a8e01 to
f8ba02d
Compare
… rail - Wrap the vertical rules in `@media (min-width: 768px)` (the `md` breakpoint), so narrow screens get the horizontal layout with nothing restated, and drop the `max-width: 767.98px` block. - Use logical properties (`border-inline-end`, `border-inline-start`, `padding-inline-*`, `text-align: start`), so the rail and its rule mirror correctly on right-to-left pages. The pane's rule is a border instead of a box-shadow, which has no logical form. - Size the rail with `fit-content(35%)`, so a long label wraps instead of squeezing the pane. - Correct the comment on the surplus rows of `span 99`. - Regenerate sphinx-design.min.css.
- `tab-set` and `tab-set-code`, rST and MyST: `vertical` adds `sd-tab-set-vertical` after `sd-tab-set`; `horizontal` or no option adds nothing; user classes stay last. - An unknown value is reported with the allowed values (docutils drops the directive; MyST warns and drops the option). - The compiled CSS applies the vertical rules only inside the `min-width: 768px` query, with no physical left/right properties.
- `versionadded` 0.8.0 (0.7.0 is already released). - List `orientation` under the `tab-set` and `tab-set-code` options, linking to the section through a new `tabs-vertical` label. - Say where the rail sits on right-to-left pages, how wide it gets, and the width at which the set falls back to horizontal.
MyST-Parser 4 (resolved with Sphinx 7) reads a `:::` line straight after the option lines as another option.
The direction check now rejects a four-value padding/margin/inset/border shorthand, which sets the left and right sides physically (the PR's original `padding: 0 0 0 1.5rem`), and a new test pins the rail at `fit-content(35%) minmax(0, 1fr)`.
The only conflict was the generated sphinx_design/static/sphinx-design.min.css (executablebooks#303 changed the tab hover rules); it is rebuilt by tools/generate_css.py rather than hand-merged.
Say that the horizontal fallback follows the viewport width, not the container's, and that themes which restyle tab labels (pydata-sphinx-theme, sphinx-book-theme) may need their own vertical styling.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This is an implementation of vertical tabs, based on the one I did for my project at: https://kdeldycke.github.io/meta-package-manager/install.html#installation-methods
Here is how it renders:
I don't know what the next version will be numbered with, so I left
{versionadded} 0.7.0.Closes #219.