DUI
⌘K

Components / Layout

Menu

Navigation menu with items and submenus.

Preview

1import { Menu } from "@/components/ui/menu"2
3export function MenuDemo() {4  const items = [5    { id: "home", label: "Home", icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /></svg> },6    { id: "docs", label: "Documentation", badge: 12 },7    { id: "components", label: "Components", children: [{ id: "ui", label: "UI Components" }, { id: "blocks", label: "Blocks" }] }8  ]9  return <Menu items={items} />10}

sidebar

The sidebar style of this component.

1import { Menu } from "@/components/ui/menu"2
3export function MenuDemo() {4  const items = [5    { id: "home", label: "Home", icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /></svg> },6    { id: "docs", label: "Documentation", badge: 12 },7    { id: "components", label: "Components", children: [{ id: "ui", label: "UI Components" }, { id: "blocks", label: "Blocks" }] }8  ]9  return <Menu items={items} />10}

Installation

Add the source directly to your project with the shadcn CLI.

npx shadcn@latest add qentrah/DUI/menu

Usage

Install the component, import it from your configured UI directory, and adapt the source to your product. Open the source panel under any example to copy that exact variant.

Navigation