Tabs

When to use

For a meeting page that has 2–4 large, comparable sections (e.g. “method”, “results”, “discussion”). Each tab corresponds to one Tab panel sibling in the page body. One Tabs per page maximum.

Example

import Tabs from '../../components/meeting/Tabs.astro';
import Tab from '../../components/meeting/Tab.astro';

<Tabs tabs={[
  { id: 'setup',   label: 'Setup',   num: '1' },
  { id: 'results', label: 'Results', num: '2' },
  { id: 'wrap',    label: 'Wrap-up', num: '3' },
]} initial="setup" />

<Tab id="setup" active>
  …setup content…
</Tab>
<Tab id="results">
  …results content…
</Tab>
<Tab id="wrap">
  …wrap content…
</Tab>

Props

Tabs

Prop	Type	Required	Notes
tabs	{ id: string; label: string; num?: string }[]	yes	One entry per panel. num renders a small badge.
initial	string	no	Defaults to tabs[0].id.

Tab

Prop	Type	Required	Notes
id	string	yes	Must match a tabs[].id from the strip.
wide	boolean	no	Use the wider content frame.
active	boolean	no	Marks the initially visible panel.

When not to use

• For only one section. Just write the content inline.
• For a long flat outline. Use headings.
• For navigation between pages. Use the site nav.