API 参考

这里是 breadcrumbs 的完整契约：你可以绑定、监听、投影和设置主题的一切，都集中在一处。接入你需要的部分，自定义你想要的样式——它是 standalone 的，且对 signal 友好。

输入

通过 1 个输入项精细调校 breadcrumbs。像绑定任意 Angular @Input 一样绑定它们。

名称	类型	默认值	描述
`breadcrumbs$`	`Observable<BreadcrumbItem[]>`	—	根据路由数据自动生成的面包屑项 Observable 流。

输出

尚未记录任何输出项。

模板

打造你自己的样式——1 个模板插槽让你可以投影自定义标记。

名称	描述	示例
`hubBreadcrumbItem`	用于渲染单个面包屑项的自定义模板	`<ng-template hubBreadcrumbItem let-item let-isLast="isLast"> @if (!isLast) { <a [routerLink]="item.url" class="breadcrumb-link">{{ item.label }}</a> } @else { <span class="breadcrumb-current">{{ item.label }}</span> } </ng-template>`

CSS 变量

用 17 个 CSS 变量为每一个像素设置主题。在 :root 处覆盖它们，或将其限定到某个容器范围内。

分隔符与布局

控制分隔符外观和整体布局结构

变量	默认值	类型	描述
`--hub-breadcrumb-divider`	`'/'`	string	用作 breadcrumbs 项之间分隔符的字符或符号 `'>''→''•''\|'`
`--hub-breadcrumb-divider-color`	`#6c757d`	color	分隔符的颜色 `#666666var(--bs-secondary)rgba(0,0,0,0.5)`
`--hub-breadcrumb-padding-x`	`0`	length	整个 breadcrumbs 组件周围的水平内边距 `0.5rem1rem0.75rem`
`--hub-breadcrumb-padding-y`	`0`	length	整个 breadcrumbs 组件周围的垂直内边距 `0.25rem0.5rem0.75rem`

颜色与背景

自定义 breadcrumbs 元素的颜色和背景外观

变量	默认值	类型	描述
`--hub-breadcrumb-bg`	`transparent`	color	breadcrumbs 容器的背景颜色 `#f8f9fa#ffffffvar(--bs-light)`
`--hub-breadcrumb-item-color`	`#6c757d`	color	非激活 breadcrumbs 项（链接）的文本颜色 `#495057var(--bs-secondary)#666666`
`--hub-breadcrumb-item-active-color`	`#212529`	color	激活（当前）breadcrumbs 项的文本颜色 `#000000var(--bs-dark)#333333`
`--hub-breadcrumb-item-hover-color`	`#0d6efd`	color	悬停在 breadcrumbs 链接上时的文本颜色 `#0056b3var(--bs-primary)#007bff`

间距与排版

控制项之间的间距和排版设置

变量	默认值	类型	描述
`--hub-breadcrumb-item-padding-x`	`0.5rem`	length	单个 breadcrumbs 项周围的水平内边距 `0.25rem0.75rem1rem`
`--hub-breadcrumb-item-padding-y`	`0`	length	单个 breadcrumbs 项周围的垂直内边距 `0.25rem0.5rem0.75rem`
`--hub-breadcrumb-font-size`	`1rem`	length	breadcrumbs 文本的字号 `0.875rem1.125rem1.25rem`
`--hub-breadcrumb-font-weight`	`400`	string	breadcrumbs 文本的字重 `500600bold`

边框与视觉效果

配置边框、圆角和视觉增强

变量	默认值	类型	描述
`--hub-breadcrumb-border-radius`	`0`	length	breadcrumbs 容器的边框半径 `0.25rem0.375rem0.5rem`
`--hub-breadcrumb-border`	`none`	border	breadcrumbs 容器周围的边框 `1px solid #dee2e62px solid #e9ecefnone`
`--hub-breadcrumb-margin-bottom`	`1rem`	length	breadcrumbs 组件的底部外边距 `0.5rem1.5rem2rem`

RTL 支持

用于从右到左布局支持的变量

变量	默认值	类型	描述
`--hub-breadcrumb-rtl-divider`	`''`	string	RTL 布局中使用的分隔符字符（方向反转） `'<''←'''`
`--hub-breadcrumb-direction`	`ltr`	string	breadcrumbs 布局的文本方向 `rtlltr`

样式与主题

CSS 变量与主题化

使用 CSS 自定义属性对分隔符、颜色、间距和视觉外观进行完整的主题化控制。

示例:

CSS Variables Customization

Customize breadcrumbs appearance using CSS custom properties for complete theming

Angular 面包屑组件 | ng-hub-ui-breadcrumbs