Tabs — horizontal content switcher

SECTIONBLOCKPLANNED

sections/tabs.liquid

blocks/tab-panel.liquid

Spec only This component is planned but not yet built. The interactive playground will land in a future Mock U-10 release. This page documents the component's purpose, schema surface, file structure, and dependencies so adjacent work can plan against it.

§ 01What it is.

Tab interface with keyboard navigation (arrow keys, Home, End). Each tab is a block containing arbitrary content via Liquid. Built as a web component (<tab-group>) for progressive enhancement — works without JavaScript by rendering all panels as accordions. Honours WCAG ARIA Authoring Practices for tabs pattern.

§ 02When to use it.

Product detail page (when sticky-sidebar nav isn't enough). FAQ category switcher. Documentation / install-guide variants. Anywhere a horizontal switcher beats a vertical scroll.

§ 03Files, type, build position.

Component type

Section — full-bleed merchant-configurable page region. Lives in sections/, shows up in the theme editor sidebar.
Block — composable child of a section or other block. Lives in blocks/, added via the theme editor.

Files

sections/tabs.liquid blocks/tab-panel.liquid

Build position

Needs U-02. Pairs with U-11 for the no-JS fallback pattern.

§ 04Related components.

The components this one depends on, composes with, or pairs with. Click through to each.