Component Sidebar

Navigate dense component libraries with tactile, proximity-reactive guide lines.

Example

Features

• Expands guide lines as the pointer approaches, keeping dense navigation easy to scan.
• Supports controlled and uncontrolled open state with an optional single-key shortcut.
• Accepts a custom link renderer for Next.js, React Router, or other routing libraries.
• Scrolls the active item into view and marks it with aria-current="page".
• Shows accessible blue markers for new items and yellow markers for updated items.
• Ignores touch pointers and removes movement for reduced-motion users.
• Plays a soft scan tick, uses a metal click when opening or closing, and pairs navigation with click sounds and selection haptics.
• Exposes interaction callbacks for application-specific behavior.

Installation

pnpm dlx shadcn@latest add @tentui/component-sidebar

Add TooltipProvider near the root of your application if it is not already present.

import { TooltipProvider } from "@/components/ui/tooltip";
 
<TooltipProvider>{children}</TooltipProvider>

Usage

import {
  ComponentSidebar,
  ComponentSidebarContent,
} from "@/components/component-sidebar";

const groups = [
  {
    title: "Getting started",
    items: [
      { title: "Overview", href: "/overview" },
      { title: "Installation", href: "/installation" },
    ],
  },
  {
    title: "Components",
    newCount: 1,
    items: [
      { title: "Button", href: "/button", isUpdated: true },
      { title: "Dialog", href: "/dialog", isNew: true },
    ],
  },
];
 
<ComponentSidebar>
  <ComponentSidebarContent
    activeHref="/overview"
    groups={groups}
  />
</ComponentSidebar>

Framework links

Use renderLink to preserve client-side navigation. The component supplies the active ref, accessibility attributes, external-link attributes, feedback handlers, and children, so spread all supplied props.

import type { Route } from "next";
import Link from "next/link";
 
function renderLink({ href, ...props }) {
  return <Link href={href as Route} {...props} />;
}
 
<ComponentSidebarContent
  activeHref={pathname}
  groups={groups}
  renderLink={renderLink}
/>

Layout

Override the component's CSS variables with utilities when it needs to fit a specific shell.

<ComponentSidebar className="[--component-sidebar-height:calc(100svh-4rem)] [--component-sidebar-top:4rem] [--component-sidebar-width:16rem]">
  {/* Navigation */}
</ComponentSidebar>

Accessibility

The toggle has an accessible name, exposes its expanded state, and points to the controlled panel. Closed content is inert, active links use aria-current, and the default S shortcut is ignored while typing in editable controls. Set shortcutKey={false} when a single-key shortcut is not appropriate.

API reference