Selected: Ros.Space
<script setup>
import { ref } from "vue";
import { WorkspaceSwitcher } from "@dicehub/kappa/blocks/workspace-switcher";
import { Building2, Plus, Settings, UsersRound } from "@lucide/vue";
const workspace = ref("engineering");
const items = [
{ value: "engineering", name: "Engineering", description: "Pro plan · 12 members", icon: Building2 },
{ value: "personal", name: "Personal", description: "Free plan · 1 member", initials: "P" },
];
const actions = [
{ value: "settings", label: "Settings", icon: Settings },
{ value: "invite", label: "Invite members", icon: UsersRound },
];
function onAction(action) {
// Open the matching view in your application.
console.log(action.value);
}
</script>
<template>
<WorkspaceSwitcher v-model="workspace" :items="items" :actions="actions"
account-label="alex@example.test"
:workspace-actions="[{ value: 'create', label: 'New workspace', icon: Plus }]"
@action="onAction" />
</template>Usage
Import WorkspaceSwitcher from @dicehub/kappa or @dicehub/kappa/blocks/workspace-switcher. Set items and use v-model for the active workspace. Each item needs a unique value and name. Add an icon, image, initials, or description as needed.
actions appears below the current workspace. workspaceActions appears below the list. footerActions appears at the bottom. The action event supplies the selected action object. Connect it to your application's routing or account flow.
Controlled Selection
Selection changes only when your application updates modelValue. This example rejects changes until you unlock selection.
Selected: Ros.Space
Long List
The menu body scrolls separately from the footer, so footer actions stay visible. Arrow keys and typeahead keep the highlighted item in view.
Selected: Ros.Space
Right-to-left
The selected checkmark stays at the end of its row.
Selected: Ros.Space
Action States
Set disabled to prevent an action or workspace from being selected. Use variant="destructive" for an action that removes data.
Selected: Ros.Space
API
| Prop | Default | Purpose |
|---|---|---|
items / modelValue | Required | Workspace items and controlled active value. |
label / placeholder | Workspaces / Select workspace | List label and text when no item matches the value. |
triggerLabel | List label and current name | Accessible name of the default trigger. |
accountLabel | List label | Account identity above the workspace list. |
actions / workspaceActions / footerActions | Empty | Action groups. Each action needs a unique value and label. |
open / defaultOpen | Uncontrolled / false | Controlled or initial menu state. Use v-model:open. |
positioning / teleport / dir | bottom-start / true / inherited | Menu placement, popup container, and text direction. Positioning merges with viewport-fit defaults. |
disabled | false | Disable the default trigger. Bind the slot's disabled value for a custom trigger. |
Items also support description, icon, avatarSrc, initials, disabled, shortcut, and ariaKeyshortcuts. Shortcut text is a label; your application handles its keyboard event. Actions support icon, disabled, variant, and accent.
Events: update:modelValue, update:open, openChange, and action. The trigger slot receives workspace and disabled. Attributes, styles, and DOM listeners go to the popup.
Accessibility
Workspace rows use menu radio semantics and aria-checked. Enter and Space open the menu. Arrow keys, Home, End, and typing move between enabled items. Enter selects an item; Escape closes the menu and returns focus to its trigger. The checkmark is decorative.
The block composes Dropdown and Avatar. It uses Kappa theme tokens and supports reduced motion.