Tabs

The Tabs block is a parent–child pair: the Tabs block holds the tab bar and manages state, while each Tab Panel holds any inner blocks you want to show when that tab is active. Both blocks are server-side rendered — the active tab is baked into the HTML and animated client-side by a lightweight script with no jQuery dependency.

How to add

Open the block inserter, switch to the Axiom Blocks category, and click Tabs. The block drops in with one panel ready to edit. Add more from the sidebar.

The sidebar at a glance

The block sidebar is split into two tabs. Settings is what the block does — the tabs themselves and how they behave. Styles is how it looks, organised by the parts you can see rather than one long list of options.

Managing tabs

The Tabs section in Settings is the repeater that controls every tab in the set.

• Rename — click the text field next to any tab row and type a new label
• Add — click + Add tab at the bottom of the list
• Reorder — use the up/down arrow buttons on each row
• Remove — click the trash icon (disabled when only one tab remains)

Setting the default-open tab

The star button on each row controls which tab is open when the page first loads. The filled star marks the current default. Click an unfilled star to promote that tab. This is saved to the block and reflected on the frontend — it is not the same as which tab you last clicked in the editor.

Orientation & alignment

Both live in Settings → Tabs.

Orientation switches between horizontal (the default row of tabs above the content) and vertical (tabs stacked on the left, content on the right).

Alignment — Left, Center, or Right — controls how the tab buttons are distributed along the bar. This applies in horizontal mode only; in vertical mode the column fills the available width. Alignment can be set per device.

Full-width tabs stretches each tab button to fill an equal share of the bar, regardless of label length.

Tab bar fits content shrinks the bar to hug its tabs instead of spanning the block, which is what you want for a pill or segmented-control look.

Styling the tab bar

Styles → Tab bar is the strip that sits behind every tab — one element, so it has no hover or active state of its own.

Styling a tab

Styles → Tab is an individual tab button. Text, background, and border each carry Normal / Hover / Active states — pick the state at the top of the row and set a value for it.

Styling the panel

Styles → Panel is the content area.

Spacing

Styles → Spacing sets per-side padding and margin on the outer block wrapper. Use this to control how the Tabs block sits in relation to surrounding content rather than adding wrapper Groups.

Block alignment

The Tabs block supports Wide and Full alignment from the toolbar. This expands the outer wrapper beyond the content column width — the tab bar and panels follow.

HTML output

The block renders a <div> wrapper with ARIA tab roles. The active tab button carries aria-selected="true" and its panel is the only one visible on load; the client-side script handles switching without a full page load.

<div
  class="axiom-blocks-tabs axiom-blocks-tab--horizontal axiom-blocks-tab--align-left"
  data-active-tab="tab-abc123"
>
  <div class="axiom-blocks-tabs__list" role="tablist">
    <button
      type="button"
      class="axiom-blocks-tabs__tab is-active"
      role="tab"
      aria-selected="true"
      aria-controls="axiom-blocks-panel-tab-abc123"
      id="axiom-blocks-tab-tab-abc123"
      data-tab="tab-abc123"
    >
      <span class="axiom-blocks-tabs__label">Features</span>
    </button>
  </div>
  <div class="axiom-blocks-tabs__content">
    <!-- Tab panels rendered here -->
  </div>
</div>

is-full-width and is-bar-fit are added to the wrapper when those Settings options are on.

CSS custom properties

Target these on .axiom-blocks-tabs to style tabs from your theme stylesheet or theme.json. The original four are still emitted, so existing theme overrides keep working.

The Styles rows emit a finer-grained set, named --ab-tabs-<part>-<property>:

Tab-part properties take a -h suffix for hover and -a for active — for example --ab-tabs-tab-bg-h and --ab-tabs-tab-bc-a.