CngxBreadcrumbBar

ComponentPrimaryOnPushNo encapsulationv0.1.0WCAG AA

projects/ui/breadcrumb/breadcrumb-bar.component.ts

Import#

import { CngxBreadcrumbBar } from '@cngx/ui/breadcrumb'

Description#

Breadcrumb bar organism. A thin <cngx-breadcrumb [items]="..."> shell that renders a trail through the headless @cngx/common/interactive trio (CngxBreadcrumb / CngxBreadcrumbItem / CngxBreadcrumbSeparator) - the bar forwards inputs and owns the skin, the trio owns the collapse, terminal marking, and landmark a11y. Everything derives (Pillar 1); nothing here syncs.

Two data modes without baking @angular/router into the base component: the uncontrolled [items] input, and an opt-in controlled source provided through CNGX_BREADCRUMB_ITEMS_SOURCE (the router-sync directive). The source wins over the input via computed, so an external producer augments the trail through a token, never by writing this component's input().

<cngx-breadcrumb [items]="crumbs" [maxVisible]="4" skin="pill" />

https://cngxjs.github.io/cngx/examples/#/ui/breadcrumb/basic/explicit-items

Metadata#

Selector: cngx-breadcrumb
Export as: cngxBreadcrumbBar
Change detection: ChangeDetectionStrategy.OnPush
Encapsulation: ViewEncapsulation.None
Template URL: ./breadcrumb-bar.component.html
Style URLs: ./breadcrumb-bar.component.css
Style URL: ./breadcrumb-bar.component.css
Imports: NgTemplateOutlet CngxBreadcrumb CngxBreadcrumbItem CngxBreadcrumbSeparator CngxBreadcrumbOverflow CngxBreadcrumbSiblings
Host directives: CngxResizeObserver

Host#

Class: cngx-breadcrumb
Static attributes: [attr.data-skin]resolvedSkin()

Relationships

Depends on6

NgTemplateOutletdependency

CngxBreadcrumbAttribute directive

CngxBreadcrumbItemAttribute directive

CngxBreadcrumbSeparatorAttribute directive

CngxBreadcrumbOverflowStandalone component

CngxBreadcrumbSiblingsStandalone component

Index#

Inputs#

itemsInput#readonly CngxBreadcrumbCrumb[]

input()

Uncontrolled trail. Ignored when a CNGX_BREADCRUMB_ITEMS_SOURCE is provided.

default [], { alias: 'items' }

label#string

input()

Accessible name of the nav landmark. Falls back through the config cascade to the EN default.

default this.cfg.ariaLabels?.bar ?? 'Breadcrumb'

maxVisible#number | undefined

input()

Maximum crumbs to show before the middle collapses. Unset = never collapse, unless responsive is on. An explicit value always wins over the width-derived one (controlled/uncontrolled), resolved by effectiveMaxVisible.

responsive#

input()

Opt in to width-responsive collapse: the bar derives maxVisible from its own width via the CngxResizeObserver hostDirective and the pure resolveBreadcrumbTier. No hand-wired observer or computed needed - one attribute makes every skin responsive. Ignored when maxVisible is set.

default false, { transform: booleanAttribute }

responsiveTiers#readonly CngxBreadcrumbWidthTier[]

input()

Width tiers driving the responsive collapse. Defaults to DEFAULT_BREADCRUMB_WIDTH_TIERS.

default DEFAULT_BREADCRUMB_WIDTH_TIERS

skin#CngxBreadcrumbSkin | undefined

input()

Visual skin, reflected onto [data-skin]. Cascade input ?? config.skin ?? 'classic', resolved by resolvedSkin. Pure thematic concern - structure, slots, and ARIA are identical across values.

Instance Properties#

accessory#unknown

contentChild()ProtectedReadonly

Projected per-crumb accessory template. When present it wins over the declarative crumb.siblings auto-render for every crumb (one predictable owner of the accessory area). The contentChild is already a Signal<TemplateRef | undefined> - bound directly, no pass-through computed.

contentChild(CngxBreadcrumbItemAccessory, { read: TemplateRef })

icon#unknown

contentChild()ProtectedReadonly

Projected leading per-crumb icon template. Rendered inside every crumb link (<a>) before the label span, fed the { crumb, index } context so the consumer renders the opaque crumb.icon with any icon system. Direct Signal<TemplateRef | undefined> - bound in the template, no pass-through.

contentChild(CngxBreadcrumbIcon, { read: TemplateRef })

items#unknown

ProtectedReadonly

The rendered trail: a provided source wins over the [items] input (controlled/uncontrolled).

createControlledSource(this.itemsSource?.crumbs, this.itemsInput)

overflowRow#unknown

contentChild()ProtectedReadonly

Projected overflow-row template, forwarded to the composed CngxBreadcrumbOverflow (which the consumer cannot reach as contentChild through the bar). Lets a consumer customize the collapsed-crumb rows without hand-composing the headless trail.

contentChild(CngxBreadcrumbOverflowItem, { read: TemplateRef })

HostBindings#

Binding	Expression
`[attr.data-skin]`	`resolvedSkin()`

Index#

Theming

CngxBreadcrumbBar

Import#

Description#

Related#

Metadata#

Host#

Relationships

Depends on6

Index#

Properties

Inputs

Derived State

HostBindings

Inputs#

Instance Properties#

HostBindings#

Index#

Theming