OneTaskBy Tim King · Updated
Vertical Tabs Builder
Side Tabs in HTML, CSS and Vanilla JS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Vertical Tabs Builder works
A vertical tabs builder makes a list of tabs down the left side with the selected panel beside it, the layout used for settings pages and documentation. Enter titles and text, choose a style and column width, and copy the HTML, CSS and script.
Vertical tabs suit more sections than a horizontal row can hold, and longer labels such as "Notifications" or "Billing and invoices", because the column has room for them. They are common in account settings, product specifications and help centres.
How the vertical tabs builder handles keyboards
The tab list carries aria-orientation="vertical", which tells screen readers to expect the up and
down arrow keys. The script moves focus and selection with those keys, Home and End jump to the
first and last tab, and only the selected tab is in the Tab key order, so a keyboard user reaches
the panel in one press.
On phones
Below 600 pixels wide there is no room for a side column, so a media query turns the list into a single row above the panel that scrolls sideways. The markup and script stay the same; only the CSS layout changes.
FAQ
Should the up and down or left and right keys work?
For vertical tabs the WAI-ARIA pattern uses up and down. When the layout switches to a row on phones there is usually no keyboard, so the script keeps up and down. Add ArrowRight and ArrowLeft to the keys object if you want both to work everywhere.
Can I use links instead of tabs for settings pages?
If each section has its own URL and loads a new page, use a plain navigation list with links and
aria-current="page" instead. Tabs are for panels that are already in the page and switch without
loading anything.
How do I change the width of the tab column?
Use the column width slider, or edit the first value in grid-template-columns. The panel takes
the remaining space. Pick a width that fits your longest label without wrapping, because wrapped
tab labels are harder to scan.
Does the hidden panel content affect SEO?
Every panel is in the HTML and only hidden with the hidden attribute, so search engines can read
it. Put the content most people need in the first tab, because it is visible without a click.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Tabs Builder
Build accessible tabs with arrow key support and three styles.
Accordion Builder
Build a smooth, accessible accordion from native details elements.
Card Builder
Design a card component and copy its HTML and CSS.
Feature Grid Builder
Responsive icon-title-description feature grids for landing pages.
Expandable Card
Collapsible card built on details/summary, no JavaScript.