Navbar

Installation

Complete project setup first. Your configuration must select react/base and include your Design System ID.

pnpm exec frontfriend download navbar -f react --primitive base

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import {
  Navbar,
  NavbarLeft,
  NavbarCenter,
  NavbarRight,
} from "@/components/ui/navbar";
import { Button } from "@/components/ui/button";
<div className="w-[640px] max-w-full">
  <Navbar>
    <NavbarLeft>Acme</NavbarLeft>
    <NavbarCenter>Workspace</NavbarCenter>
    <NavbarRight>
      <Button variant="secondary">Contact us</Button>
    </NavbarRight>
  </Navbar>
</div>;

Examples

Main

import {
  Navbar,
  NavbarLeft,
  NavbarCenter,
  NavbarRight,
} from "@/components/ui/navbar";
import { Button } from "@/components/ui/button";
function Logo() {
  return (
    <div className="flex items-center gap-2">
      <svg
        width="32"
        height="32"
        viewBox="0 0 32 32"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        className="text-brand-mid"
      >
        <rect width="32" height="32" rx="8" fill="currentColor" />
        <path
          d="M10 12h12M10 16h12M10 20h8"
          stroke="white"
          strokeWidth="2"
          strokeLinecap="round"
        />
      </svg>
      <span className="text-lg font-semibold">FrontFriend</span>
    </div>
  );
}
<div className="h-[80px] ">
  <Navbar>
    <NavbarLeft>
      <Logo />
    </NavbarLeft>
    <NavbarCenter></NavbarCenter>
    <NavbarRight>
      <Button variant="secondary" icon="Phone" iconPosition="suffix" size="sm">
        Contact us
      </Button>
    </NavbarRight>
  </Navbar>
</div>;

Simple

import {
  Navbar,
  NavbarLeft,
  NavbarCenter,
  NavbarRight,
} from "@/components/ui/navbar";
import { Button } from "@/components/ui/button";
<div className="h-[80px] ">
  <Navbar>
    <NavbarLeft>
      <Button
        icon="ChevronLeft"
        iconPosition="prefix"
        variant="ghost"
        size="sm"
      >
        Back
      </Button>
    </NavbarLeft>
    <NavbarCenter>Page Title</NavbarCenter>
    <NavbarRight></NavbarRight>
  </Navbar>
</div>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Base UI.

Navbar

NavbarCenter

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.