Skip to main content

Breadcrumb

显示当前页面在系统层级结构的位置，并能返回之前任意层级的页面。

基本用法​

使用 <Breadcrumb> 包裹面包屑的每一项 <Breadcrumb.Item>。

function App() {
  return (
    <div className="ykui-demo-column">
      <Breadcrumb>
        <Breadcrumb.Item href="/dv/feowi">角色管理</Breadcrumb.Item>
        <Breadcrumb.Item>编辑角色</Breadcrumb.Item>
      </Breadcrumb>
    </div>
  );
}

自定义内容​

面包屑的每一项可以插入自定义内容。

function App() {
  return (
    <div className="ykui-demo-column">
      <Breadcrumb>
        <Breadcrumb.Item href="/dv/feowi">
          <Icon icon="icon-420" />角色管理
        </Breadcrumb.Item>
        <Breadcrumb.Item>编辑角色</Breadcrumb.Item>
      </Breadcrumb>
    </div>
  );
}

自定义分隔符​

<Breadcrumb> 可以使用 separator 属性来自定义面包屑每一项的分隔符。

function App() {
  return (
    <div className="ykui-demo-column">
      <Breadcrumb separator={<label>🌛</label>}>
        <Breadcrumb.Item href="/dv/feowi">角色管理 </Breadcrumb.Item>
        <Breadcrumb.Item>编辑角色</Breadcrumb.Item>
      </Breadcrumb>
    </div>
  );
}
属性说明类型默认值
children内容ReactNode--
className类名string--
style样式CSSProperties--
separator自定义分隔符ReactNode--