Компонент Breadcrumbs для Angular | ng-hub-ui-breadcrumbs
Компонент breadcrumbs для Angular с интеграцией с Router, пользовательскими шаблонами, поддержкой RTL и гибкими токенами стилизации.
Интерактивные примеры
Изучите живые примеры, показывающие, как библиотека ведёт себя в типичных сценариях использования Angular.
Basic Breadcrumbs
Breadcrumbs - Basic Setup
Basic usage of breadcrumbs component showing current route based on route data
Items are generated from the data.breadcrumb configuration of active routes.
Код
Dynamic Breadcrumbs
Breadcrumbs - Dynamic Data
Dynamic breadcrumbs with placeholders resolved from route data and resolvers
The last item uses the template "Dynamic: {name}" and is resolved with route data.
Код
Custom Templates
Breadcrumbs - Custom Templates
Custom template usage for rendering breadcrumb items with custom styling
The hubBreadcrumbItem directive allows custom rendering of each element.
Код
Icons Breadcrumbs
Breadcrumbs - Iconos
Renderizado de iconos definidos en los datos de la ruta usando una plantilla personalizada.
Код
RTL Breadcrumbs
Breadcrumbs - RTL
Soporte para idiomas con lectura de derecha a izquierda (RTL).
Код
Truncation & Tooltip
Breadcrumbs - Truncation & Tooltip
Enable truncateItems to clip long labels with an ellipsis; hover a clipped item to read the full text.
Each label is capped at --hub-breadcrumb-max-item-width (12rem). Only the items that overflow get a tooltip.