How to make vertical tabs with spicy-sections

HTML

Just the standard spicy sections markup, really. Add a class if you like.

CSS

First, set up a tabs affordance. "vertical" or "side" tabs are tabs. Display them in a grid.

spicy-sections {
  --const-mq-affordances: [screen and (min-width: 5px) ] tab-bar;
  display: grid;
  grid-template-columns: 1fr 3fr;
}

Then, you want to use the ::part(tab-list) to style the container part that the tabs are projected into. Just changing the display to block works.

 spicy-sections::part(tab-list) {
  color: purple;
  display: block;
}

JS

No, there is none necessary!

If you don't like this one, here's another using flex