Product block

Docs Sidebar With Filter

Version picker, a labelled filter that announces its match count, and sections that vanish rather than leave a heading over an empty list.

208 lineslucide-react

sidebar
docs
filter
versions
documentation

What's included

components/sidebar-docs-tree.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add sidebar-docs-tree

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Your page content goes here

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/sidebar-docs-tree.tsx

'use client'

/**
 * <SidebarDocsTree> — a documentation sidebar: a version picker, a filter box
 * and sections of pages, with the filter narrowing the list as you type.
 *
 *  - The version picker is a native `<select>` with a visible-to-AT label.
 *    Nothing a custom listbox could add is worth losing the mobile picker and
 *    the type-ahead the browser already ships.
 *  - Filtering announces itself. A `role="status"` line reports "6 pages
 *    match" as you type, because a list that silently shrinks tells a screen
 *    reader nothing happened. It is `sr-only` inside a `relative` wrapper (an
 *    absolutely positioned sr-only node in a scroll container scrolls the
 *    page sideways).
 *  - Sections with no match disappear entirely instead of leaving a heading
 *    over an empty list, and a zero-result filter says so in words.
 *  - The filter is `type="search"` and is labelled, not just given a
 *    placeholder — a placeholder is not a name.
 */

import * as React from 'react'
import { Search } from 'lucide-react'

export interface DocsPage {
  id: string
  label: string
  isNew?: boolean
}

export interface DocsSection {
  title: string
  pages: DocsPage[]
}

export interface SidebarDocsTreeProps {
  sections?: DocsSection[]
  versions?: string[]
  defaultPageId?: string
  children?: React.ReactNode
  className?: string
}

const DEFAULT_SECTIONS: DocsSection[] = [
  {
    title: 'Getting started',
    pages: [
      { id: 'intro', label: 'Introduction' },
      { id: 'install', label: 'Installation' },
      { id: 'quickstart', label: 'Quickstart' },
    ],
  },
  {
    title: 'Core concepts',
    pages: [
      { id: 'routing', label: 'Routing' },
      { id: 'data-fetching', label: 'Data fetching' },
      { id: 'caching', label: 'Caching', isNew: true },
      { id: 'rendering', label: 'Rendering modes' },
    ],
  },
  {
    title: 'Guides',
    pages: [
      { id: 'auth', label: 'Authentication' },
      { id: 'i18n', label: 'Internationalization' },
      { id: 'testing', label: 'Testing' },
      { id: 'deploying', label: 'Deploying' },
    ],
  },
  {
    title: 'API reference',
    pages: [
      { id: 'config', label: 'Configuration' },
      { id: 'cli', label: 'Command line' },
      { id: 'errors', label: 'Error codes' },
    ],
  },
]

