Introduction

A visual layout component that organizes dense, related information into multiple, mutually exclusive panels. Users can seamlessly switch between panels without loading new pages or cluttering the layout canvas.

The Tabs component is fully integrated as a tabs block in the Page Builder, allowing content authors and developers to easily construct tabbed views, configure visual properties, and arrange nested blocks directly inside Sveltia CMS page templates.

Usage

These configurations represent exactly how page-builder block items are constructed.

1. Classic Horizontal Tabs (Line Variant)

Our standard layout featuring an under-lined trigger indicator and smooth sliding transitions. Perfect for standard product features, details, or documentation sub-menus.

{
  "type": "tabs",
  "variant": "line",
  "size": "md",
  "items": [
    {
      "value": "features",
      "label": "⚡ Key Features",
      "content": [
        {
          "type": "text",
          "content": "Our Hono/JSX Tabs component supports zero runtime styled-system classes, smooth sliding indicator transitions, and native keyboard interaction."
        }
      ]
    },
    {
      "value": "pricing",
      "label": "💎 Pricing Plans",
      "content": [
        {
          "type": "text",
          "content": "Flexible subscription pricing for individuals, start-ups, and scaling enterprise workspaces."
        }
      ]
    }
  ]
}

2. Enclosed Folder Style (Compact Sizing)

Renders the tabs list with bordered button enclosures resembling folder dividers. Excellent for dashboard menus, interface preferences, or compact settings sections.

{
  "type": "tabs",
  "variant": "enclosed",
  "size": "sm",
  "items": [
    {
      "value": "profile",
      "label": "User Profile",
      "content": [
        {
          "type": "text",
          "content": "Manage personal information, billing details, and customized regional preferences."
        }
      ]
    },
    {
      "value": "security",
      "label": "Security",
      "content": [
        {
          "type": "text",
          "content": "Configure multi-factor authentication codes, view active sessions, and update credentials."
        }
      ]
    }
  ]
}

Props

Accessibility & Developer Notes

This component complies with the WAI-ARIA Tabs Design Pattern out-of-the-box. When hydrated, the component implements the following critical accessibility layers:

• Semantic Role Assignment: Sets role="tablist" on the list container and role="tab" on triggers, with aria-selected reflecting active state, and aria-controls referencing panel IDs automatically.
• Roving Focus Navigation: Keyboard arrow keys smoothly navigate triggers with focus-roving tabIndex. Pressing Home or End jumps immediately to endpoints.
• Dynamic CSS Sliding Indicator: Features an absolute visual slider indicator. It queries position metrics from the active trigger element to animate translations smoothly without triggering layout thrashing.
• Bypassing Hono Reconciler Limits: In Preact islands wrapping static HTML, the state manager directly manipulates trigger attributes (like data-selected, aria-selected, tabindex, and hidden) on events to guarantee performance independent of the reconciler timeline.