Vaulthalla Logo

Tabs

Use tabs for package-manager examples, comparisons, and compact server-rendered content groups.

Tabs

Use :::tabs with child :::tab directives for package-manager examples, feature comparisons, and compact docs sections.

1:::tabs{2  default="pnpm"3  theme="glass"4}5 6:::tab[pnpm]{value="pnpm"}7```bash8pnpm add @valkyrianlabs/payload-markdown9```10:::11 12:::tab[npm]{value="npm"}13```bash14npm install @valkyrianlabs/payload-markdown15```16:::17 18:::

:::tabs

Attributes:

  • default: selected tab value on first render
  • theme: tabs container theme
  • tabTheme: default child tab panel theme

When default is missing or does not match a child tab value, the first tab is selected.

:::tab

Attributes:

  • [Label]: visible tab label, preferred for new Markdown
  • label: visible tab label retained for existing Markdown
  • value: stable tab identity
  • theme: tab panel theme
  • disabled: optional disabled trigger state

If value is missing, the renderer derives one from [Label] or label. If both are missing, it generates a safe fallback.

Nested Markdown

Tab panels support normal Markdown, code fences, and nested directives:

1:::tabs{default="install"}2 3:::tab[Install]{value="install"}4```bash5pnpm add @valkyrianlabs/payload-markdown6```7:::8 9:::tab[Notes]{value="notes"}10:::callout[Portable content]{variant="tip"}11Tabs still store as plain Markdown directives.12:::13:::14 15:::

Duplicate Values

Duplicate tab values are slugged and made unique in rendered output, but diagnostics warn when duplicates are found. Use stable explicit values when tabs appear in long-lived docs:

1:::tab[pnpm]{value="pnpm"}

Disabled Tabs

Use disabled when a tab should render but not be selectable:

1:::tab[Coming soon]{value="soon" disabled}2Content can stay in source while the trigger is disabled.3:::

disabled="false" keeps the tab enabled.

Interactivity And Accessibility

Tabs render accessible server HTML with role="tablist", role="tab", and role="tabpanel".

The renderer progressively enhances tabs on the client:

  • clicking a trigger switches panels
  • arrow keys move between triggers
  • Home and End jump to the first and last triggers
  • Enter and Space activate a focused trigger

There is no URL hash or cross-page tab sync.

Themes

Built-in tabs container themes:

  • default
  • muted
  • glass
  • underline
  • pills

Built-in tab panel themes:

  • default
  • muted
  • glass