Skip to content

Tabs

<div class="pane-tabs">
  <div class="scrollable" role="tablist" aria-label="Primary fields">
    <a id="tab-content" class="sel" role="tab" href="#content"
       aria-controls="content" aria-selected="true">
      <span class="tab-label">Content</span>
    </a>
    <a id="tab-seo" role="tab" href="#seo"
       aria-controls="seo" aria-selected="false">
      <span class="tab-label">SEO</span>
    </a>
  </div>
</div>

Tab links carry no .tab class — the selected one gets .sel, and the label always sits in a .tab-label span.

Note

In practice. Most plugins never hand-write tabs — you declare them in a controller’s template tabs variable or a field layout, and Craft renders the markup and toggling behavior.