Breadcrumb 面包屑

面包屑组件，用于显示当前页面的路径。

基础用法

<div id="demo-breadcrumb"></div>

<script>
  const breadcrumb = new SaBreadcrumb('#demo-breadcrumb', {
    items: [
      { label: '首页', to: '/' },
      { label: '用户管理', to: '/users' },
      { label: '用户详情' }
    ]
  });
</script>

加载 SanoUI 组件中...

自定义分隔符

通过 separator 配置自定义分隔符。

<div id="demo-breadcrumb-separator"></div>

<script>
  const breadcrumb = new SaBreadcrumb('#demo-breadcrumb-separator', {
    items: [
      { label: '首页', to: '/' },
      { label: '产品', to: '/products' },
      { label: '详情' }
    ],
    separator: '>'
  });
</script>

加载 SanoUI 组件中...

API

构造函数参数

参数	说明	类型	默认值
container	容器选择器或元素	string | HTMLElement	-
options	配置选项	SaBreadcrumbOptions	{}

配置选项

参数	说明	类型	可选值	默认值
items	面包屑项数组	Array<BreadcrumbItem>	-	[]
separator	分隔符	string	-	'/'

BreadcrumbItem 配置

参数	说明	类型	默认值
label	面包屑文本	string	-
to	链接地址	string	-
icon	图标	string	-

方法

方法名	说明	参数	返回值
setItems	设置面包屑项	items: Array<BreadcrumbItem>	void
destroy	销毁实例	-	void

示例代码

手动创建实例

const breadcrumb = new SaBreadcrumb('#my-breadcrumb', {
  items: [
    { label: '首页', to: '/' },
    { label: '产品管理', to: '/products' },
    { label: '产品列表', to: '/products/list' },
    { label: '产品详情' }
  ],
  separator: '/'
});

// 更新面包屑项
breadcrumb.setItems([
  { label: '首页', to: '/' },
  { label: '新页面' }
]);

实际使用场景

场景 1：页面导航

在页面顶部使用面包屑显示当前页面路径。

<div id="page-breadcrumb" style="margin-bottom: 1rem;"></div>
<div style="padding: 2rem; background: #f5f5f5; border-radius: 4px;">
  <h2>用户详情页面</h2>
  <p>这是用户详情页面的内容</p>
</div>

<script>
  const breadcrumb = new SaBreadcrumb('#page-breadcrumb', {
    items: [
      { label: '首页', to: '/' },
      { label: '用户管理', to: '/users' },
      { label: '用户列表', to: '/users/list' },
      { label: '用户详情' }
    ],
    separator: '/'
  });
</script>

加载 SanoUI 组件中...

场景 2：动态更新面包屑

根据路由变化动态更新面包屑。

<div id="dynamic-breadcrumb" style="margin-bottom: 1rem;"></div>
<div style="display: flex; gap: 0.5rem;">
  <button class="sa-button" onclick="goToPage('home')">首页</button>
  <button class="sa-button" onclick="goToPage('products')">产品</button>
  <button class="sa-button" onclick="goToPage('detail')">详情</button>
</div>

<script>
  const breadcrumb = new SaBreadcrumb('#dynamic-breadcrumb', {
    items: [{ label: '首页' }]
  });
  
  function goToPage(page) {
    const items = [{ label: '首页' }];
    
    if (page === 'products') {
      items.push({ label: '产品管理' });
    } else if (page === 'detail') {
      items.push({ label: '产品管理' }, { label: '产品详情' });
    }
    
    breadcrumb.setItems(items);
  }
</script>

加载 SanoUI 组件中...