Tabs

1. Copy to Webflow

   Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: Webflow removes any font your site has not installed.
   Copy to Webflow

2. Add custom CSS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

   The look of the preview is the tabs-* classes of the paste. The Embed holds what moves, and reads five variables, --tabs-accent (the plate), --tabs-ink, --tabs-radius, --tabs-line and --tabs-fade: set them on the block, or on anything above it, in a rule of your own. The box of the panels is bare in the preview; give its class a colour to make it a surface. Keep the padding on the panels, since the box changes height from one to the next.

3. Add custom JS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

4. Use it on your own elements

   Custom attributes
   Select the element on the canvas and open the Settings panel. Under Custom attributes, add a pair: the name on the left, the value on the right.

   Custom attribute	What it does
   data-tabs	Marks the block that holds the row of tabs and the panels. It takes no value: leave the value field empty. The settings below go on the same element.
   data-tabs-list	On the row that holds the tabs. It takes no value. It becomes the tablist, and it is the part that scrolls sideways on a narrow screen. Name it for screen readers with aria-label, "Services" in the paste. Without it the block is left alone and the engine says so in the console. [ Required ]
   data-tabs-tab	On each tab: a button in plain HTML, a Link block in Webflow, its link left on #. It takes no value. The first tab opens the first panel, the second the second: nothing else pairs them. A tab with disabled or aria-disabled="true" is dimmed and skipped. [ Required ]
   data-tabs-panels	On the box that holds the panels and nothing else. It takes no value. Its height follows the open panel during a change, so the padding goes inside the panels. Without it the engine takes the parent of the first panel. [ Optional ]
   data-tabs-panel	On each panel, as many as there are tabs, in the same order. It takes no value. A panel holds anything. Its id, set in the ID field of the Settings panel, is what the address carries: page#delivery opens that tab. [ Required ]
   data-tabs-state	Written by the engine on a panel: active on the open one, leaving on the one that rolls up. The open tab carries aria-selected="true", the row and the box of the panels data-tabs-moving during a change, a row that scrolls data-tabs-fade (start, end or both), the block data-tabs-ready. Never written by hand; the stylesheet reads them, and so can a rule of yours. [ Optional ]

   Settings
   Every setting is a custom attribute too, added the same way and on the same element. An attribute always wins over the defaults written in the code.

   Attribute	Default	What it is
   data-tabs-start	1	The tab that is open when the page arrives, when the address names none. Options: a number counted from 1, 2 for the second tab; or the id of a panel, delivery.
   data-tabs-activation	auto	What the arrow keys do in the row of tabs. Options: auto, the arrow moves the focus and opens that tab at once, the usual choice when the panels are already in the page; manual, the arrow only moves the focus and Enter or Space opens the tab, for panels that are heavy to show.
   data-tabs-hash	on	Whether the open tab is in the address of the page. Options: on, a tab chosen by the visitor writes the id of its panel after the # without adding a step to the history, and an address or a link that names a panel, or anything inside one, opens it; off, the address is neither read nor written.
   data-tabs-autoplay	0	The time spent on a tab before the next one opens by itself, in seconds.
   data-tabs-duration	0.9	The time of a whole change, in seconds: the plate sinks, the line runs, the plate rises, the panels hand over.

Two files, no build step. It runs in the browser only. Load it with a script tag in plain HTML, in a client-side script in Astro, never in the frontmatter. In React, call Tabs.mount(ref.current) in useEffect and destroy() in its cleanup.

