Components
Loading preview...
The AppMenuBar component is a versatile, fully-featured navigation menu designed for modern web applications. It combines a clean, horizontal menubar layout with intuitive nested menus, allowing users to easily access projects, teams, calendar events, notifications, and files. Each menu item is enhanced with clear Lucide icons, and nested submenus are implemented using MenubarSub, ensuring that hover interactions are smooth and the parent menu stays open when navigating into submenus. The component supports multiple levels of navigation without closing unexpectedly, maintains consistent spacing between icons and text, and leverages subtle hover effects for better visual feedback. Its modular structure makes it highly customizable, making it ideal for dashboards, admin panels, or collaborative tools where organized and accessible
npx shadcn@latest add https://21st.dev/r/ruixen.ui/app-menu-bar"use client";
import AppMenuBar from "@/components/ui/app-menu-bar";
export default function MenuDemoPage() {
return (
<div className="p-6">
<AppMenuBar />
</div>
);
}