Navbar

Top navigation with optional logo and contact CTA. Supports default and sticky variants and multiple layout types.

Installation

tsx

import { Navbar } from "@workspace/ui/components/navbar"

Basic usage

Type 1 shows logo on the left and contact text + button on the right.

tsx

<Navbar
  type="1"
  logo={<h1 className="text-2xl font-bold">BRAND</h1>}
  contactText="Call us"
  contactHref="#contact"
  contactLabel="(1800) 123 - 4567"
/>

Centered logo (type 2)

Use type="2" for a centered logo with no contact CTA.

tsx

<Navbar
  type="2"
  logo={<h1 className="text-2xl font-bold">BRAND</h1>}
/>

Sticky variant

Use variant="sticky" for a fixed top bar with backdrop blur.

tsx

<Navbar
  variant="sticky"
  type="1"
  logo={<h1 className="text-2xl font-bold">BRAND</h1>}
  contactLabel="Contact"
/>

Custom contact button

Use the contactButton prop to set type, variant, size, or className for full control.

tsx

<Navbar
  type="1"
  logo={<span className="font-bold">BRAND</span>}
  contactButton={{ type: "1", variant: "default", size: "sm" }}
  contactLabel="Call"
/>

Props

Prop	Type	Default	Description
variant	"default" \| "sticky"	"default"	Default or sticky (with backdrop).
type	"1" \| "2" \| "3"	"1"	Layout: 1=logo left + contact right, 2=centered logo only.
logo	ReactNode	-	Logo or brand element.
contactText	string	"Call us"	Text shown before the contact CTA (type 1).
contactHref	string	"#"	URL for the contact link/button.
contactLabel	string	"Contact"	Button/link label and aria-label.
contactTextClassName	string	-	Classes for the contact text span.
contactButton	NavbarContactButtonProps	-	Button type, variant, size, backgroundColor, foregroundColor, className.
className	string	-	Additional CSS classes for the nav.