CngxBreadcrumbOverflow

ComponentOnPushNo encapsulationv0.1.0WCAG AA

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

Import#

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

Description#

Drop-in overflow menu for CngxBreadcrumbBar. Presents the crumbs the headless trail collapsed as a real dropdown: an ellipsis trigger plus a CngxPopoverPanel surface hosting a CngxMenu of the collapsed crumbs. It reads the collapse set through the CNGX_BREADCRUMB DI contract - never the concrete coordinator - so it stays decompose-clean, and self-hides when nothing is collapsed, which makes it an unconditional drop-in.

The default row lists resolvedLabel() and does not navigate. Project *cngxBreadcrumbOverflowItem to render a navigable row (an <a href> or [routerLink]) when the collapsed crumbs must link.

<nav cngxBreadcrumb [maxVisible]="4">
  <a cngxBreadcrumbItem href="/">Home</a>
  <cngx-breadcrumb-overflow />
  ...
</nav>

https://cngxjs.github.io/cngx/examples/#/ui/breadcrumb/overflow/collapsed-menu

Metadata#

Selector: cngx-breadcrumb-overflow
Export as: cngxBreadcrumbOverflow
Change detection: ChangeDetectionStrategy.OnPush
Encapsulation: ViewEncapsulation.None
Template URL: ./breadcrumb-overflow.component.html
Style URLs: ./breadcrumb-overflow.component.css
Style URL: ./breadcrumb-overflow.component.css
Imports: NgTemplateOutlet CngxMenu CngxMenuItem CngxMenuTrigger CngxPopoverPanel CngxPopoverTrigger

Dependencies#

CNGX_BREADCRUMBinject()breadcrumb

Collapse-set contract, provided by the surrounding cngxBreadcrumb.

Relationships

Used by1

componentCngxBreadcrumbBarBreadcrumb bar organism.

Depends on6

NgTemplateOutletdependency

CngxMenuAttribute directive

CngxMenuItemAttribute directive

CngxMenuTriggerAttribute directive

CngxPopoverPanelStandalone component

CngxPopoverTriggerAttribute directive

Index#

Properties

itemTemplate

Inputs

itemTemplateInput menuLabel triggerLabel

Inputs#

itemTemplateInput# TemplateRef | undefined

Per-row template forwarded by CngxBreadcrumbBar. Lets the bar pass a consumer-projected *cngxBreadcrumbOverflowItem into this composed overflow, which it cannot reach as contentChild. Wins over the directly-projected slot (controlled/uncontrolled: input first, query fallback).

default undefined, { alias: 'itemTemplate' }

menuLabel#

input()

Accessible name of the collapsed-crumb menu. Falls back through the config cascade to the EN default.

default this.cfg.ariaLabels?.overflowMenu ?? 'Collapsed breadcrumbs'

triggerLabel#

input()

Accessible name of the ellipsis trigger. Falls back through the config cascade to the EN default.

default this.cfg.ariaLabels?.overflowTrigger ?? 'Show collapsed breadcrumbs'

Instance Properties#

itemTemplate#unknown

ProtectedReadonly

Resolved row template: a bar-forwarded input wins, else the directly-projected slot.

createControlledSource(
  this.itemTemplateInput,
  this.itemTemplateQuery,
)