Multi-Tab Section

A dynamic tabbed interface where each pane can be any section type. Tabs and panes are declared entirely in frontmatter. The component supports keyboard navigation (arrow keys, Home, End), URL hash routing so browser back/forward restores the active tab, and SWUP page transition compatibility.

Unlike thetabscomponent which always renders image-grid panes sourced from a data directory,multi-tabaccepts anysectionTypeper pane and takes its data directly from frontmatter.

Example Tabs

Text Pane

This is the Text pane, rendered by therich-textcomponent. Each pane is a standard section definition — the same YAML you would write as a top-level section on any page.

Switch tabs with the buttons above, or use ArrowLeft/ArrowRight keys when a tab button has focus.

Configuration

- sectionType: multi-tab
  containerTag: section
  text:
    title: 'Example Tabs'
    titleTag: 'h2'
  defaultTab: 'text'
  tabs:
    - key: 'text'
      label: 'Text'
      pane:
        sectionType: rich-text
        text:
          title: 'Text Pane'
          prose: 'Content for the text pane.'
    - key: 'image'
      label: 'Image'
      pane:
        sectionType: image-only
        image:
          src: '/assets/images/sample12.jpg'
          alt: 'Sample image in a tab pane'
          caption: 'Optional caption.'
    - key: 'audio'
      label: 'Audio'
      pane:
        sectionType: audio-only
        audio:
          ogg: '/assets/audio/shattered-reflections.ogg'
          mpeg: '/assets/audio/shattered-reflections.mp3'
          bgImage: '/assets/images/sample9.jpg'
          alt: 'Audio player background'

Configuration Options

Tab List

Property	Type	Required	Description
`tabs`	array	Yes	Array of tab definitions
`tabs[].key`	string	Yes	Unique identifier for ARIA ids and default-tab matching
`tabs[].label`	string	No	Display label; defaults to`key`if omitted
`tabs[].pane`	object	Yes	Any valid section definition (`sectionType`+ its properties)

Default Tab Resolution

Priority	Condition
1	`defaultTab`is set and matches a tab key
2	Current year string (e.g.`"2026"`) matches a tab key
3	First tab in the array

Keyboard Navigation

Key	Action
ArrowRight	Next tab (wraps)
ArrowLeft	Previous tab (wraps)
Home	First tab
End	Last tab

Bundler Note

Themanifest.jsononly declaresrequires: ["text", "commons"]for the wrapper itself. Pane component dependencies (CSS/JS for eachtab.pane.sectionType) are auto-discovered by the bundler because each pane'ssectionTypeappears directly in frontmatter.