About this piece
Workspace Switcher
Open workspace-switcher showing the current pick and a dropdown with sibling workspaces and a new action.
Usage
The import and the props worth knowing about, in one place.
import { Nav27 } from "@/components/beste/piece/nav27";
<Nav27
current={{
"name": "Figma",
"initials": "FG",
"imageSrc": "https://oud.pics/sm/l/figma.png",
"alt": "Figma"
}}
workspaces={[
{
"name": "Figma",
"initials": "FG",
"imageSrc": "https://oud.pics/sm/l/figma.png",
"alt": "Figma"
},
{
"name": "Notion",
"initials": "NO",
"imageSrc": "https://oud.pics/sm/l/notion.png",
"alt": "Notion"
},
{
"name": "Dropbox",
"initials": "DB",
"imageSrc": "https://oud.pics/sm/l/dropbox.png",
"alt": "Dropbox"
}
]}
open={true}
/>More Nav pieces
View all Nav
Beste Sözenmira@beste.co
User Menu
Account dropdown with an avatar header, profile and settings rows, workspace switcher, and a Sign out action.
Actions
Dropdown Menu
Shadow-lifted menu with icon rows, shortcut hints on the right, and a tinted destructive Delete action.
Context Menu
Right-click menu pointed by a corner arrow with icon rows and mono shortcut hints on the right.
Collapsed Breadcrumb
Breadcrumb that hides middle crumbs behind a dropdown chip so the trail stays on a single row.