shadimage
herocn
blocksidebar-15source: ok · refreshed

Sidebar 15

A left and right sidebar.

npx shadcn add "https://herocn.dev/r/sidebar-15.json"
free
herocn

Where it goes

sidebardashboard-shell

Use cases

dashboard

Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.

Dependencies

Bundle weight · light

Registry dependencies

@herocn/sidebar@herocn/breadcrumb@herocn/separator@herocn/popover@herocn/collapsible@herocn/dropdown-menu@herocn/calendar@herocn/avatar

Files11 · source cached 10/8/2026, 4:13:23 AM

page.tsx
import { SidebarLeft } from "@/components/sidebar-left";
import { SidebarRight } from "@/components/sidebar-right";
import {
	Breadcrumb,
	BreadcrumbItem,
	BreadcrumbList,
	BreadcrumbPage,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import {
	SidebarInset,
	SidebarProvider,
	SidebarTrigger,
} from "@/components/ui/sidebar";

export default function Page() {
	return (
		<SidebarProvider>
			<SidebarLeft />
			<SidebarInset>
				<header className="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background">
					<div className="flex flex-1 items-center gap-2 px-3">
						<SidebarTrigger />
						<Separator
							orientation="vertical"
							className="mr-2 data-[orientation=vertical]:h-4"
						/>
						<Breadcrumb>
							<BreadcrumbList>
								<BreadcrumbItem>
									<BreadcrumbPage className="line-clamp-1">
										Project Management & Task Tracking
									</BreadcrumbPage>
								</BreadcrumbItem>
							</BreadcrumbList>
						</Breadcrumb>
					</div>
				</header>
				<div className="flex flex-1 flex-col gap-4 p-4">
					<div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
					<div className="mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50" />
				</div>
			</SidebarInset>
			<SidebarRight />
		</SidebarProvider>
	);
}
components/calendars.tsx
"use client";

import { CheckIcon, ChevronRightIcon } from "lucide-react";

import * as React from "react";

import {
	Collapsible,
	CollapsibleContent,
	CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
	SidebarGroup,
	SidebarGroupContent,
	SidebarGroupLabel,
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
	SidebarSeparator,
} from "@/components/ui/sidebar";

export function Calendars({
	calendars,
}: {
	calendars: {
		name: string;
		items: string[];
	}[];
}) {
	return (
		<>
			{calendars.map((calendar, index) => (
				<React.Fragment key={calendar.name}>
					<SidebarGroup className="p-0" key={calendar.name}>
						<Collapsible
							defaultOpen={index === 0}
							className="group/collapsible"
						>
							<SidebarGroupLabel
								className="group/label h-auto w-full rounded-none p-4 text-sidebar-foreground text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
								render={<CollapsibleTrigger />}
							>
								{calendar.name}{" "}
								<ChevronRightIcon className="ml-auto transition-transform group-data-open/collapsible:rotate-90" />
							</SidebarGroupLabel>
							<CollapsibleContent>
								<SidebarGroupContent>
									<SidebarMenu>
										{calendar.items.map((item, index) => (
											<SidebarMenuItem key={item}>
												<SidebarMenuButton>
													<div
														data-active={index < 2}
														className="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
													>
														<CheckIcon className="hidden size-3 group-data-[active=true]/calendar-item:block" />
													</div>
													{item}
												</SidebarMenuButton>
											</SidebarMenuItem>
										))}
									</SidebarMenu>
								</SidebarGroupContent>
							</CollapsibleContent>
						</Collapsible>
					</SidebarGroup>
					<SidebarSeparator className="mx-0" />
				</React.Fragment>
			))}
		</>
	);
}
components/date-picker.tsx
import * as React from "react";

import { Calendar } from "@/components/ui/calendar";
import {
	SidebarGroup,
	SidebarGroupContent,
} from "@/components/ui/sidebar";

export function DatePicker() {
	const [date, setDate] = React.useState<Date | undefined>(
		new Date(new Date().getFullYear(), new Date().getMonth(), 12),
	);
	return (
		<SidebarGroup className="px-0">
			<SidebarGroupContent>
				<Calendar
					mode="single"
					selected={date}
					onSelect={setDate}
					captionLayout="dropdown"
					className="bg-transparent [--cell-size:2.1rem]"
				/>
			</SidebarGroupContent>
		</SidebarGroup>
	);
}
components/nav-favorites.tsx
"use client";

import {
	ArrowUpRightIcon,
	LinkIcon,
	MoreHorizontalIcon,
	StarOffIcon,
	Trash2Icon,
} from "lucide-react";

import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
	SidebarGroup,
	SidebarGroupLabel,
	SidebarMenu,
	SidebarMenuAction,
	SidebarMenuButton,
	SidebarMenuItem,
	useSidebar,
} from "@/components/ui/sidebar";

