Components
Loading preview...
Here is Navigation Bar component
npx shadcn@latest add https://21st.dev/r/originui/navigation-menu-4import { Button } from "@/components/ui/button"
import {
NavigationMenu,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
} from "@/components/ui/navigation-menu"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Badge } from "@/components/ui/badge"
import { Bell, Info, HelpCircle, FileText, Users, Settings } from "lucide-react"
// Custom InfoMenu Component
function InfoMenu() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="size-8">
<Info className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56">
<DropdownMenuLabel>Information</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>
<HelpCircle className="mr-2 h-4 w-4" />
Help Center
</DropdownMenuItem>
<DropdownMenuItem>
<FileText className="mr-2 h-4 w-4" />
Documentation
</DropdownMenuItem>
<DropdownMenuItem>
<Users className="mr-2 h-4 w-4" />
Community
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<Settings className="mr-2 h-4 w-4" />
System Status
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}
// Custom NotificationMenu Component
function NotificationMenu() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="size-8 relative">
<Bell className="h-4 w-4" />
<Badge
variant="destructive"
className="absolute -top-1 -right-1 h-5 w-5 rounded-full p-0 text-xs flex items-center justify-center"
>
3
</Badge>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-80">
<DropdownMenuLabel className="flex items-center justify-between">
Notifications
<Badge variant="secondary" className="ml-2">3 new</Badge>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem className="flex-col items-start p-3">
<div className="flex w-full items-center justify-between">
<span className="font-medium">New feature released</span>
<span className="text-xs text-muted-foreground">2m ago</span>
</div>
<span className="text-sm text-muted-foreground mt-1">
Check out our latest updates and improvements
</span>
</DropdownMenuItem>
<DropdownMenuItem className="flex-col items-start p-3">
<div className="flex w-full items-center justify-between">
<span className="font-medium">System maintenance</span>
<span className="text-xs text-muted-foreground">1h ago</span>
</div>
<span className="text-sm text-muted-foreground mt-1">
Scheduled maintenance tonight from 2-4 AM
</span>
</DropdownMenuItem>
<DropdownMenuItem className="flex-col items-start p-3">
<div className="flex w-full items-center justify-between">
<span className="font-medium">Welcome to the platform</span>
<span className="text-xs text-muted-foreground">3h ago</span>
</div>
<span className="text-sm text-muted-foreground mt-1">
Get started with our quick tour guide
</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem className="justify-center text-center">
View all notifications
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}
// Custom UserMenu Component
function UserMenu() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="size-8 rounded-full">
<div className="h-6 w-6 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-xs font-medium">
U
</div>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56">
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Settings</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>Log out</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}
// Navigation links array to be used in both desktop and mobile menus
const navigationLinks = [
{ href: "#", label: "Home" },
{ href: "#", label: "Features" },
{ href: "#", label: "Pricing" },
{ href: "#", label: "About" },
]
export default function Component() {
return (
<header className="border-b px-4 md:px-6">
<div className="flex h-16 items-center justify-between gap-8">
{/* Left side */}
<div className="flex items-center gap-6">
{/* Mobile menu trigger with animation */}
<Popover>
<PopoverTrigger asChild>
<Button
className="group size-8 md:hidden"
variant="ghost"
size="icon"
>
<svg
className="pointer-events-none"
width={16}
height={16}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 12L20 12"
className="origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[315deg]"
/>
<path
d="M4 12H20"
className="origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45"
/>
<path
d="M4 12H20"
className="origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[135deg]"
/>
</svg>
</Button>
</PopoverTrigger>
<PopoverContent align="start" className="w-36 p-1 md:hidden">
<NavigationMenu className="max-w-none *:w-full">
<NavigationMenuList className="flex-col items-start gap-0 md:gap-2">
{navigationLinks.map((link, index) => (
<NavigationMenuItem key={index} className="w-full">
<NavigationMenuLink href={link.href} className="py-1.5">
{link.label}
</NavigationMenuLink>
</NavigationMenuItem>
))}
</NavigationMenuList>
</NavigationMenu>
</PopoverContent>
</Popover>
{/* Main nav */}
<div className="flex items-center gap-8">
<a href="#" className="text-primary hover:text-primary/90">
<h2>logo</h2>
</a>
{/* Navigation menu with hover effects */}
<NavigationMenu className="max-md:hidden">
<NavigationMenuList className="gap-6">
{navigationLinks.map((link, index) => (
<NavigationMenuItem key={index}>
<NavigationMenuLink
href={link.href}
className="text-muted-foreground hover:text-primary py-1.5 font-medium"
>
{link.label}
</NavigationMenuLink>
</NavigationMenuItem>
))}
</NavigationMenuList>
</NavigationMenu>
</div>
</div>
{/* Right side */}
<div className="flex items-center gap-4">
<div className="flex items-center gap-4">
{/* Info menu */}
<InfoMenu />
{/* Notification */}
<NotificationMenu />
</div>
{/* User menu */}
<UserMenu />
</div>
</div>
</header>
)
}