1. Tune it, either way

   Per element with an attribute, or once for the whole site by editing DEFAULTS at the top of the file.

   Attribute	Default	What it is	Lower	Higher
   data-tabs-start	1	The tab that is open when the page arrives, when the address names none. Options: a number counted from 1, 2 for the second tab; or the id of a panel, delivery.
   data-tabs-activation	auto	What the arrow keys do in the row of tabs. Options: auto, the arrow moves the focus and opens that tab at once, the usual choice when the panels are already in the page; manual, the arrow only moves the focus and Enter or Space opens the tab, for panels that are heavy to show.
   data-tabs-hash	on	Whether the open tab is in the address of the page. Options: on, a tab chosen by the visitor writes the id of its panel after the # without adding a step to the history, and an address or a link that names a panel, or anything inside one, opens it; off, the address is neither read nor written.
   data-tabs-autoplay	0	The time spent on a tab before the next one opens by itself, in seconds.	Changes sooner; 0 turns it off, which is the default	Leaves more time to read. Five seconds or more for a panel with a paragraph
   data-tabs-duration	0.9	The time of a whole change, in seconds: the plate sinks, the line runs, the plate rises, the panels hand over.	Snappier; under 0.5 the line is hardly seen; 0 changes at once	Slower and more shown; over 1.3 the tabs feel late on the click

2. Drive it from JavaScript

   When a script opens a tab, follows which one is open, or starts and stops the autoplay.
   JavaScript Expand Copy

   const element = document.querySelector('[data-tabs]');
   element.addEventListener('tabs:shown', (e) => {
     console.log(e.detail);
   });
   
   // Follow the open tab: an analytics call, a picture that loads on demand.
   element.addEventListener('tabs:change', (event) => {
     console.log(event.detail.index, event.detail.panel.id, event.detail.by);
   });
   
   const tabs = Tabs.mount(element);   // the block auto() mounted, or a new one
   tabs.select('delivery');             // by the id of a panel, or by a number counted from 0
   tabs.next();                         // the tab after, round the end
   
   // When the tabs leave the page:
   Tabs.destroy(element);   // removes what the engine added, gives the markup back as it was

   Show all 16 lines

3. Fit it to your page

   Tabs and panels

   • The tabs and the panels pair in order: the first tab opens the first panel, the second the second. Nothing else links them.
   • To add a tab, add a button marked data-tabs-tab in the row and a block marked data-tabs-panel in the box of the panels, at the same place in each. In Webflow, duplicate a tab and a panel in the Navigator. To remove one, delete both. To reorder, move both.
   • A panel holds anything: text, pictures, a form, a grid, another set of tabs. Panels may have any height; the box follows the open one.
   • **Give each panel an id** in the page's own words (pricing, not tab-2). It is what the address shows, and what a link elsewhere on the page points at: <a href="#delivery"> opens that tab and brings the tabs into view. A panel without an id gets one from the engine, which is not written in the address in a form worth sharing.
   • Name the row: aria-label="Services" on the element marked data-tabs-list, or aria-labelledby pointing at a heading. It is what a screen reader says before the tabs.
   • A tab that cannot be opened carries disabled (a button) or aria-disabled="true" (a link): it is dimmed, and the arrows skip it.
   • Several sets on a page, and a set inside a panel of another, each work on their own.

   The keyboard

   Tab reaches the open tab, and Tab again goes into its panel: to the first link or control in it, or to the panel itself when it has none. In the row, Left and Right go from tab to tab round the ends, Home and End go to the first and the last; with activation at auto the tab under the focus opens, at manual Enter or Space opens it. In a page written right to left the two arrows are swapped.

   The address

   With hash at on, the default:

   • a tab chosen by the visitor writes # and the id of its panel in the address, with history.replaceState: the Back button still leaves the page in one step;
   • a page that arrives with a hash naming a panel, a tab, or anything inside a panel opens that tab and scrolls to it;
   • a link on the same page to such an id does the same.

   A tab opened by the autoplay or by a script writes nothing.

   Autoplay

   data-tabs-autoplay="6" opens the next tab every six seconds, round the end. A line of ink grows across the head of the open tab to show the time left. The clock holds while the pointer is over the block, while the focus is inside it, while the tabs are off screen and while a change is on its way; it stops for good as soon as a tab is chosen by a click, by the keyboard, by the address or by select(), and play() starts it again. Under prefers-reduced-motion: reduce it never starts.

   On a narrow screen

   The row never wraps. When the tabs do not fit it scrolls sideways under the finger, with no scrollbar, the side where tabs are hidden fading out over --tabs-fade. The open tab is brought to the middle of the row, so the next one is always in sight, and so is a tab that takes the focus.

   The colours and the sizes

   Five custom properties, set at zero specificity on the block. Give them your own values on the block or on anything above it:

   • --tabs-accent: the plate of the open tab, the line that runs, and the line drawn at the foot of a tab under the pointer.
   • --tabs-ink: the label of the open tab and of a tab under the pointer, the line of the autoplay across the head of the plate, the focus ring of a tab.
   • --tabs-radius: the two top corners of the plate, 2px in the preview. 0 for a square one.
   • --tabs-line: the thickness of the line the plate sinks to, and of the two other lines.
   • --tabs-fade: the width of the fade at the ends of a row that scrolls.

   The colour of a tab at rest, its padding and its type are the tab's own class. The box of the panels has a class of its own: in the preview it is bare, the panels sitting on the ground of the page; give it a colour and it becomes a surface the tabs stand on.

   From JavaScript

   • Tabs.mount(element, overrides) returns the instance of a block, mounting it if it was not: { element, settings, tabs(), panels(), index(), select(which, options), next(), prev(), play(), pause(), refresh(), destroy() }. select takes a number counted from 0, the id of a panel or of a tab, or a tab or panel element, and { instant: true } to change with no motion; it returns false when nothing changed. Tabs.auto(root) mounts every marked block inside root, and runs once on its own; Tabs.destroy(element) gives the markup back.
   • Events, all bubbling from the block: tabs:ready; tabs:change as soon as a tab is opened, with { index, previous, tab, panel, by } in detail, by being user, hash, autoplay or api; tabs:shown once the plate and the panel have arrived.
   • The state is in the markup: aria-selected="true" on the open tab, data-tabs-state="active" on the open panel (leaving on the one that rolls up), data-tabs-moving on the row and on the box of the panels during a change, data-tabs-fade (start, end or both) on a row that scrolls, data-tabs-ready on the block.
   • **Under prefers-reduced-motion: reduce** a tab opens at once: the plate is under the new tab and the new panel is there, with no travel.
   • Without JavaScript the row is a row of buttons and the panels are all in the page, one under the other, in the order of the tabs.
   • The words of the demo are the demo's: on a real page every label and every panel is the user's own, or asked for.

