Cards & Layout

Tabs

Tablist with proper ARIA wiring; initTabs adds the APG arrow-key navigation.

Element: <div>
Module: @basenative/components
Function: renderTabs

Quick start

Import the render function and call it from your server template.

import { renderTabs } from '@basenative/components';

renderTabs({ tabs: [{ id: 'a', label: 'A', content: '...' }] });

Examples

Each block is a real server render — no mockups, no virtual DOM.

Three tabs

role="tablist", role="tab", role="tabpanel", arrow-key navigation, hidden panels via the hidden attribute.

Live render

BaseNative brings Angular-inspired control flow to native template elements.

signal(), computed(), effect(), hydrate(), render().

Source

renderTabs({
  tabs: [
    { id: 'overview', label: 'Overview', content: '<p>Control flow on native templates.</p>' },
    { id: 'features', label: 'Features', content: '<p>Signals, SSR, hydration.</p>' },
  ],
})

Options

Arguments accepted by renderTabs().

renderTabs option reference
Option	Type	Default	Description
`tabs`	`{ id, label, content }[]`	`—`	Tab definitions.