Tabs

Usage

Tabs organizes related content into labeled panels visitors switch between by clicking tab labels. Use it when scrolling through everything at once would feel long — service categories, product details, team bios, FAQs grouped by topic, or any content that shares a page but reads better in sections.

The block inserts with three Tab children named One, Two, and Three. Each tab panel accepts any inner blocks — paragraphs, images, columns, grids, and more.

On the front end, only one panel is visible at a time. Clicking a tab label switches panels via lightweight JavaScript; content for inactive tabs stays in the page HTML but is hidden with CSS.

Parent and child blocks

The Tabs parent (ds/tabs) holds one or more Tab children (ds/tabs-child).

Select Tabs for tab appearance, alignment, and content-area styling. Select an individual Tab child to edit that panel's inner blocks.

Tab titles are edited on the parent: click a tab label in the tab bar to activate it, then type to rename. The active tab's label is editable inline; inactive tabs display as plain text until selected.

Tab bar (editor)

When the Tabs block is selected, controls appear beside the tab labels:

• Add tab (+) — inserts a new Tab child at the end with the default name "New Tab"
• Remove tab (trash) — deletes the currently active tab

Reorder tabs by moving Tab children in the list view or block navigator.

Tab Settings (parent)

Sidebar controls under Tab Settings:

• Tab Style — appearance of the tab labels
  • Tags — pill labels using Customizer tag typography and colors
  • Inset (default) — labels inside a rounded track; active tab fills with the primary color
  • Pill — fully rounded label buttons
  • Underline — text labels with an underline on the active tab
  • Tabs — classic connected tab look with borders
• Tab Align — positions the tab label row Left, Center (default), or Right
• Content Style — styling for the panel area below the labels
  • Default — no extra border or background on the content area
  • Outlined — border around the panel with padding
  • Well (default) — subtle rounded background pad with padding

Individual tabs (child)

Select a Tab child to add content inside that panel. The default template includes one paragraph placeholder, but you can insert any block type — columns, images, buttons, nested grids, and so on.

Only the active tab's panel is fully visible in the editor. Click another tab label on the parent to switch which panel you are editing.

Tab names are not edited in the child sidebar; rename tabs from the parent's tab bar.

Block width

Tabs supports Wide alignment from the block toolbar and defaults to Wide width. Full-width alignment is not available for this block.

Tips

• Set Tab Style and Content Style on the parent before filling in panel content so the layout matches your Section or page design.
• Keep tab labels short — one or two words read best, especially on mobile where labels wrap.
• Use Tags when tab labels should match tag styling elsewhere on the site; Inset or Pill work well on neutral backgrounds.
• Pair Outlined or Well content style with Tabs or Underline label styles for clear separation between labels and panel content.
• For long-form content that should all be visible without clicking, use a Section or Grid instead.