---
title: Breadcrumb 面包屑
description: 显示当前页面在系统层级结构的位置，并能返回之前任意层级的页面。
isComponent: true
usage: { title: "", description: "" }
spline: message
author: swimly
---

## 基本用法

面包屑默认提供 2 种方式渲染，一种通过`l-breadcrumb`的`options`属性来定义，一种通过子元素`l-breadcrumb-item`来定义。

{{ base }}

## 分隔符

通过`separator`可自定义各子项之间的分隔符，类型为：`LNode`。

> 注意：支持`slot`和`props`，当 props 值类型为`function`时，务必给 script 添加`lang="jsx"`。

{{ seperate }}

## 最大宽度

通过`maxItemWidth`可设置每个子项的最大宽度，当超出时则会显示省略号，默认为：`120`，并不需要带单位，也可给某个
一`l-breadcrumb-item`设置`maxWidth`属性达到同样的效果。

{{ maxWidth }}

## 跳转方式

通过 `href` 和 `to` 属性可以设置子项跳转目标，支持 `target` 设置跳转方式，可选值：`_blank`、`_self`、`_parent`、`_top`。

通过 `disabled` 属性可以设置禁用状态。

{{ jump }}
