Navigation
React
import {
NavigationMenu,
NavigationMenuList,
NavigationMenuItem,
NavigationMenuTrigger,
NavigationMenuContent,
NavigationMenuLink,
NavigationMenuIndicator,
NavigationMenuViewport
} from '@/components/ui/navigation-menu'
import { Home, Settings, Users } from 'lucide-react'
export default function App() {
return (
<NavigationMenu
items={[
{ label: 'Dashboard', icon: <Home />, href: '/' },
{ label: 'Users', icon: <Users />, href: '/users' },
{ label: 'Settings', icon: <Settings />, href: '/settings' },
]}
/>
)
}
Next.js
import {
NavigationMenu,
NavigationMenuList,
NavigationMenuItem,
NavigationMenuTrigger,
NavigationMenuContent,
NavigationMenuLink,
NavigationMenuIndicator,
NavigationMenuViewport
} from '@/components/ui/navigation-menu'
import { Home, Settings, Users } from 'lucide-react'
export default function DashboardLayout({ children }) {
return (
<div className="flex h-screen">
<NavigationMenu
items={[
{ label: 'Dashboard', icon: <Home />, href: '/' },
{ label: 'Users', icon: <Users />, href: '/users' },
{ label: 'Settings', icon: <Settings />, href: '/settings' },
]}
/>
<main className="flex-1 p-6">{children}</main>
</div>
)
}
Variants
Light
Dark