4. Avoid the pitfalls

   • As many panels as tabs. They pair in order; an extra tab or an extra panel is left alone and the engine says so in the console.
   • **The box marked data-tabs-panels holds the panels and nothing else**: its height is animated from one panel to the next. It may be a surface with a colour of its own; put the padding inside the panels.
   • In Webflow each tab is a Link block, marked data-tabs-tab: Webflow has no button element a paste can carry, and a Link block takes the focus and the keyboard the same way. Leave its link on #. Do not use Webflow's own Tabs element: it brings its own script and its own classes.
   • The stylesheet hides the closed panels. Without tabs.css every panel stays in sight and nothing shows which tab is open, and the engine says so in the console.
   • A tab keeps one line. The row scrolls instead of wrapping, so a very long label makes a very wide tab: keep labels to a few words.
   • The plate is behind the label, in the accent. Keep a label colour that reads on both the ground of the page and the accent: the ink of the preview does on amber, a white label would not.
   • The line runs at the foot of the row, against whatever is under it. Keep the accent readable on what is under the row, the ground of the page or a surface of the panels.
   • A panel that changes height after it opened, a picture that loads late for one, simply grows: the box has no height of its own at rest.
   • **An id used twice on a page** breaks the address: the hash opens the first element that carries it.
   • **With hash at on, a link href="#some-panel" no longer scrolls to the panel only**: it opens the tab first, then brings the tabs into view.
   • In React or any framework that owns the DOM, mount in an effect and call destroy() in its cleanup; the engine adds one element to the row, the plate that travels, and writes attributes on the tabs and panels.

One click on Copy the AI prompt copies everything an assistant needs to build this effect: the complete code, the markup, the dependency, every setting and every pitfall.