菜单
Build desktop-style menubars with ShadMenubar and ShadMenubarItem; nested items, ShadContextMenuItem, dividers. Use when adding a persistent top menu (File, Edit, View, etc.) in a Flutter shadcn_ui app.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Build collapsible accordions with ShadAccordion and ShadAccordionItem; single or multiple open items. Use when adding expandable sections, FAQs, or vertically stacked reveal content in a Flutter shadcn_ui app.
Show callout alerts with ShadAlert and ShadAlert.destructive; icon, title, description. Use when displaying warnings, errors, or important messages in a Flutter shadcn_ui app.
Display user avatars with ShadAvatar; image URL with optional placeholder. Use when showing user profile images or fallback initials in a Flutter shadcn_ui app.
Display badges with ShadBadge; primary, secondary, destructive, outline variants. Use when showing tags, status labels, or count indicators in a Flutter shadcn_ui app.
Build breadcrumb navigation with ShadBreadcrumb, ShadBreadcrumbLink, ShadBreadcrumbDropdown, custom separator. Use when showing navigation path, hierarchy of links, or dropdown breadcrumb in a Flutter shadcn_ui app.
Use Shadcn UI buttons (ShadButton variants: primary, secondary, destructive, outline, ghost, link); leading icon, loading state, gradient and shadow. Use when adding buttons, CTAs, or button-style widgets in a Flutter shadcn_ui app.
| name | shadcn_ui-menubar |
| description | Build desktop-style menubars with ShadMenubar and ShadMenubarItem; nested items, ShadContextMenuItem, dividers. Use when adding a persistent top menu (File, Edit, View, etc.) in a Flutter shadcn_ui app. |
ShadMenubar is a visually persistent menu (e.g. File, Edit, View). Each top-level entry is a ShadMenubarItem with child (label) and items (list of menu entries). Use ShadContextMenuItem and ShadContextMenuItem.inset for entries; use ShadSeparator.horizontal or Divider(height: 8) for dividers. Nest ShadContextMenuItem with items for submenus; use trailing: Icon(LucideIcons.chevronRight) on parent. Set enabled: false to disable an item.
ShadMenubar(
items: [
ShadMenubarItem(
items: [
const ShadContextMenuItem(child: Text('New Tab')),
const ShadContextMenuItem(child: Text('New Window')),
const ShadContextMenuItem(
enabled: false,
child: Text('New Incognito Window'),
),
divider,
const ShadContextMenuItem(
trailing: Icon(LucideIcons.chevronRight),
items: [
ShadContextMenuItem(child: Text('Email Link')),
ShadContextMenuItem(child: Text('Messages')),
],
child: Text('Share'),
),
divider,
const ShadContextMenuItem(child: Text('Print...')),
],
child: const Text('File'),
),
ShadMenubarItem(
items: [
const ShadContextMenuItem(child: Text('Undo')),
const ShadContextMenuItem(child: Text('Redo')),
divider,
ShadContextMenuItem(
trailing: const Icon(LucideIcons.chevronRight),
items: [
const ShadContextMenuItem(child: Text('Find...')),
const ShadContextMenuItem(child: Text('Find Next')),
],
child: const Text('Find'),
),
divider,
const ShadContextMenuItem(child: Text('Cut')),
const ShadContextMenuItem(child: Text('Copy')),
const ShadContextMenuItem(child: Text('Paste')),
],
child: const Text('Edit'),
),
ShadMenubarItem(
items: [
const ShadContextMenuItem.inset(child: Text('Reload')),
const ShadContextMenuItem.inset(child: Text('Toggle Full Screen')),
],
child: const Text('View'),
),
],
)
Create a reusable divider with ShadSeparator.horizontal(margin: const EdgeInsets.symmetric(vertical: 4), color: theme.colorScheme.muted).