Breadcrumb
Displays the location of the current page, making it easier to browser back.
Basic usage In el-breadcrumb, each el-breadcrumb-item is a tag that stands for every level starting from homepage. This component has a String attribute separator, and it determines the separator. Its default value is '/'.
export function BreadcrumbBasic() { return ( <ElBreadcrumb separator="/"> <ElBreadcrumbItem to="/">homepage</ElBreadcrumbItem> <ElBreadcrumbItem> <Link className={styles.link} href="/">promotion management</Link> </ElBreadcrumbItem> <ElBreadcrumbItem>promotion list</ElBreadcrumbItem> <ElBreadcrumbItem>promotion detail</ElBreadcrumbItem> </ElBreadcrumb> ); } Icon separator Set separator-icon to use svg icon as the separator，it will cover separator
homepage promotion management promotion list promotion detail
export function BreadcrumbIcon() { return ( <ElBreadcrumb separatorIcon={<ArrowRight />}> <ElBreadcrumbItem to="/">homepage</ElBreadcrumbItem> <ElBreadcrumbItem>promotion management</ElBreadcrumbItem> <ElBreadcrumbItem>promotion list</ElBreadcrumbItem> <ElBreadcrumbItem>promotion detail</ElBreadcrumbItem> </ElBreadcrumb> ); } Breadcrumb API
Breadcrumb Attributes
Name Description Type Default separator separator character string/ separator-icon icon component of icon separator stringComponent—
Breadcrumb Slots
Name Description Subtags default customize default content Breadcrumb Item
BreadcrumbItem API
BreadcrumbItem Attributes
Name Description Type Default to target route of the link, same as to of vue-router stringobject'' replace if true, the navigation will not leave a history record booleanfalse
BreadcrumbItem Slots
Name Description default customize default content
