Menu bar popoverPro

A desktop menu bar app framed: the menu bar slice with menus, status items and the clock, the app glyph pressed, and a translucent popover hanging from it.

Markdown

On this page

ProA menu bar agent app, open

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/menubar-popover

Usage

tsx

import { MenubarPopover } from "@/components/ui/chatcn/pro/menubar-popover"

<MenubarPopover label="Ledger" icon={<AgentIcon />} desktop="/wallpaper.webp">
  <YourPanel />
</MenubarPopover>

The popover hangs from the app's glyph, centered under it and kept 8 px inside the frame, and scales from the glyph. Children are the panel's content. Open by default for screenshots; control it with open and onOpenChange.

Examples

Every state

ProClosed, offline, no runs

Props

Prop	Type	Notes
`icon`, `label`	`ReactNode`, `string`	The menu bar item
`open`, `defaultOpen`, `onOpenChange`	`boolean`	Default open
`appName`, `menus`	`string`, `string[]`	The front app at the start of the bar
`clock`	`string`	Default Thu 29 Oct 9:41
`statusItems`	`ReactNode`	Extra items before the system ones
`popoverWidth`	`number`	Default 340
`desktop`	`string \| ReactNode`	Wallpaper image or node
`width`, `height`	`number \| string`	Height default 520

Keyboard

Key	Action
`Enter`, `Space` on the glyph	Open or close
`Escape`	Close and return focus to the glyph

Accessibility

The glyph is a button with aria-expanded and aria-controls; the panel is a named dialog and is inert while closed.
Menus, status items and the clock are decorative and hidden from assistive tech.

Motion

Opens from 0.96 scale and transparent in 180 ms from the glyph, closes in 135 ms.
Under reduced motion it only fades.