Components
Loading preview...
Here is Menu component
@jollyshopland
npx shadcn@latest add https://21st.dev/r/jollyshopland/menu-1import { Button } from "@/components/ui/button-1"
import {
Menu,
MenuItem,
MenuPopover,
MenuSubTrigger,
MenuTrigger,
} from "@/components/ui/menu-1"
export default function MenuSubMenuDynamic() {
let items = [
{ id: "cut", name: "Cut" },
{ id: "copy", name: "Copy" },
{ id: "delete", name: "Delete" },
{
id: "share",
name: "Share",
children: [
{ id: "sms", name: "SMS" },
{ id: "twitter", name: "Twitter" },
{
id: "email",
name: "Email",
children: [
{ id: "work", name: "Work" },
{ id: "personal", name: "Personal" },
],
},
],
},
]
return (
<MenuTrigger>
<Button variant="outline">Actions</Button>
<MenuPopover>
<Menu items={items}>
{function renderSubmenu(item) {
if (item.children) {
return (
<MenuSubTrigger>
<MenuItem key={item.name}>{item.name}</MenuItem>
<MenuPopover>
<Menu items={item.children}>
{(item) => renderSubmenu(item)}
</Menu>
</MenuPopover>
</MenuSubTrigger>
)
} else {
return <MenuItem key={item.name}>{item.name}</MenuItem>
}
}}
</Menu>
</MenuPopover>
</MenuTrigger>
)
}