export function NavFavorites({
	favorites,
}: {
	favorites: {
		name: string;
		url: string;
		emoji: string;
	}[];
}) {
	const { isMobile } = useSidebar();
	return (
		<SidebarGroup className="group-data-[collapsible=icon]:hidden">
			<SidebarGroupLabel>Favorites</SidebarGroupLabel>
			<SidebarMenu>
				{favorites.map((item) => (
					<SidebarMenuItem key={item.name}>
						<SidebarMenuButton render={<a href={item.url} title={item.name} />}>
							<span>{item.emoji}</span>
							<span>{item.name}</span>
						</SidebarMenuButton>
						<DropdownMenu>
							<DropdownMenuTrigger
								render={
									<SidebarMenuAction
										showOnHover
										className="aria-expanded:bg-muted"
									/>
								}
							>
								<MoreHorizontalIcon />
								<span className="sr-only">More</span>
							</DropdownMenuTrigger>
							<DropdownMenuContent
								side={isMobile ? "bottom" : "right"}
								align={isMobile ? "end" : "start"}
							>
								<DropdownMenuItem>
									<StarOffIcon className="text-muted-foreground" />
									<span>Remove from Favorites</span>
								</DropdownMenuItem>
								<DropdownMenuSeparator />
								<DropdownMenuItem>
									<LinkIcon className="text-muted-foreground" />
									<span>Copy Link</span>
								</DropdownMenuItem>
								<DropdownMenuItem>
									<ArrowUpRightIcon className="text-muted-foreground" />
									<span>Open in New Tab</span>
								</DropdownMenuItem>
								<DropdownMenuSeparator />
								<DropdownMenuItem variant="destructive">
									<Trash2Icon className="text-muted-foreground" />
									<span>Delete</span>
								</DropdownMenuItem>
							</DropdownMenuContent>
						</DropdownMenu>
					</SidebarMenuItem>
				))}
				<SidebarMenuItem>
					<SidebarMenuButton className="text-sidebar-foreground/70">
						<MoreHorizontalIcon />
						<span>More</span>
					</SidebarMenuButton>
				</SidebarMenuItem>
			</SidebarMenu>
		</SidebarGroup>
	);
}
components/nav-main.tsx
"use client";

import {
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
} from "@/components/ui/sidebar";

export function NavMain({
	items,
}: {
	items: {
		title: string;
		url: string;
		icon: React.ReactNode;
		isActive?: boolean;
	}[];
}) {
	return (
		<SidebarMenu>
			{items.map((item) => (
				<SidebarMenuItem key={item.title}>
					<SidebarMenuButton
						isActive={item.isActive}
						render={<a href={item.url} />}
					>
						{item.icon}
						<span>{item.title}</span>
					</SidebarMenuButton>
				</SidebarMenuItem>
			))}
		</SidebarMenu>
	);
}
components/nav-secondary.tsx
"use client";

import type React from "react";

import {
	SidebarGroup,
	SidebarGroupContent,
	SidebarMenu,
	SidebarMenuBadge,
	SidebarMenuButton,
	SidebarMenuItem,
} from "@/components/ui/sidebar";

