Component

Navbar

Fixed top navigation bar. Navy background, logo, links, optional CTA, and an auth area with avatar dropdown. Requires ThemeProvider as an ancestor.

Logo and links only

live editor — edit to update preview

function Demo() {
  return (
    <div style={{ position: "relative", height: 72, borderRadius: 8, overflow: "hidden" }}>
      <Navbar
        logo={{ label: "Ann Tech" }}
        links={[
          { label: "Products", href: "#" },
          { label: "Docs", href: "#" },
          { label: "Blog", href: "#" },
        ]}
      />
    </div>
  );
}
render(<Demo />);

With CTA button

live editor — edit to update preview

function Demo() {
  return (
    <div style={{ position: "relative", height: 72, borderRadius: 8, overflow: "hidden" }}>
      <Navbar
        logo={{ label: "Ann Tech" }}
        links={[
          { label: "Products", href: "#" },
          { label: "Docs", href: "#" },
        ]}
        cta={{ label: "Get started", href: "#" }}
      />
    </div>
  );
}
render(<Demo />);

With sign-in button (logged out)

live editor — edit to update preview

function Demo() {
  return (
    <div style={{ position: "relative", height: 72, borderRadius: 8, overflow: "hidden" }}>
      <Navbar
        logo={{ label: "Ann Tech" }}
        links={[{ label: "Products", href: "#" }]}
        signInHref="#"
        user={null}
      />
    </div>
  );
}
render(<Demo />);

With logged-in user

live editor — edit to update preview

function Demo() {
  return (
    <div style={{ position: "relative", height: 72, borderRadius: 8, overflow: "hidden" }}>
      <Navbar
        logo={{ label: "Ann Tech" }}
        links={[{ label: "Products", href: "#" }]}
        user={{ displayName: "Charlin Joe", email: "app@annaibrands.com" }}
        points={250}
        accountLinks={[
          { label: "Profile", href: "#" },
          { label: "Dashboard", href: "#" },
        ]}
        onSignOut={() => alert("Signed out")}
      />
    </div>
  );
}
render(<Demo />);

Props

Prop	Type	Default	Description
logo*	{ src?: string; alt?: string; label: string; href?: string }	—	Brand logo and label shown on the left.
links*	NavbarLink[]	—	Array of { label, href } for desktop nav links.
cta	NavbarLink	—	Optional CTA button shown on the right of the links.
transparentOnTop	boolean	false	Starts transparent and becomes solid on scroll.
user	NavbarUser \| null	—	Logged-in user object with displayName, email, photoURL.
points	number	—	Points balance shown in the avatar dropdown.
loading	boolean	false	Shows a pulse skeleton while auth state resolves.
accountLinks	NavbarAccountLink[]	—	Links in the avatar dropdown. Supports adminOnly: true.
signInHref	string	—	Shows a Sign In button when provided and user is null.
onSignOut	() => void	—	Called when the user clicks Sign out in the dropdown.
rightSlot	ReactNode	—	Extra content rendered between nav links and auth area.