Interactions / Component reference

Tabs

Accessible tabs with roving keyboard focus and proper panel relationships.

V1 BETA / DOCUMENTEDLive variants · API · Accessibility · Responsive guidance

LIVE COMPONENT REFERENCE

Semantic tab pattern

The shipped JavaScript enhances the tablist with selection and focus behavior. The panels should be visible to the corresponding accessible tab.

Actual Xshna CSSResize to test wrapping

Overview panel

HTML · COPY AND USE

<div class="xsh-tabs" role="tablist" aria-label="Demo tabs"><button class="xsh-tab" id="xsh-tab-a" aria-controls="xsh-panel-a" aria-selected="true" role="tab">Overview</button><button class="xsh-tab" id="xsh-tab-b" aria-controls="xsh-panel-b" aria-selected="false" role="tab">Activity</button><button class="xsh-tab" id="xsh-tab-c" aria-controls="xsh-panel-c" aria-selected="false" role="tab">Settings</button></div><div class="xsh-tab-panel" id="xsh-panel-a" role="tabpanel" aria-labelledby="xsh-tab-a">Overview panel</div><div class="xsh-tab-panel" id="xsh-panel-b" role="tabpanel" aria-labelledby="xsh-tab-b" hidden>Activity panel</div><div class="xsh-tab-panel" id="xsh-panel-c" role="tabpanel" aria-labelledby="xsh-tab-c" hidden>Settings panel</div>

Overview

Add data-xsh-tabs, role=tablist, role=tab and role=tabpanel. Each tab needs aria-controls pointing to an xsh-prefixed panel ID. Arrow keys, Home and End are supported.

Live example

Interactive · Real framework

Overview content and project summary.

Example markup

<div data-xsh-tabs>
 <div class="xsh-tabs" role="tablist" aria-label="Project details">
  <button class="xsh-tab" role="tab" id="xsh-tab-one" aria-controls="xsh-panel-one" aria-selected="true">Overview</button>
  <button class="xsh-tab" role="tab" id="xsh-tab-two" aria-controls="xsh-panel-two" aria-selected="false">Analytics</button>
  <button class="xsh-tab" role="tab" id="xsh-tab-three" aria-controls="xsh-panel-three" aria-selected="false">Settings</button>
 </div>
 <div class="xsh-tab-panel" id="xsh-panel-one" role="tabpanel" aria-labelledby="xsh-tab-one" tabindex="0">Overview content and project summary.</div>
 <div class="xsh-tab-panel" id="xsh-panel-two" role="tabpanel" aria-labelledby="xsh-tab-two" tabindex="0" hidden>Visitors, conversions and trends.</div>
 <div class="xsh-tab-panel" id="xsh-panel-three" role="tabpanel" aria-labelledby="xsh-tab-three" tabindex="0" hidden>General preferences and permissions.</div>
</div>

Production guidance

Use aria-label on the tablist and unique names for every tab/panel. Framework uses automatic activation on arrow keys.

Customize this component through --xsh-* CSS tokens, data-xsh-* configuration attributes and documented xsh-* utilities. Use the optional JavaScript distribution only when an interactive behavior is needed.

Build with confidenceOpen interactive design playground →

EXACT NAMES FROM THE SHIPPED STYLESHEETS

Complete selector inventory

These selectors exist in the current distribution. An entry in this table does not imply that arbitrary modifier combinations are meaningful; use the examples above for the intended composition.

Class	Purpose	Delivery
`.xsh-tab`	Core component	CSS + optional behavior
`.xsh-tab-panel`	Composable modifier / structure class	CSS + optional behavior

ENGINEERING AND INTEGRATION

Implementation details

Semantic structure

Use the documented Xshna classes with semantic HTML rather than replacing native elements unnecessarily.

Compose existing xsh- classes on the appropriate HTML element. Keep content order meaningful when CSS is disabled.

Interactive behavior

Verify focus order, disabled behavior and descriptive labels for interactive patterns.

Load xshna.min.js only if the documented interaction needs it. Your application remains responsible for data, persistence and business rules.

Responsive and localization

Test narrow containers, long translations and user-defined text sizes.

Test 320px-wide viewports, container-constrained instances, keyboard zoom, longer translations and right-to-left text where relevant.

Theme and customization

Use --xsh-* CSS variables for theme values and data-xsh-design / data-xsh-density on the xsh-app root.

Prefer design tokens over hard-coded overrides so components remain coherent across personalities.

ACCEPTANCE CHECKLIST

What to verify before shipping

Confirm every documented class used by the feature exists in the release CSS.
Navigate controls using Tab, Shift+Tab, Enter, Space and Escape where appropriate.
Test with reduced motion, high contrast, 200% text zoom and a narrow mobile viewport.
Verify disabled, loading, empty, error and long-content states where relevant.
Check actual application behavior independently of the preview: these examples use illustrative data.