DocsNav

A docs sidebar drawn from a DocsTree.

View code

tsx

<DocsNav
	tree={tree}
	activePath="/docs/alerts/webhooks"
	collapseGroups
	filter={{ label: "Filter pages", placeholder: "Filter pages", noResults: "No page matches" }}
	footer={<a href="/support">Contact support</a>}
/>

Demo docs sites

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Content docsDriftwood DocsGuides for Driftwood, a command line that deploys static sites: a tutorial, how-to guides and concept pages./demo/docs/driftwood
Component docsLattice DocsDocs for Lattice UI, a component library: an index of components, each with live previews, props and accessibility notes./demo/docs/lattice
API referenceParcelo DocsThe HTTP API reference for Parcelo, a shipping-label API: resources, endpoints with request and response fields, and examples in three languages./demo/docs/parcelo
Utilities docsTempo DocsReference for Tempo, an invented library of CSS utilities: every spacing, colour, layout, type and effect utility drawn beside its call and the CSS it emits./demo/docs/tempo

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { DocsNav } from "@sdxc/ui/docs";

Renders the tree in reading order. A group whose href is set links its own page from its summary, and every group is a native <details>, so folding needs no script. Load @sdxc/ui/docs/docs-nav-tools in the browser entry for the scroll-to-current and the filter.

Examples

tsx

<DocsNav tree={tree} activePath={path} filter={{ label: "Filter pages", placeholder: "Filter", noResults: "No page matches" }} footer={<a href="/support">Contact support</a>} />

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`tree`	`DocsTree`	Yes	The pages to list; `tree.label` names the navigation landmark.
`activePath`	`string`	Yes	The path being read, which marks one link `aria-current="page"`.
`filter`	`{ label: string; placeholder: string; noResults: string }`	No	A field that filters pages by title, with the line shown when nothing matches. It appears once the page's script loads.
`footer`	`RemixNode`	No	Drawn under the tree, such as "Contact support" or a status link, flush with the nav's edge; give its links the rows' inline padding (or render them as `Sidebar.MenuLink`s) to line their text up with the pages above.
`collapseGroups`	`boolean`	No	Folds every group except the ones holding the current page, for a tree whose groups run to hundreds of pages.
`prefetch`	`Sidebar.Prefetch`	No	When a link prefetches its page.