FMX Prototype Pipeline

Navbar

Top-level org/user header. Full-width chrome component. The user avatar is an account-menu trigger (#24); Help lives in the icon stack (#31). Click the avatar.

View in Figma

Acme FacilitiesWelcome back

<Navbar
  orgName={session.hostname}
  welcomeMessage="Welcome back"
  orgInitials="AF"
  userInitials="MG"
  onMenuToggle={toggleSidebar}
  onAccountClick={() => setAccountOpen((o) => !o)}
  accountMenuOpen={accountOpen}
  iconButtons={
    <>
      <IconButton
        icon={faMagnifyingGlass}
        type="ghost"
        aria-label="Search"
      />
      <IconButton
        icon={faCircleQuestion}
        type="ghost"
        aria-label="Help"
      />
      <IconButton
        icon={faBell}
        type="ghost"
        aria-label="Notifications"
      />
    </>
  }
/>

Acme FacilitiesWelcome back

<Navbar
  orgName={session.hostname}
  welcomeMessage="Welcome back"
  orgInitials="AF"
  userInitials="MG"
  onMenuToggle={toggleSidebar}
  breadcrumb={
    <Breadcrumb
      items={[
        { label: "Requests", href: "#" },
        { label: "New request", current: true },
      ]}
    />
  }
  iconButtons={
    <IconButton
      icon={faBell}
      type="ghost"
      aria-label="Notifications"
    />
  }
/>

Props

orgName:ReactNode

Organization name. Bind to session hostname — do not transcribe literal.

welcomeMessage:ReactNode

Optional sub-label (e.g. "Welcome back"). Bind to session.

orgInitials / orgSrc:string

Org avatar initials and/or image source.

userInitials / userSrc:string

User avatar initials and/or image source.

onMenuToggle:() => void

Sidebar-toggle handler. Omit to hide the hamburger.

onAccountClick:() => void

When set, the user avatar becomes an account-menu trigger. Compose with a menu to render the items. Omit for a static avatar.

accountMenuOpen:boolean= false

Open state of the account menu — sets aria-expanded on the trigger.

iconButtons:ReactNode

Slot for the right-aligned icon button stack.

breadcrumb:ReactNode

Contextual slot after the org cluster (e.g. a <Breadcrumb> on sub-pages). In-flow — shrinks with the org name.

Tokens