Binhlaig UI Component

Navbar

A responsive navigation bar with brand, links, actions and mobile menu support.

Installation

Initialize Binhlaig UI once, then install Navbar using the saved installer.

Initialize first

npx binhlaig-ui@latest init

Terminal

npx binhlaig-ui@latest add navbar

Import

Import the Navbar primitives you need.

import {
  Navbar,
  NavbarActions,
  NavbarBrand,
  NavbarContainer,
  NavbarLink,
  NavbarMenuButton,
  NavbarMobileLink,
  NavbarMobileMenu,
  NavbarNav,
} from "@/components/ui/navbar"

Basic

Use brand, navigation links and actions inside the navbar container.

Binhlaig UI

Responsive

Hide desktop navigation and show a mobile menu button on smaller screens.

Binhlaig UI

Active Link

Use the active prop to highlight the current route.

Home Docs Components

With Actions

Add search, theme controls or primary actions.

Binhlaig UI

Update or Overwrite

Replace an older Navbar source with the latest registry version.

npx binhlaig-ui@latest add navbar --overwrite

API Reference

Main primitives available in Binhlaig UI Navbar.

Component	Purpose
`Navbar`	Root navigation header.
`NavbarContainer`	Centers and spaces navbar content.
`NavbarBrand`	Brand or logo link.
`NavbarNav`	Desktop navigation links.
`NavbarLink`	Navigation link with active state.
`NavbarActions`	Right-side action controls.
`NavbarMenuButton`	Mobile menu toggle.
`NavbarMobileMenu`	Responsive mobile navigation panel.
`NavbarMobileLink`	Mobile navigation link.

Previous component

Label

All components