メニュー
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.
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.
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.
Use ShadCalendar for single, multiple, or range date selection; caption layout, hide navigation, week numbers, outside days, fixed weeks. Use when building date pickers or calendar widgets in a Flutter shadcn_ui app.
| name | shadcn_ui-breadcrumb |
| description | 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. |
ShadBreadcrumb displays the path to the current resource using a hierarchy of links. Children can be ShadBreadcrumbLink, ShadBreadcrumbDropdown, or plain widgets (e.g. Text for current page).
ShadBreadcrumb(
children: [
ShadBreadcrumbLink(
onPressed: () => print('Navigating to Home'),
child: const Text('Home'),
),
ShadBreadcrumbDropdown(
items: [
ShadBreadcrumbDropMenuItem(
onPressed: () => print('Navigating to Documentation'),
child: const Text('Documentation'),
),
ShadBreadcrumbDropMenuItem(
onPressed: () => print('Navigating to Themes'),
child: const Text('Themes'),
),
],
showDropdownArrow: false,
child: ShadBreadcrumbEllipsis(),
),
Text('Components'),
Text('Breadcrumb'),
],
)
Default separator is >. Override with separator:
ShadBreadcrumb(
separator: const Icon(LucideIcons.slash),
children: [
ShadBreadcrumbLink(onPressed: () {}, child: const Text('Home')),
ShadBreadcrumbLink(onPressed: () {}, child: const Text('Components')),
Text('Breadcrumb'),
],
)
Use ShadBreadcrumbDropdown with items (list of ShadBreadcrumbDropMenuItem) and child (trigger widget). Use ShadBreadcrumbEllipsis() for an ellipsis trigger.