Back to Details

shadcn_ui-breadcrumb

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Shadcn UI — Breadcrumb

Shadcn UI — 面包屑

Instructions

使用说明

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
通过层级链接展示当前资源的路径。其子组件可以是
ShadBreadcrumbLink
、
ShadBreadcrumbDropdown
或普通组件（例如用于显示当前页面的
Text
）。

Basic breadcrumb

基础面包屑

dart
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'),
  ],
)
dart
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'),
  ],
)

Custom separator

自定义分隔符

Default separator is 
>
. Override with 
separator
:
dart
ShadBreadcrumb(
  separator: const Icon(LucideIcons.slash),
  children: [
    ShadBreadcrumbLink(onPressed: () {}, child: const Text('Home')),
    ShadBreadcrumbLink(onPressed: () {}, child: const Text('Components')),
    Text('Breadcrumb'),
  ],
)
默认分隔符为
>
。可通过
separator
属性自定义：
dart
ShadBreadcrumb(
  separator: const Icon(LucideIcons.slash),
  children: [
    ShadBreadcrumbLink(onPressed: () {}, child: const Text('Home')),
    ShadBreadcrumbLink(onPressed: () {}, child: const Text('Components')),
    Text('Breadcrumb'),
  ],
)

Dropdown in breadcrumb

面包屑中的下拉菜单

Use 
ShadBreadcrumbDropdown
with 
items
(list of 
ShadBreadcrumbDropMenuItem
) and 
child
(trigger widget). Use 
ShadBreadcrumbEllipsis()
for an ellipsis trigger.
使用
ShadBreadcrumbDropdown
时，需配置
items
（
ShadBreadcrumbDropMenuItem
列表）和
child
（触发组件）。可使用
ShadBreadcrumbEllipsis()
作为省略号触发器。