User Menu

Account dropdown with an avatar header, profile and settings rows, workspace switcher, and a Sign out action.

Beste Sözen
Beste Sözenmira@beste.co

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Nav20 } from "@/components/beste/piece/nav20";

<Nav20
  name="Beste Sözen"
  email="mira@beste.co"
  initials="BS"
  imageSrc="https://images.unsplash.com/photo-1749989402507-1d8a8e98bb14?w=70&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fHdoaXRlJTIwcHJvZmlsZXxlbnwwfHwwfHx8MA%3D%3D"
  alt="Beste Sözen"
/>

More Nav pieces

View all Nav

Workspace Switcher

nav27

Open workspace-switcher showing the current pick and a dropdown with sibling workspaces and a new action.

Actions

Dropdown Menu

nav16

Shadow-lifted menu with icon rows, shortcut hints on the right, and a tinted destructive Delete action.

Beste

App Header

nav28

Pill header with a menu button on the left, centered brand mark, and search and avatar actions right.

Products
Products preview

Mega Menu

nav23

Nav flyout pairing a vertical product list with a gradient promo pane spotlighting a new release.

Notifications
Mira starred Project Horizon2m
Build passed · main18m
PR #482 merged1h

Notifications Panel

nav29

Notifications dropdown listing icon-prefixed rows with time stamps and a trailing unread dot per item.

Context Menu

nav17

Right-click menu pointed by a corner arrow with icon rows and mono shortcut hints on the right.