Component

Navbar

A sticky header with navigation links, logo, and action slots. Responsive with links hidden on mobile. Uses the headless @refraction-ui/navbar core.

Examples

Navbar with links, active state, logo, and action button.

Installation

$pnpm add @refraction-ui/react-navbar

Usage

tsx

import { Navbar } from '@refraction-ui/react-navbar'

export function MyComponent() {
  return (
    <Navbar
      links={[
        { label: 'Home', href: '/' },
        { label: 'Docs', href: '/docs' },
      ]}
      currentPath="/"
      logo={<span>MyApp</span>}
      actions={<button>Sign In</button>}
    />
  )
}

Props

Prop	Type	Default	Description
`links`	`NavLink[]`	--	Array of { label, href } navigation links.
`currentPath`	`string`	--	Current pathname for active link highlighting.
`variant`	`NavbarVariant`	--	Visual variant of the navbar.
`logo`	`ReactNode`	--	Logo or brand element (left side).
`actions`	`ReactNode`	--	Action buttons (right side).
`className`	`string`	--	Additional CSS classes.