export function NavSecondary({
	items,
	...props
}: {
	items: {
		title: string;
		url: string;
		icon: React.ReactNode;
		badge?: React.ReactNode;
	}[];
} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
	return (
		<SidebarGroup {...props}>
			<SidebarGroupContent>
				<SidebarMenu>
					{items.map((item) => (
						<SidebarMenuItem key={item.title}>
							<SidebarMenuButton render={<a href={item.url} />}>
								{item.icon}
								<span>{item.title}</span>
							</SidebarMenuButton>
							{item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
						</SidebarMenuItem>
					))}
				</SidebarMenu>
			</SidebarGroupContent>
		</SidebarGroup>
	);
}
components/nav-user.tsx
"use client";

import {
	BadgeCheckIcon,
	BellIcon,
	ChevronsUpDownIcon,
	CreditCardIcon,
	LogOutIcon,
	SparklesIcon,
} from "lucide-react";

import {
	Avatar,
	AvatarFallback,
	AvatarImage,
} from "@/components/ui/avatar";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuGroup,
	DropdownMenuItem,
	DropdownMenuLabel,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
	useSidebar,
} from "@/components/ui/sidebar";

export function NavUser({
	user,
}: {
	user: {
		name: string;
		email: string;
		avatar: string;
	};
}) {
	const { isMobile } = useSidebar();
	return (
		<SidebarMenu>
			<SidebarMenuItem>
				<DropdownMenu>
					<DropdownMenuTrigger
						render={
							<SidebarMenuButton size="lg" className="aria-expanded:bg-muted" />
						}
					>
						<Avatar>
							<AvatarImage src={user.avatar} alt={user.name} />
							<AvatarFallback>CN</AvatarFallback>
						</Avatar>
						<div className="grid flex-1 text-left text-sm leading-tight">
							<span className="truncate font-medium">{user.name}</span>
							<span className="truncate text-xs">{user.email}</span>
						</div>
						<ChevronsUpDownIcon className="ml-auto size-4" />
					</DropdownMenuTrigger>
					<DropdownMenuContent
						side={isMobile ? "bottom" : "right"}
						align="start"
						sideOffset={4}
					>
						<DropdownMenuGroup>
							<DropdownMenuLabel className="p-0 font-normal">
								<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
									<Avatar>
										<AvatarImage src={user.avatar} alt={user.name} />
										<AvatarFallback>CN</AvatarFallback>
									</Avatar>
									<div className="grid flex-1 text-left text-sm leading-tight">
										<span className="truncate font-medium">{user.name}</span>
										<span className="truncate text-xs">{user.email}</span>
									</div>
								</div>
							</DropdownMenuLabel>
						</DropdownMenuGroup>
						<DropdownMenuSeparator />
						<DropdownMenuGroup>
							<DropdownMenuItem>
								<SparklesIcon />
								Upgrade to Pro
							</DropdownMenuItem>
						</DropdownMenuGroup>
						<DropdownMenuSeparator />
						<DropdownMenuGroup>
							<DropdownMenuItem>
								<BadgeCheckIcon />
								Account
							</DropdownMenuItem>
							<DropdownMenuItem>
								<CreditCardIcon />
								Billing
							</DropdownMenuItem>
							<DropdownMenuItem>
								<BellIcon />
								Notifications
							</DropdownMenuItem>
						</DropdownMenuGroup>
						<DropdownMenuSeparator />
						<DropdownMenuGroup>
							<DropdownMenuItem>
								<LogOutIcon />
								Log out
							</DropdownMenuItem>
						</DropdownMenuGroup>
					</DropdownMenuContent>
				</DropdownMenu>
			</SidebarMenuItem>
		</SidebarMenu>
	);
}
components/nav-workspaces.tsx
"use client";

import { ChevronRightIcon, MoreHorizontalIcon, PlusIcon } from "lucide-react";

import {
	Collapsible,
	CollapsibleContent,
	CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
	SidebarGroup,
	SidebarGroupContent,
	SidebarGroupLabel,
	SidebarMenu,
	SidebarMenuAction,
	SidebarMenuButton,
	SidebarMenuItem,
	SidebarMenuSub,
	SidebarMenuSubButton,
	SidebarMenuSubItem,
} from "@/components/ui/sidebar";

