Navbar

A responsive navigation bar with brand, links, and mobile toggle. Supports multiple style variants — copy it into your project and own it completely.

Variants

Active Link

Content Alignment

Installation

npx visor add navbar

This copies two files into your project:

components/ui/navbar/navbar.tsx — the component
components/ui/navbar/navbar.module.css — the styles

Usage

import {
  Navbar,
  NavbarBrand,
  NavbarContent,
  NavbarItem,
  NavbarLink,
} from '@/components/ui/navbar/navbar';

export default function Example() {
  return (
    <Navbar>
      <NavbarBrand>My App</NavbarBrand>
      <NavbarContent>
        <NavbarItem><NavbarLink href="/">Home</NavbarLink></NavbarItem>
        <NavbarItem><NavbarLink href="/about">About</NavbarLink></NavbarItem>
      </NavbarContent>
    </Navbar>
  );
}

API Reference

NavbarProps

Prop	Type	Default	Description
`variant`	`'default' \| 'transparent' \| 'bordered'`	`'default'`	Visual style variant of the navbar.
`className`	`string`	—	Additional CSS class names to merge onto the element.
`...props (NavbarContent)`	`align?: "start" \| "center" \| "end"`	`'start'`	Alignment of NavbarContent children. Pass as prop on NavbarContent.
`...props (NavbarLink)`	`isActive?: boolean`	`false`	Marks a NavbarLink as the current page. Sets aria-current="page".

The Navbar component renders a <nav> element and accepts all standard HTML nav attributes in addition to the props above.

Sub-components

Component	Element	Purpose
`Navbar`	`<nav>`	Root navigation container with `aria-label="main"`
`NavbarBrand`	`<div>`	Brand / logo area on the left
`NavbarContent`	`<div>`	Container for navigation links; supports `align` prop
`NavbarItem`	`<div>`	Wrapper for a single navigation item
`NavbarLink`	`<a>`	Navigation anchor with active state support
`NavbarToggle`	`<button>`	Mobile hamburger toggle button

Accessibility

The Navbar renders a <nav> element with aria-label="main" to identify it as the primary navigation landmark.
NavbarLink sets aria-current="page" when isActive is true, communicating the current page to screen readers.
NavbarToggle includes a built-in aria-label="Toggle navigation" for mobile menus.
Use a single <Navbar> with aria-label="main" per page. If you have secondary navigation, use additional <nav> landmarks with distinct labels.
Keyboard navigation follows standard anchor and button behavior — all interactive elements are reachable via Tab.

Navbar

On this page