Компонент Breadcrumbs для Angular | ng-hub-ui-breadcrumbs

Компонент breadcrumbs для Angular с интеграцией с Router, пользовательскими шаблонами, поддержкой RTL и гибкими токенами стилизации.

Последнее обновление 17 авг. 2026 г.

Обзор

Почему команды ищут эту библиотеку

Используйте эти breadcrumbs для Angular, когда важен контекст маршрута и нужна навигационная подсказка, работающая с Angular Router, шаблонами и структурированными путями навигации.

Установка

npm install ng-hub-ui-breadcrumbs

Перейти к

Идеально для

  • сайты документации
  • админ-панели
  • многоуровневые приложения
  • навигация с учётом маршрута

О библиотеке breadcrumbs

ng-hub-ui-breadcrumbs даёт приложениям Angular компонент breadcrumb, учитывающий маршрут, для админ-панелей, сайтов документации и многоуровневых продуктов. Он полезен, когда глубина навигации растёт и пользователям нужно больше ориентации, чем может дать кнопка «назад».

Руководства по возможностям

Основные возможности

Основная функциональность breadcrumbs с автоматическим определением маршрута и отображением пути навигации.

Примеры:
Basic Breadcrumbs

Simple breadcrumbs displaying navigation path from route configuration

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.

Код

Код
Import:
Template:
Component:

Динамическое содержимое

Динамическое разрешение содержимого breadcrumbs из данных маршрута и резолверов с поддержкой плейсхолдеров.

Примеры:
Dynamic Breadcrumbs

Breadcrumbs with dynamic content from route resolvers and data

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.

Код

Код
Import:
Template:
Component:

Шаблоны и настройка

Широкие возможности настройки с пользовательскими шаблонами для элементов breadcrumbs и улучшенной стилизацией.

Примеры:
Custom Templates

Custom breadcrumb item templates with enhanced styling and icons

Breadcrumbs - Custom Templates

Custom template usage for rendering breadcrumb items with custom styling

The hubBreadcrumbItem directive allows custom rendering of each element.

Код

Код
Import:
Template:
Component:

Расширенные возможности

Расширенная функциональность, включая поддержку иконок и совместимость с RTL-компоновкой для международных приложений.

Примеры:
Icons Breadcrumbs

Breadcrumb items with custom icons rendered from route data using custom templates

Breadcrumbs - Iconos

Renderizado de iconos definidos en los datos de la ruta usando una plantilla personalizada.

Код

Код
Import:
Template:
Component:
RTL Breadcrumbs

Right-to-left layout support with automatic divider flipping for international applications

Breadcrumbs - RTL

Soporte para idiomas con lectura de derecha a izquierda (RTL).

Код

Код
Import:
Template:
Component:
Truncation & Tooltip

Clip long breadcrumb labels with an ellipsis and reveal the full text on hover

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.

Код

Код
Import:
Template:
Component:

Ключевые возможности

Последние изменения

Version 22.4.2 - 8/8/26, 12:00 AM

fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.

Version 22.4.1 - 7/28/26, 12:00 AM

fixed: The active (last) crumb now declares aria-current=page so assistive technology announces the current position.

Version 22.3.0 - 6/29/26, 12:00 AM

added: Opt-in per-item truncation via the `truncateItems` input + `--hub-breadcrumb-max-item-width`.

added: `HubBreadcrumbLabelDirective` showing a tooltip only when a label overflows.

added: Optional hub-ui tooltip integration via `provideHubBreadcrumbTooltip(hubTooltipAdapter)` (native `title` fallback).

Связанные библиотеки

ng-hub-ui-nav ng-hub-ui-utils ng-hub-ui-portal