Tabs
Organize related panels without leaving the current screen.
Live preview
Your workspace overview, key metrics and recent updates.
Recent activity and important changes across your workspace.
View members, roles and access policies in one place.
HTML
<div class="xsh-tabs-wrap">
<div class="xsh-tabs" role="tablist" aria-label="Project information">
<button id="xsh-tab-overview" class="xsh-tab" role="tab" aria-controls="xsh-panel-overview" aria-selected="true" tabindex="0">Overview</button>
<button id="xsh-tab-activity" class="xsh-tab" role="tab" aria-controls="xsh-panel-activity" aria-selected="false" tabindex="-1">Activity</button>
<button id="xsh-tab-members" class="xsh-tab" role="tab" aria-controls="xsh-panel-members" aria-selected="false" tabindex="-1">Members</button>
</div>
<div id="xsh-panel-overview" class="xsh-tabpanel" role="tabpanel" aria-labelledby="xsh-tab-overview" tabindex="0">Your workspace overview, key metrics and recent updates.</div>
<div id="xsh-panel-activity" class="xsh-tabpanel" role="tabpanel" aria-labelledby="xsh-tab-activity" tabindex="0" hidden>Recent activity and important changes across your workspace.</div>
<div id="xsh-panel-members" class="xsh-tabpanel" role="tabpanel" aria-labelledby="xsh-tab-members" tabindex="0" hidden>View members, roles and access policies in one place.</div>
</div>Installation & markup
Include the local stylesheet and script once on the page, then place the component inside a data-xsh-ui root. The example above works without a build system.
<link rel="stylesheet" href="/dist/xshna-ui.css">
<div data-xsh-ui>
<!-- Add the HTML example above -->
</div>
<script defer src="/dist/xshna-ui.js"></script>Component API
Public classes, attributes and hooks used by this example. Keep the xsh- prefix intact.
| Identifier | Contract |
|---|---|
xsh-tabs | Used by the example markup and component styles or behavior. |
xsh-tab | Used by the example markup and component styles or behavior. |
xsh-tabpanel | Used by the example markup and component styles or behavior. |
role=tablist | Used by the example markup and component styles or behavior. |
role=tab | Used by the example markup and component styles or behavior. |
role=tabpanel | Used by the example markup and component styles or behavior. |
xsh:tab-change | Used by the example markup and component styles or behavior. |
Accessibility & keyboard
Arrow Left/Right move and activate tabs; Home/End jump between ends. Panels are labelled by their owning tabs.
Implementation note. Use tabs for peer content, not linear workflows or unrelated navigational destinations.
Interaction contract
Behavioral components use the shared delegated runtime; visual-only primitives rely on semantic HTML and CSS. Runtime controls emit bubbling xsh:* CustomEvents; bind application handlers to those events when server persistence, API data or navigation is required.