VersionSwitcher

Docs version selector using browser-native <details>/<summary> — no JavaScript required.

The VersionSwitcher component from @publier/shell renders a version selector dropdown. It uses the browser-native <details>/<summary> element — no JavaScript bundle.

Publier places VersionSwitcher in the sidebar automatically when versions are provided in the layout props. You only need to import it directly in custom layouts.

Usage

---
import { VersionSwitcher } from '@publier/shell/components';
---

<VersionSwitcher
  currentPath={Astro.url.pathname}
  versions={[
    { label: 'v1 (latest)', path: '/docs', badge: 'stable', default: true },
    { label: 'v0.9 (legacy)', path: '/docs/v0.9', badge: 'legacy' },
  ]}
/>

In MDX:

import { VersionSwitcher } from '@publier/shell/components';

<VersionSwitcher
  currentPath="/docs/getting-started"
  versions={[
    { label: 'v1 (latest)', path: '/docs', badge: 'stable' },
    { label: 'v0.9 (legacy)', path: '/docs/v0.9', badge: 'legacy' },
  ]}
/>

Props

`VersionSwitcher`

Prop	Type	Default	Description
`versions`	`DocVersion[]`	required	Ordered list of doc versions.
`currentPath`	`string`	`undefined`	Current page pathname — used to detect the active version via longest-prefix match.

`DocVersion`

Prop	Type	Default	Description
`label`	`string`	required	Display label (e.g. `"v1 (latest)"`).
`path`	`string`	required	Root path for this version (e.g. `"/docs"`).
`badge`	`'stable' \| 'beta' \| 'deprecated' \| 'legacy'`	`undefined`	Optional badge shown next to the label in the dropdown.
`default`	`boolean`	`false`	Mark as the default when no path match is found.

Behaviour

Implemented as a native <details>/<summary> — opens and closes without JavaScript.
Active version is found by the longest path-prefix that matches currentPath: /docs/getting-started matches /docs before /.
When no path match is found, the version with default: true is used; if none, the first version.
No client directive needed — this component renders pure HTML.