Sidebar Nav — Beautiful UI v44a274e59839 docs

Install: npx shadcn@latest add https://jiguang132.com/r/beautiful-ui/sidebar-nav.json

When to use

Build an agent application's navigation and recent-conversation list.

Key props and data

Native prop	Meaning
`recents`	Stable id and label, plus optional prompt for each conversation.
`activeNav`	Controlled primary navigation key.
`activeTitle`	Selected recent-conversation title or null.
`onNavigate`	Update your router/selection using the emitted navigation key.
`onPick`	Receives recent id, label and optional prompt.
`onNewChat`	Start a new conversation in your own application.
`footerLabel`	Replace the demo Upgrade call-to-action with your own action.
`onFooterClick`	Handle the footer action yourself.

Interaction and state checks

Connect the native callbacks to application state; verify collapsed/expanded navigation, selected recent items and keyboard focus.

Integration boundaries

The component provides no router, accounts or paid upgrade flow. Do not imply those services exist because a demo button is visible.

The runnable usage and source reference below preserve the native API. These practical guides do not claim a full translation of upstream prose.

Runnable usage

Install a complete example below first, then import its installed entry. Parameterized example source, shared helpers, native components and CSS are included; no manual relative-import edits are required.

import Demo from '@/components/beautiful-ui/examples/presets/sidebar-nav-controlled-navigation';
import '@/styles/beautiful-ui.css';
export default function Example() { return <Demo />; }

Preview states

Default, Controlled navigation

Demo state and mock data do not provide a backend service. Inspect the component props before wiring real data.

Collapsible workspace and chat navigation with gliding hover states.

Complete example installation

These are runnable native states and parameterized usage scenarios, not additional components. Each bundle includes its source closure, helpers, pinned dependencies, independent CSS and licenses. Scenario names are not new native component props; consult the source API below.

Default

npx shadcn@latest add https://jiguang132.com/r/beautiful-ui/examples/sidebar-nav/sidebar-nav-default.json

Default import: @/components/beautiful-ui/examples/presets/sidebar-nav-default

Dependencies: clsx@2.1.1, lucide-react@1.24.0, tailwind-merge@3.6.0, shadow-plugin@2.1.1

npx shadcn@latest add https://jiguang132.com/r/beautiful-ui/examples/sidebar-nav/sidebar-nav-controlled-navigation.json

Default import: @/components/beautiful-ui/examples/presets/sidebar-nav-controlled-navigation

Dependencies: clsx@2.1.1, lucide-react@1.24.0, tailwind-merge@3.6.0, shadow-plugin@2.1.1

Initialize Tailwind CSS v4, import beautiful-ui.css once and synchronize theme with the host html dark class. Examples read html lang for Chinese/English and do not supply backend, authentication or recording. Network/clipboard availability still depends on the browser.

Source-backed parameter reference

Implementation signatures and types are generated from the pinned local source. Optional props, native inherited types, union branches and never exclusions are preserved. A forwardRef implementation's ref is a React reference, not an additional business prop.

SidebarNav({
  activeTitle,
  className = "",
  fill = false,
  onNewChat,
  onPick,
  activeNav,
  onNavigate,
  footerLabel = "Upgrade",
  footerIcon,
  onFooterClick,
  recents = DEFAULT_RECENTS,
}: SidebarNavProps)

export type SidebarRecent = {
  id: string;
  label: string;
  prompt?: string;
};

type SidebarNavProps = {
  activeTitle?: string | null;
  className?: string;
  fill?: boolean;
  onNewChat?: () => void;
  onPick?: (id: string, label: string, prompt?: string) => void;
  /** controlled primary-nav selection (e.g. "home" | "invite") */
  activeNav?: string;
  onNavigate?: (key: string) => void;
  /** footer call-to-action — defaults to the demo "Upgrade" button */
  footerLabel?: string;
  footerIcon?: ReactNode;
  onFooterClick?: () => void;
  recents?: SidebarRecent[];
  variant?: string;
};

Destructuring defaults in source

Only defaults written directly in parameter/props destructuring are listed. Conditional expressions, runtime theme and computed values require source inspection; this is not an exhaustive behavior-default list.

// SidebarNav
className = ""

// SidebarNav
fill = false

// SidebarNav
footerLabel = "Upgrade"

// SidebarNav
recents = DEFAULT_RECENTS

Native and external types

External types remain defined by React or native dependencies, not manually expanded into guessed props. The installed version's TypeScript definitions are authoritative.

ReactNode