export function SidebarDocsTree({
  sections = DEFAULT_SECTIONS,
  versions = ['v3.2 (latest)', 'v3.1', 'v2.9'],
  defaultPageId = 'caching',
  children,
  className = '',
}: SidebarDocsTreeProps) {
  const uid = React.useId()
  const [query, setQuery] = React.useState('')
  const [activeId, setActiveId] = React.useState(defaultPageId)

  const needle = query.trim().toLowerCase()
  const visible = sections
    .map((s) => ({
      ...s,
      pages: s.pages.filter((p) => !needle || p.label.toLowerCase().includes(needle)),
    }))
    .filter((s) => s.pages.length > 0)
  const total = visible.reduce((n, s) => n + s.pages.length, 0)

  return (
    <div
      className={`flex h-[32rem] overflow-hidden rounded-2xl border border-border/60 bg-background ${className}`}
    >
      <aside
        aria-label="Documentation"
        className="relative flex w-[256px] shrink-0 flex-col border-e border-border/60 bg-card/40"
      >
        <div className="space-y-3 p-3">
          <div>
            <label htmlFor={`${uid}-version`} className="sr-only">
              Documentation version
            </label>
            <select
              id={`${uid}-version`}
              defaultValue={versions[0]}
              className="w-full rounded-xl border border-border/60 bg-background px-3 py-2 text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
            >
              {versions.map((v) => (
                <option key={v}>{v}</option>
              ))}
            </select>
          </div>
          <div className="relative">
            <label htmlFor={`${uid}-filter`} className="sr-only">
              Filter pages
            </label>
            <Search
              aria-hidden
              className="pointer-events-none absolute start-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
            />
            <input
              id={`${uid}-filter`}
              type="search"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="Filter pages"
              autoComplete="off"
              className="w-full rounded-xl border border-border/60 bg-background py-2 ps-9 pe-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
            />
          </div>
          <p role="status" className="sr-only">
            {needle ? `${total} ${total === 1 ? 'page matches' : 'pages match'}` : ''}
          </p>
        </div>

        <nav aria-label="Docs" className="flex-1 space-y-5 overflow-y-auto px-3 pb-4">
          {visible.length === 0 ? (
            <p className="px-3 py-6 text-center text-sm text-muted-foreground">
              No pages match “{query.trim()}”.
            </p>
          ) : (
            visible.map((section, si) => {
              const headingId = `${uid}-s${si}`
              return (
                <div key={section.title}>
                  <h2
                    id={headingId}
                    className="px-3 pb-1.5 text-xs font-semibold text-foreground"
                  >
                    {section.title}
                  </h2>
                  <ul aria-labelledby={headingId} className="border-s border-border/60">
                    {section.pages.map((page) => {
                      const active = page.id === activeId
                      return (
                        <li key={page.id}>
                          <a
                            href="#"
                            aria-current={active ? 'page' : undefined}
                            onClick={(e) => {
                              e.preventDefault()
                              setActiveId(page.id)
                            }}
                            className={`-ms-px flex items-center gap-2 border-s px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${
                              active
                                ? 'border-primary font-medium text-primary'
                                : 'border-transparent text-muted-foreground hover:border-foreground/30 hover:text-foreground'
                            }`}
                          >
                            <span className="truncate">{page.label}</span>
                            {page.isNew ? (
                              <span className="rounded bg-primary/10 px-1.5 text-[10px] font-semibold uppercase leading-4 text-primary">
                                New
                              </span>
                            ) : null}
                          </a>
                        </li>
                      )
                    })}
                  </ul>
                </div>
              )
            })
          )}
        </nav>
      </aside>

      <main className="hidden min-w-0 flex-1 p-6 sm:block">
        {children ?? (
          <div className="flex min-h-full min-w-0 items-center justify-center break-words rounded-xl border border-dashed border-border/60 p-4 text-center text-sm text-muted-foreground">
            Your page content goes here
          </div>
        )}
      </main>
    </div>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Install: npm i lucide-react
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/sidebar-docs-tree.tsx and import it where you need the section:

import { SidebarDocsTree } from '@/components/sidebar-docs-tree'

Customize

1 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`sections`	`DocsSection[]`	`DEFAULT_SECTIONS`
`versions`	`string[]`	`['v3.2 (latest)', 'v3.1', 'v2.9']`
`defaultPageId`	`string`	`'caching'`
`children`	`React.ReactNode`	—
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.

sidebar-docs-tree.html

<!--
  Docs Sidebar With Filter — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block is interactive in React and the handlers are NOT here.
  Buttons, toggles and menus render in their initial state and do
  nothing until you wire them up.
-->
<div class="flex h-[32rem] overflow-hidden rounded-2xl border border-border/60 bg-background ">
  <aside aria-label="Documentation" class="relative flex w-[256px] shrink-0 flex-col border-e border-border/60 bg-card/40">
    <div class="space-y-3 p-3">
      <div>
        <label for="_R_0_-version" class="sr-only">Documentation version</label>
        <select id="_R_0_-version" class="w-full rounded-xl border border-border/60 bg-background px-3 py-2 text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary">
          <option selected="">v3.2 (latest)</option>
          <option>v3.1</option>
          <option>v2.9</option>
        </select>
      </div>
      <div class="relative">
        <label for="_R_0_-filter" class="sr-only">Filter pages</label>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search pointer-events-none absolute start-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" aria-hidden="true">
          <path d="m21 21-4.34-4.34"></path>
          <circle cx="11" cy="11" r="8"></circle>
        </svg>
        <input id="_R_0_-filter" type="search" placeholder="Filter pages" autoComplete="off" class="w-full rounded-xl border border-border/60 bg-background py-2 ps-9 pe-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary" value="" />
      </div>
      <p role="status" class="sr-only"></p>
    </div>
    <nav aria-label="Docs" class="flex-1 space-y-5 overflow-y-auto px-3 pb-4">
      <div>
        <h2 id="_R_0_-s0" class="px-3 pb-1.5 text-xs font-semibold text-foreground">Getting started</h2>
        <ul aria-labelledby="_R_0_-s0" class="border-s border-border/60">
          <li>
            <a href="#" class="-ms-px flex items-center gap-2 border-s px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary border-transparent text-muted-foreground hover:border-foreground/30 hover:text-foreground">
              <span class="truncate">Introduction</span>
            </a>
          </li>
          <li>
            <a href="#" class="-ms-px flex items-center gap-2 border-s px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary border-transparent text-muted-foreground hover:border-foreground/30 hover:text-foreground">
              <span class="truncate">Installation</span>
            </a>
          </li>
          <li>
            <a href="#" class="-ms-px flex items-center gap-2 border-s px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary border-transparent text-muted-foreground hover:border-foreground/30 hover:text-foreground">
              <span class="truncate">Quickstart</span>
            </a>
          </li>
        </ul>
      </div>
      <div>
        <h2 id="_R_0_-s1" class="px-3 pb-1.5 text-xs font-semibold text-foreground">Core concepts</h2>
        <ul aria-labelledby="_R_0_-s1" class="border-s border-border/60">
          <li>
            <a href="#" class="-ms-px flex items-center gap-2 border-s px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary border-transparent text-muted-foreground hover:border-foreground/30 hover:text-foreground">
              <span class="truncate">Routing</span>
            </a>
          </li>
          <li>
            <a href="#" class="-ms-px flex items-center gap-2 border-s px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary border-transparent text-muted-foreground hover:border-foreground/30 hover:text-foreground">
              <span class="truncate">Data fetching</span>
            </a>
          </li>
          <li>
            <a href="#" aria-current="page" class="-ms-px flex items-center gap-2 border-s px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary border-primary font-medium text-primary">
              <span class="truncate">Caching</span>
              <span class="rounded bg-primary/10 px-1.5 text-[10px] font-semibold uppercase leading-4 text-primary">New</span>
            </a>
          </li>
          <li>
            <a href="#" class="-ms-px flex items-center gap-2 border-s px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary border-transparent text-muted-foreground hover:border-foreground/30 hover:text-foreground">
              <span class="truncate">Rendering modes</span>
            </a>
          </li>
        </ul>
      </div>
      <div>
        <h2 id="_R_0_-s2" class="px-3 pb-1.5 text-xs font-semibold text-foreground">Guides</h2>
        <ul aria-labelledby="_R_0_-s2" class="border-s border-border/60">
          <li>
            <a href="#" class="-ms-px flex items-center gap-2 border-s px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary border-transparent text-muted-foreground hover:border-foreground/30 hover:text-foreground">
              <span class="truncate">Authentication</span>
            </a>
          </li>
          <li>
            <a href="#" class="-ms-px flex items-center gap-2 border-s px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary border-transparent text-muted-foreground hover:border-foreground/30 hover:text-foreground">
              <span class="truncate">Internationalization</span>
            </a>
          </li>
          <li>
            <a href="#" class="-ms-px flex items-center gap-2 border-s px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary border-transparent text-muted-foreground hover:border-foreground/30 hover:text-foreground">
              <span class="truncate">Testing</span>
            </a>
          </li>
          <li>
            <a href="#" class="-ms-px flex items-center gap-2 border-s px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary border-transparent text-muted-foreground hover:border-foreground/30 hover:text-foreground">
              <span class="truncate">Deploying</span>
            </a>
          </li>
        </ul>
      </div>
      <div>
        <h2 id="_R_0_-s3" class="px-3 pb-1.5 text-xs font-semibold text-foreground">API reference</h2>
        <ul aria-labelledby="_R_0_-s3" class="border-s border-border/60">
          <li>
            <a href="#" class="-ms-px flex items-center gap-2 border-s px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary border-transparent text-muted-foreground hover:border-foreground/30 hover:text-foreground">
              <span class="truncate">Configuration</span>
            </a>
          </li>
          <li>
            <a href="#" class="-ms-px flex items-center gap-2 border-s px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary border-transparent text-muted-foreground hover:border-foreground/30 hover:text-foreground">
              <span class="truncate">Command line</span>
            </a>
          </li>
          <li>
            <a href="#" class="-ms-px flex items-center gap-2 border-s px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary border-transparent text-muted-foreground hover:border-foreground/30 hover:text-foreground">
              <span class="truncate">Error codes</span>
            </a>
          </li>
        </ul>
      </div>
    </nav>
  </aside>
  <main class="hidden min-w-0 flex-1 p-6 sm:block">
    <div class="flex min-h-full min-w-0 items-center justify-center break-words rounded-xl border border-dashed border-border/60 p-4 text-center text-sm text-muted-foreground">Your page content goes here</div>
  </main>
</div>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

10 more blocks in Sidebars

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Sidebars

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More Sidebars blocks

View category

Docs Sidebar With Filter

What's included

Works with

License

Preview

Source

Before you paste

Where it goes

Customize

Props

Not using React?

For AI

10 more blocks in Sidebars

Shipping one commercially

More Sidebars blocks

Grouped App Sidebar

Collapsible Icon-Rail Sidebar

Rail Plus Secondary Panel

Nested Accordion Sidebar

Sidebar With Workspace Switcher

Floating Inset Sidebar

Resizable Sidebar With Splitter

Chat History Sidebar

Mail Folders Sidebar

File Explorer Tree Sidebar