TopbarMenu

Overview

TopbarMenu wraps Radix UI DropdownMenu to provide a consistent dropdown menu for topbar actions. It accepts a trigger element and an array of navigation items with optional icons, badges, and disabled states. TopbarMenuItem renders individual items within the dropdown.

Usage

import { TopbarMenu } from "@leanicon/web-builder-library/saas";

<TopbarMenu
  trigger={<button>Menu</button>}
  items={[
    { id: "profile", label: "Profile" },
    { id: "settings", label: "Settings" },
    { id: "logout", label: "Log out" },
  ]}
  onItemClick={(item) => handleAction(item.id)}
/>;

Variants

Default

<div className="flex h-14 items-center justify-end bg-background border-b border-border px-4">
  <SaaSNavigationTopbarMenu
    trigger={
      <button
        type="button"
        className="flex h-8 w-8 items-center justify-center rounded-full bg-muted text-muted-foreground hover:bg-accent transition-colors"
      >
        <span className="text-xs">U</span>
      </button>
    }
    items={[
      { id: "profile", label: "Profile" },
      { id: "settings", label: "Settings" },
      { id: "logout", label: "Log out" },
    ]}
  />
</div>

With Label Trigger

<div className="flex h-14 items-center justify-end bg-background border-b border-border px-4">
  <SaaSNavigationTopbarMenu
    trigger={
      <button
        type="button"
        className="flex items-center gap-2 rounded-md px-3 py-1.5 text-sm font-medium text-foreground hover:bg-accent transition-colors"
      >
        <div className="h-6 w-6 rounded-full bg-primary" />
        <span>Jane Doe</span>
      </button>
    }
    items={[
      { id: "profile", label: "Profile" },
      { id: "billing", label: "Billing" },
      { id: "settings", label: "Settings" },
      { id: "logout", label: "Log out" },
    ]}
  />
</div>

With Disabled Item

<div className="flex h-14 items-center justify-end bg-background border-b border-border px-4">
  <SaaSNavigationTopbarMenu
    trigger={
      <button
        type="button"
        className="flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-sm text-muted-foreground hover:bg-accent transition-colors"
      >
        <span>Help</span>
      </button>
    }
    items={[
      { id: "docs", label: "Documentation" },
      { id: "security", label: "Security" },
      { id: "support", label: "Contact support", disabled: true },
    ]}
    align="end"
  />
</div>

<div className="flex h-14 items-center justify-end bg-background border-b border-border px-4">
  <SaaSNavigationTopbarMenu
    trigger={
      <button
        type="button"
        className="relative flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent transition-colors"
      >
        <span className="text-xs">B</span>
        <span className="absolute -right-0.5 -top-0.5 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-destructive text-[9px] font-medium text-destructive-foreground">
          3
        </span>
      </button>
    }
    items={[
      { id: "mark-read", label: "Mark all as read" },
      { id: "preferences", label: "Notification preferences" },
    ]}
    align="end"
  />
</div>

Dark

<div className="flex h-14 items-center justify-end border-b border-border px-4">
  <SaaSNavigationTopbarMenu
    trigger={
      <button
        type="button"
        className="flex h-8 w-8 items-center justify-center rounded-full bg-muted text-muted-foreground hover:bg-accent transition-colors"
      >
        <span className="text-xs">U</span>
      </button>
    }
    items={[
      { id: "profile", label: "Profile" },
      { id: "settings", label: "Settings" },
      { id: "logout", label: "Log out" },
    ]}
  />
</div>

TopbarMenuItem - Default

<div className="w-48 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md">
  <SaaSNavigationTopbarMenuItem item={{ id: "profile", label: "Profile" }} />
  <SaaSNavigationTopbarMenuItem item={{ id: "settings", label: "Settings" }} />
  <SaaSNavigationTopbarMenuItem item={{ id: "logout", label: "Log out" }} />
</div>

TopbarMenuItem - Disabled

<div className="w-48 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md">
  <SaaSNavigationTopbarMenuItem
    item={{ id: "support", label: "Contact support", disabled: true }}
  />
</div>

TopbarMenuItem - Dark

<div className="w-48 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md">
  <SaaSNavigationTopbarMenuItem item={{ id: "profile", label: "Profile" }} />
  <SaaSNavigationTopbarMenuItem item={{ id: "settings", label: "Settings" }} />
  <SaaSNavigationTopbarMenuItem item={{ id: "logout", label: "Log out" }} />
</div>

Name	Type	Default	Required	Description
`items`	`NavigationItem[]`	—	Yes	Menu items
`trigger`	`ReactNode`	—	Yes	Trigger element
`align`	`enum`	`end`	No	Menu alignment
`onItemClick`	`((item: NavigationItem) => void)`	—	No	Callback when an item is clicked

Topbar Menu