Docs sidebarPro

• Page: https://ui.xzero.co.uk/components/blocks/docs-sidebar

Variant: Docs

A docs layout with a live filtering nav tree, version switcher, and a gliding on this page outline.

• Access: Xzero Pro
• Registry id: docs-sidebar
• Source file: registry/blocks/docs-sidebar/docs-sidebar.tsx
• Built from: Search field, Dropdown menu, Code block, Copy button, Badge, Avatar, Button
• Keywords: react docs layout, documentation sidebar, docs navigation, table of contents scroll spy, on this page outline, api docs template

Use this for product or API documentation. Load the tree and pages from your content source, route page changes through your router, and point the version switcher at your versioned builds.

When to use

• Product or API documentation with a nav tree and page outline.
• Docs that need a version switcher and a filterable tree.
• Pages where the on this page outline should follow scroll.

When not to use

• Use tree-view for a plain hierarchy outside a docs layout.
• Use sidebar-rail for app navigation.
• Use command-palette for global search across docs.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/docs-sidebar

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { DocsSidebar } from "@/components/xzero/blocks/docs-sidebar/docs-sidebar";

export default function DocsPage() {
  return (
    <DocsSidebar
      defaultCollapsed={false}
      onCollapsedChange={(collapsed) => localStorage.setItem("docs-rail", String(collapsed))}
    />
  );
}

API reference

DocsSidebar

A docs layout with a filterable nav tree, version switcher, page content with code blocks, and an on this page outline that tracks scroll. The tree, pages, and versions are sample content.

Prop	Type	Default	Description
defaultCollapsed	boolean	false	Start with the navigation collapsed to its icon rail.
onCollapsedChange	(collapsed: boolean) => void	–	Called when the navigation collapses or expands, from the toggle or the [ shortcut.

Keyboard interactions

Keys	Action
[	Toggles the icon rail when focus is not in a text field, menu, or dialog.
Arrow Up / Down, Home / End	Move through the nav tree.
Arrow Left / Right	Collapse or expand a nav group.
Enter	In the filter field, opens the first matching page.
Escape	Clears the filter.

Accessibility

• The rail toggle exposes aria-expanded and aria-keyshortcuts="[".
• Filter results are announced as a count in a polite status region.
• The nav tree supports arrow key movement from the search field into the list.

Motion

• The outline indicator glides to the heading in view, and the sidebar folds to a rail on a spring.
• Nav groups expand by height as the filter opens matching branches.
• Reduced motion makes the glide and folds instant.

Responsive behavior

• At 1000px container width and above the outline gets its own 200px column; below 740px it becomes a collapsible bar above the article.
• Below 620px the rail is dropped and the nav tree folds behind a menu button above the content.

Performance

• Scroll spy is batched to one requestAnimationFrame per scroll, and ResizeObservers remeasure on width changes.
• The nav tree is not virtualized; very large trees rely on the filter.

Notes for AI

• Use for product or API documentation.
• Load the tree and pages from your content source, route page changes through your router, and point the version switcher at your versioned builds.
• Composes Xzero search-field, dropdown-menu, code-block, copy-button, badge, avatar, and button.

Related

• Tree view: Navigate nested folders and structured content.
• Sidebar: App rail: An app shell whose sidebar folds into an icon rail and slides in as a sheet on phones.
• Code block: Present code with legible hierarchy and copy access.
• Search field: A recognizable search entry point with clear affordances.
• Command palette: A complete keyboard driven action surface with search, grouped results, and shortcuts.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt