Home/Components/Navigation Menu
Back to components

Navigation Menu

Dark-themed sidebar navigation with collapsible sections.

Navigation
Navigation Menu

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>
  )
}