Angular パンくずリストコンポーネント | ng-hub-ui-breadcrumbs
Router 連携、カスタムテンプレート、RTL 対応、柔軟なスタイルトークンを備えた Angular パンくずリストコンポーネント。
最終更新 2026/08/17
概要
チームがこのライブラリを探す理由
ルートのコンテキストが重要で、Angular Router・テンプレート・階層的なナビゲーションパスと連携するナビゲーション補助が必要なとき、この Angular パンくずリストを使ってください。
インストール
npm install ng-hub-ui-breadcrumbsジャンプ
最適な用途
- ドキュメントサイト
- 管理パネル
- 多階層アプリ
- ルートを認識するナビゲーション
について breadcrumbs
ng-hub-ui-breadcrumbs は、管理パネル・ドキュメントサイト・多階層プロダクト向けに、ルートを認識するパンくずコンポーネントを Angular アプリケーションに提供します。ナビゲーションの深さが増し、戻るボタン以上の案内をユーザーが必要とするときに役立ちます。
機能ガイド
コア機能
自動的なルート検出とナビゲーションパス表示を備えた、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).