Menu

A flexible dropdown menu component with support for icons, keyboard shortcuts, nested submenus, and various placement options

Profile Menu

Click to see profile options

Action Menu (Right Aligned)

Right-aligned menu with actions

Context Menu with Submenus

Nested submenus with checkmarks

Simple Menu (Top Placement)

Opens above the trigger

Multiple Menus

Menu Component
tsx
1import React, { useState, useRef, useEffect } from "react";
2import { ChevronRight, Check } from "lucide-react";
3import { cn } from "@/lib/cn";
4
5interface MenuItem {
6 id: string;
7 label: string;
8 icon?: React.ReactNode;
9 disabled?: boolean;
10 shortcut?: string;