Skip to main content
cngx-src documentation

CngxBreadcrumbItem

Directivev0.1.0WCAG AA

projects/common/interactive/breadcrumb/breadcrumb-item.directive.ts

Import#

import { CngxBreadcrumbItem } from '@cngx/common/interactive'

Description#

A single crumb. Put cngxBreadcrumbItem on the crumb element. Intermediate crumbs are links (<a href>); the terminal crumb may be either a <span> or an <a [attr.href]="null"> - both derive aria-current="page" purely from position in the trail (no manual flag). The item hides itself with [hidden] when the coordinator collapses it into the overflow menu.

https://cngxjs.github.io/cngx/examples/#/common/interactive/breadcrumb/basic-trail

Metadata#

Host#

Relationships

Index#

Inputs#

label#string
input()

Explicit accessible label for the overflow menu, when the crumb's rendered text is not the right string to list (e.g. an icon-only crumb). Reactive: bind it when the crumb text is dynamic.

default '', { alias: 'cngxBreadcrumbItemLabel' }

Methods#

resolvedLabel#string

Readable label for the collapsed-crumb list. Prefers the explicit label input; otherwise falls back to the projected text.

The fallback is a one-shot DOM read at call time, not reactive - it reflects the text present when called. For crumbs whose text changes at runtime, bind [cngxBreadcrumbItemLabel] so the reactive path is used.

HostBindings#

BindingExpression
[attr.aria-current]terminal() ? 'page' : null
[hidden]collapsed()