export function NavWorkspaces({
	workspaces,
}: {
	workspaces: {
		name: string;
		emoji: React.ReactNode;
		pages: {
			name: string;
			emoji: React.ReactNode;
		}[];
	}[];
}) {
	return (
		<SidebarGroup>
			<SidebarGroupLabel>Workspaces</SidebarGroupLabel>
			<SidebarGroupContent>
				<SidebarMenu>
					{workspaces.map((workspace) => (
						<Collapsible key={workspace.name}>
							<SidebarMenuItem>
								<SidebarMenuButton render={<a href="#" />}>
									<span>{workspace.emoji}</span>
									<span>{workspace.name}</span>
								</SidebarMenuButton>
								<SidebarMenuAction
									render={<CollapsibleTrigger />}
									className="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-open:rotate-90"
									showOnHover
								>
									<ChevronRightIcon />
								</SidebarMenuAction>
								<SidebarMenuAction showOnHover>
									<PlusIcon />
								</SidebarMenuAction>
								<CollapsibleContent>
									<SidebarMenuSub>
										{workspace.pages.map((page) => (
											<SidebarMenuSubItem key={page.name}>
												<SidebarMenuSubButton render={<a href="#" />}>
													<span>{page.emoji}</span>
													<span>{page.name}</span>
												</SidebarMenuSubButton>
											</SidebarMenuSubItem>
										))}
									</SidebarMenuSub>
								</CollapsibleContent>
							</SidebarMenuItem>
						</Collapsible>
					))}
					<SidebarMenuItem>
						<SidebarMenuButton className="text-sidebar-foreground/70">
							<MoreHorizontalIcon />
							<span>More</span>
						</SidebarMenuButton>
					</SidebarMenuItem>
				</SidebarMenu>
			</SidebarGroupContent>
		</SidebarGroup>
	);
}
components/sidebar-left.tsx
"use client";

import {
	AudioLinesIcon,
	BlocksIcon,
	CalendarIcon,
	HomeIcon,
	InboxIcon,
	MessageCircleQuestionIcon,
	SearchIcon,
	Settings2Icon,
	SparklesIcon,
	TerminalIcon,
	Trash2Icon,
} from "lucide-react";

import type * as React from "react";

import { NavFavorites } from "@/components/nav-favorites";
import { NavMain } from "@/components/nav-main";
import { NavSecondary } from "@/components/nav-secondary";
import { NavWorkspaces } from "@/components/nav-workspaces";
import { TeamSwitcher } from "@/components/team-switcher";
import {
	Sidebar,
	SidebarContent,
	SidebarHeader,
	SidebarRail,
} from "@/components/ui/sidebar";

