Components
Loading preview...
A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
npx shadcn@latest add https://21st.dev/r/shadcn/menubarimport {
Menubar,
MenubarContent,
MenubarItem,
MenubarMenu,
MenubarSeparator,
MenubarTrigger,
} from "@/components/ui/menubar";
import {
Activity,
Bookmark,
BookmarkCheck,
BarChart3,
Folder,
Home,
LayoutGrid,
PlusCircle,
Share2,
Star,
Tag,
Settings,
} from "lucide-react";
function Basic() {
return (
<Menubar>
<MenubarMenu>
<MenubarTrigger>
<LayoutGrid className="mr-2 size-4" />
Dashboard
</MenubarTrigger>
<MenubarContent>
<MenubarItem>
<Home className="mr-2 size-4" />
Overview
</MenubarItem>
<MenubarItem>
<Activity className="mr-2 size-4" />
Recent Activity
</MenubarItem>
<MenubarItem>
<BarChart3 className="mr-2 size-4" />
Stats
</MenubarItem>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger>
<Bookmark className="mr-2 size-4" />
Bookmarks
</MenubarTrigger>
<MenubarContent>
<MenubarItem>
<BookmarkCheck className="mr-2 size-4" />
All Bookmarks
</MenubarItem>
<MenubarItem>
<Tag className="mr-2 size-4" />
Categories
</MenubarItem>
<MenubarSeparator />
<MenubarItem>
<Star className="mr-2 size-4" />
Favorites
</MenubarItem>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger>
<Folder className="mr-2 size-4" />
Collections
</MenubarTrigger>
<MenubarContent>
<MenubarItem>
<PlusCircle className="mr-2 size-4" />
Create Collection
</MenubarItem>
<MenubarSeparator />
<MenubarItem>
<Settings className="mr-2 size-4" />
Manage Collections
</MenubarItem>
<MenubarItem>
<Share2 className="mr-2 size-4" />
Shared Collections
</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>
);
}
export { Basic }