Navbar

Responsive top navigation bar for marketing pages with brand, links, CTA, and mobile menu

The Navbar component provides a responsive top navigation bar for marketing and landing pages. It supports a brand slot, navigation links with active states, a call-to-action button, a custom actions slot, and a built-in mobile hamburger menu.

Import

import { Navbar } from '@nim-ui/components';

Usage

Code

<Navbar
  brand="Nim UI"
  links={[
    { label: 'Features', href: '/features' },
    { label: 'Pricing', href: '/pricing', active: true },
    { label: 'Docs', href: '/docs' },
  ]}
/>

With CTA Button

Code

<Navbar
  brand="Nim UI"
  links={[
    { label: 'Features', href: '/features' },
    { label: 'Pricing', href: '/pricing' },
  ]}
  cta={{ label: 'Get Started', href: '/signup' }}
/>

Sticky

Set sticky to keep the navbar pinned to the top of the viewport while scrolling.

Code

<Navbar
  sticky
  brand="Nim UI"
  links={[
    { label: 'Features', href: '/features' },
    { label: 'Docs', href: '/docs' },
  ]}
  cta={{ label: 'Sign Up', onClick: () => setShowSignup(true) }}
/>

Props

Name	Type	Default	Description
`brand`	`React.ReactNode`	-	Brand content displayed at the start of the navbar — text or a logo node
`brandHref`	`string`	`'/'`	Destination for the brand link
`links`	`{ label: string; href: string; active?: boolean }[]`	-	Navigation links; the active link is marked with aria-current="page"
`cta`	`{ label: string; href?: string; onClick?: () => void }`	-	Primary call-to-action button; renders an anchor when href is provided
`actions`	`React.ReactNode`	-	Custom content rendered before the CTA — e.g. a theme toggle or search button
`sticky`	`boolean`	`false`	Pins the navbar to the top of the viewport while scrolling
`className`	`string`	-	Additional CSS classes to apply to the root element

Usage Examples

function LandingPage() {
  return (
    <>
      <Navbar
        sticky
        brand="Nim UI"
        links={[
          { label: 'Features', href: '#features' },
          { label: 'Pricing', href: '#pricing' },
          { label: 'Docs', href: '/docs' },
        ]}
        cta={{ label: 'Get Started', href: '/signup' }}
      />
      <Hero title="Build beautiful interfaces" />
      {/* Rest of landing page */}
    </>
  );
}

With Custom Actions

function SiteHeader() {
  return (
    <Navbar
      brand={<Logo className="h-6" />}
      links={[{ label: 'Docs', href: '/docs' }]}
      actions={<ThemeToggle />}
      cta={{ label: 'Sign In', href: '/login' }}
    />
  );
}

Accessibility

The Navbar component follows accessibility best practices:

Uses a semantic <header> element containing a <nav> landmark labelled "Main"
The active link is marked with aria-current="page"
The mobile menu toggle exposes aria-expanded, aria-controls, and an accessible label
CTA renders a proper <a> or <button> element depending on whether href or onClick is provided
All interactive elements have visible focus rings and support keyboard navigation

Hero - Landing page hero section
Footer - Marketing site footer
SidebarNav - Sidebar navigation for admin workspaces

Import

Usage

With CTA Button

Sticky

Props

Usage Examples

Landing Page Navigation

With Custom Actions

Accessibility

On this page