// This is sample data.
const data = {
	teams: [
		{
			name: "Acme Inc",
			logo: <TerminalIcon />,
			plan: "Enterprise",
		},
		{
			name: "Acme Corp.",
			logo: <AudioLinesIcon />,
			plan: "Startup",
		},
		{
			name: "Evil Corp.",
			logo: <TerminalIcon />,
			plan: "Free",
		},
	],
	navMain: [
		{
			title: "Search",
			url: "#",
			icon: <SearchIcon />,
		},
		{
			title: "Ask AI",
			url: "#",
			icon: <SparklesIcon />,
		},
		{
			title: "Home",
			url: "#",
			icon: <HomeIcon />,
			isActive: true,
		},
		{
			title: "Inbox",
			url: "#",
			icon: <InboxIcon />,
			badge: "10",
		},
	],
	navSecondary: [
		{
			title: "Calendar",
			url: "#",
			icon: <CalendarIcon />,
		},
		{
			title: "Settings",
			url: "#",
			icon: <Settings2Icon />,
		},
		{
			title: "Templates",
			url: "#",
			icon: <BlocksIcon />,
		},
		{
			title: "Trash",
			url: "#",
			icon: <Trash2Icon />,
		},
		{
			title: "Help",
			url: "#",
			icon: <MessageCircleQuestionIcon />,
		},
	],
	favorites: [
		{
			name: "Project Management & Task Tracking",
			url: "#",
			emoji: "📊",
		},
		{
			name: "Family Recipe Collection & Meal Planning",
			url: "#",
			emoji: "🍳",
		},
		{
			name: "Fitness Tracker & Workout Routines",
			url: "#",
			emoji: "💪",
		},
		{
			name: "Book Notes & Reading List",
			url: "#",
			emoji: "📚",
		},
		{
			name: "Sustainable Gardening Tips & Plant Care",
			url: "#",
			emoji: "🌱",
		},
		{
			name: "Language Learning Progress & Resources",
			url: "#",
			emoji: "🗣️",
		},
		{
			name: "Home Renovation Ideas & Budget Tracker",
			url: "#",
			emoji: "🏠",
		},
		{
			name: "Personal Finance & Investment Portfolio",
			url: "#",
			emoji: "💰",
		},
		{
			name: "Movie & TV Show Watchlist with Reviews",
			url: "#",
			emoji: "🎬",
		},
		{
			name: "Daily Habit Tracker & Goal Setting",
			url: "#",
			emoji: "✅",
		},
	],
	workspaces: [
		{
			name: "Personal Life Management",
			emoji: "🏠",
			pages: [
				{
					name: "Daily Journal & Reflection",
					url: "#",
					emoji: "📔",
				},
				{
					name: "Health & Wellness Tracker",
					url: "#",
					emoji: "🍏",
				},
				{
					name: "Personal Growth & Learning Goals",
					url: "#",
					emoji: "🌟",
				},
			],
		},
		{
			name: "Professional Development",
			emoji: "💼",
			pages: [
				{
					name: "Career Objectives & Milestones",
					url: "#",
					emoji: "🎯",
				},
				{
					name: "Skill Acquisition & Training Log",
					url: "#",
					emoji: "🧠",
				},
				{
					name: "Networking Contacts & Events",
					url: "#",
					emoji: "🤝",
				},
			],
		},
		{
			name: "Creative Projects",
			emoji: "🎨",
			pages: [
				{
					name: "Writing Ideas & Story Outlines",
					url: "#",
					emoji: "✍️",
				},
				{
					name: "Art & Design Portfolio",
					url: "#",
					emoji: "🖼️",
				},
				{
					name: "Music Composition & Practice Log",
					url: "#",
					emoji: "🎵",
				},
			],
		},
		{
			name: "Home Management",
			emoji: "🏡",
			pages: [
				{
					name: "Household Budget & Expense Tracking",
					url: "#",
					emoji: "💰",
				},
				{
					name: "Home Maintenance Schedule & Tasks",
					url: "#",
					emoji: "🔧",
				},
				{
					name: "Family Calendar & Event Planning",
					url: "#",
					emoji: "📅",
				},
			],
		},
		{
			name: "Travel & Adventure",
			emoji: "🧳",
			pages: [
				{
					name: "Trip Planning & Itineraries",
					url: "#",
					emoji: "🗺️",
				},
				{
					name: "Travel Bucket List & Inspiration",
					url: "#",
					emoji: "🌎",
				},
				{
					name: "Travel Journal & Photo Gallery",
					url: "#",
					emoji: "📸",
				},
			],
		},
	],
};

export function SidebarLeft({
	...props
}: React.ComponentProps<typeof Sidebar>) {
	return (
		<Sidebar className="border-r-0" {...props}>
			<SidebarHeader>
				<TeamSwitcher teams={data.teams} />
				<NavMain items={data.navMain} />
			</SidebarHeader>
			<SidebarContent>
				<NavFavorites favorites={data.favorites} />
				<NavWorkspaces workspaces={data.workspaces} />
				<NavSecondary items={data.navSecondary} className="mt-auto" />
			</SidebarContent>
			<SidebarRail />
		</Sidebar>
	);
}
components/sidebar-right.tsx
"use client";

import { PlusIcon } from "lucide-react";

import type * as React from "react";

