Navbar

Floating pill navigation bar — fixed at the top of the viewport, centered, with frosted-glass backdrop blur. Logo left, nav links center, optional CTA right. On mobile collapses to a hamburger that opens a slide-in drawer.

MyApp

Installation

npm install @bloomkit/react

Usage

import { Navbar } from "@bloomkit/react";
 
<Navbar
  logo={<span>MyApp</span>}
  links={[
    { label: "Features", href: "/features" },
    { label: "Docs", href: "/docs", active: true },
    { label: "Blog", href: "/blog" },
  ]}
  cta={<Button size="sm">Get started</Button>}
/>

Logo only

Minimal setup — just a logo, no links or CTA.

MyApp

<Navbar logo={<span>MyApp</span>} />

Controlled drawer

By default the mobile drawer manages its own open state. Pass drawerOpen and onDrawerOpenChange to control it from outside.

MyApp

const [open, setOpen] = useState(false);
 
<Navbar
  logo={<span>MyApp</span>}
  links={[{ label: "Docs", href: "/docs" }]}
  drawerOpen={open}
  onDrawerOpenChange={setOpen}
/>

Custom mobile drawer

Use drawerContent to replace the auto-generated link list with anything you want inside the mobile drawer.

<Navbar
  logo={<span>MyApp</span>}
  drawerContent={
    <div className="flex flex-col gap-4">
      <a href="/features">Features</a>
      <a href="/pricing">Pricing</a>
      <Button variant="primary">Get started</Button>
    </div>
  }
/>

Offset

Control the gap between the pill and the top of the viewport with offsetTop (default 20px).

<Navbar logo={<span>MyApp</span>} offsetTop={32} />

Props

Prop	Type	Default	Description
logo	ReactNode	—	Brand mark — text, image, SVG, or any component. Rendered on the left.
links	NavbarLink[]	[]	Nav links shown center on desktop and listed in the mobile drawer
cta	ReactNode	—	CTA rendered right of links on desktop, at the bottom of the mobile drawer
drawerContent	ReactNode	—	Custom mobile drawer body. Overrides the auto-generated link list when set
drawerOpen	boolean	—	Controlled open state of the mobile drawer
onDrawerOpenChange	(open: boolean) => void	—	Called when the mobile drawer open state should change
offsetTop	number	20	Distance from the top of the viewport in px
className	string	—	Extra Tailwind classes merged onto the pill element

NavbarLink

interface NavbarLink {
  label: string;
  href: string;
  active?: boolean; // highlights the link as the current page
}

PreviousModalComponents

NextOTP InputComponents