Composition Gallery

Navigation patterns

A small documentation-oriented composition of breadcrumbs, top links, tabs, a local sidebar, and pagination.

Overview

Tests hierarchy between peer navigation patterns without creating a reusable documentation shell component.

Live Preview

Use tabs for peer sections, not application navigation.

Local sidebar composition, not a reusable sidebar product component.

Code

<Breadcrumbs items={items} /><Tabs defaultValue="overview"><TabsList aria-label="Local sections"><TabsTrigger value="overview">Overview</TabsTrigger><TabsIndicator /></TabsList><TabsPanels><TabsContent value="overview">...</TabsContent></TabsPanels></Tabs><Pagination pages={pages} />

Components Used

BreadcrumbsButtonTabsPagination

Accessibility

Every navigation region has an accessible label, breadcrumbs expose an ordered path, and tabs follow their Base UI keyboard contract.

Responsive Behaviour

Top links scroll or wrap as needed, local navigation remains a short list, and pagination preserves labelled controls.

Notes

This is local docs scaffolding. A production documentation shell, TOC system, and global search pattern are Pro-level products.