import { Calendars } from "@/components/calendars";
import { DatePicker } from "@/components/date-picker";
import { NavUser } from "@/components/nav-user";
import {
	Sidebar,
	SidebarContent,
	SidebarFooter,
	SidebarHeader,
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
	SidebarSeparator,
} from "@/components/ui/sidebar";

// This is sample data.
const data = {
	user: {
		name: "Maqed",
		email: "maqed@example.com",
		avatar: "https://github.com/maqed.png",
	},
	calendars: [
		{
			name: "My Calendars",
			items: ["Personal", "Work", "Family"],
		},
		{
			name: "Favorites",
			items: ["Holidays", "Birthdays"],
		},
		{
			name: "Other",
			items: ["Travel", "Reminders", "Deadlines"],
		},
	],
};

export function SidebarRight({
	...props
}: React.ComponentProps<typeof Sidebar>) {
	return (
		<Sidebar
			collapsible="none"
			className="sticky top-0 hidden h-svh border-l lg:flex"
			{...props}
		>
			<SidebarHeader className="h-16 border-sidebar-border border-b">
				<NavUser user={data.user} />
			</SidebarHeader>
			<SidebarContent className="gap-0">
				<DatePicker />
				<SidebarSeparator className="mx-0" />
				<Calendars calendars={data.calendars} />
			</SidebarContent>
			<SidebarFooter>
				<SidebarMenu>
					<SidebarMenuItem>
						<SidebarMenuButton>
							<PlusIcon />
							<span>New Calendar</span>
						</SidebarMenuButton>
					</SidebarMenuItem>
				</SidebarMenu>
			</SidebarFooter>
		</Sidebar>
	);
}
components/team-switcher.tsx
"use client";

import { ChevronDownIcon, PlusIcon } from "lucide-react";

import * as React from "react";

import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuGroup,
	DropdownMenuItem,
	DropdownMenuLabel,
	DropdownMenuSeparator,
	DropdownMenuShortcut,
	DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
} from "@/components/ui/sidebar";

export function TeamSwitcher({
	teams,
}: {
	teams: {
		name: string;
		logo: React.ReactNode;
		plan: string;
	}[];
}) {
	const [activeTeam, setActiveTeam] = React.useState(teams[0]);
	if (!activeTeam) {
		return null;
	}
	return (
		<SidebarMenu>
			<SidebarMenuItem>
				<DropdownMenu>
					<DropdownMenuTrigger
						render={
							<SidebarMenuButton className="w-fit px-1.5 aria-expanded:bg-muted aria-expanded:text-foreground" />
						}
					>
						<div className="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
							{activeTeam.logo}
						</div>
						<span className="truncate font-medium">{activeTeam.name}</span>
						<ChevronDownIcon className="opacity-50" />
					</DropdownMenuTrigger>
					<DropdownMenuContent align="start" side="bottom" sideOffset={4}>
						<DropdownMenuGroup>
							<DropdownMenuLabel className="text-muted-foreground text-xs">
								Teams
							</DropdownMenuLabel>
							{teams.map((team, index) => (
								<DropdownMenuItem
									key={team.name}
									onClick={() => setActiveTeam(team)}
									className="gap-2 p-2"
								>
									<div className="flex size-6 items-center justify-center rounded-xs border">
										{team.logo}
									</div>
									{team.name}
									<DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
								</DropdownMenuItem>
							))}
						</DropdownMenuGroup>
						<DropdownMenuSeparator />
						<DropdownMenuGroup>
							<DropdownMenuItem className="gap-2 p-2">
								<div className="flex size-6 items-center justify-center rounded-md border bg-background">
									<PlusIcon className="size-4" />
								</div>
								<div className="font-medium text-muted-foreground">
									Add team
								</div>
							</DropdownMenuItem>
						</DropdownMenuGroup>
					</DropdownMenuContent>
				</DropdownMenu>
			</SidebarMenuItem>
		</SidebarMenu>
	);
}

More from herocn

AccordionuiAccordion BasicexampleAccordion BordersexampleAccordion CardexampleAccordion DemoexampleAccordion DisabledexampleAccordion MultipleexampleAccordion Rtlexample
Browse all components in this library →