GENERATORS

Tabs Generator

Build a tabbed panel — tabs with a label and content, horizontal or vertical, an underline / pills / enclosed / segmented look, arrow-key navigation with a roving tabindex, automatic or manual activation, optional URL-hash sync and a theme — with a live preview and HTML + CSS + JS output, a CSS-only no-JS version, or a React / Vue / Tailwind component.

What this tool does

It builds the markup, styles and JavaScript for a tabs widget that follows the WAI-ARIA tabs pattern, and shows it live.

Defining tabs

One per line: Label | Panel content. Prefix a line with * to make that tab active on load. Use \n in the content for a line break.

Keyboard

Arrow keys move between tabs (Left / Right for horizontal, Up / Down for vertical), Home / End jump to the first / last. With automatic activation the panel changes as you arrow; with manual you arrow to a tab and press Enter or Space.

Styles

Underline, pills, enclosed (folder) tabs, or a segmented control — each horizontal or vertical.

Hash sync

Optionally reflect the active tab in the URL (#tab-2) so a link opens the right one.

Output

HTML + CSS + JS, a CSS-only radio-button version with no JavaScript, or React / Vue / Tailwind.

Privacy

Everything runs in your browser. Nothing is uploaded.

FAQ

Frequently asked questions

What is the difference between automatic and manual activation?

Automatic shows a tab's panel the moment it receives focus while arrowing — fast for lightweight panels. Manual moves focus only; the user presses Enter or Space to activate — better when switching a panel is expensive. The ARIA guide recommends manual in that case.

Does the CSS-only version support keyboard navigation?

It uses hidden radio inputs, so Tab reaches the labels and Space selects — but it lacks the arrow-key roving behaviour of the JS version. It needs zero JavaScript, which is the trade-off.

How does the roving tabindex work?

Only the active tab has tabindex="0"; the rest are tabindex="-1". Tab moves into and out of the tablist as one stop, and arrow keys move between tabs — matching how native widgets behave.

Can I deep-link to a tab?

Turn on hash sync. The active tab id goes in the URL and, on load, a matching hash selects that tab.

Is anything sent to a server?

No. The tabs are generated entirely in your browser.