Nav Bar
Navigation components for desktop and mobile applications with support for icons, labels, expandable items, and active states.
Installation
The TopNavbar component is part of the design system. Import it from the UI package.
import { NavMenu, NavMenuItem } from "@/components/ui/nav-menu"
import { TopNavbar } from "@/components/ui/top-navbar"Usage
Use TopNavbar with user, timezone, and optional menu. Copy the example below to get started.
Top Navbar
The top navigation bar component displays the logo, timezone selector, language selector, and user profile.
Examples
Expandable Items
Controlled Component
Full Menu Example
API Reference
The TopNavbar component displays a top navigation bar with logo, user, and timezone. See the interface below for full prop details.
interface NavMenuItem {
id: string
label: string
icon?: string
active?: boolean
disabled?: boolean
href?: string
onClick?: () => void
expandable?: boolean
expanded?: boolean
onToggle?: (id: string) => void
children?: NavMenuItem[]
}
interface NavMenuProps {
items: NavMenuItem[]
activeItemId?: string
onItemClick?: (item: NavMenuItem) => void
width?: string | number
}