CngxBreadcrumbSiblings
projects/ui/breadcrumb/breadcrumb-siblings.component.ts
Import#
import { CngxBreadcrumbSiblings } from '@cngx/ui/breadcrumb'
Description#
Per-crumb lateral-navigation dropdown for a hand-composed breadcrumb trail.
Where CngxBreadcrumbOverflow lists the collapsed ancestors of the
current trail, this lists the siblings at one level - the alternatives a
user can jump sideways to (Home > Region EU > Berlin offering Munich,
Hamburg). It is a disclosure over lateral navigation: a
CngxPopoverTrigger-owned chevron reveals a CngxPopoverPanel
surface holding a role="list" of native <a href> anchors, and it
self-hides when there are no siblings. Native link semantics give keyboard
activation, screen-reader link roles, and middle-click for free - a command
menu would intercept activation and never navigate.
It owns its own sibling data and never injects the collapse coordinator, so it
drops in anywhere a crumb needs a sideways picker. Rows come from the static
[siblings] input, or - opt-in - from a CNGX_BREADCRUMB_SIBLINGS_SOURCE
provider (the router-sync directive); the controlled source wins over the
input via a computed (Pillar 1: no effect writes). The active level carries
aria-current="page" and renders no link.
<nav cngxBreadcrumb>
<a cngxBreadcrumbItem href="/">Home</a>
<a cngxBreadcrumbItem href="/eu">Region EU</a>
<cngx-breadcrumb-siblings [siblings]="cities" />
</nav>Metadata#
Relationships
Index#
Inputs#
readonly CngxBreadcrumbSibling[]Static sibling rows. Superseded by a provided CNGX_BREADCRUMB_SIBLINGS_SOURCE.
[], { alias: 'siblings' }Accessible name of the chevron trigger. Falls back through the config cascade to the EN default.
this.cfg.ariaLabels?.siblingsTrigger ?? 'Show sibling pages'Instance Properties#
unknownRows the dropdown renders: controlled source wins, else the static input.
createControlledSource(this.source?.siblings, this.siblingsInput)unknownPer-row template overriding the default sibling row, when projected.
contentChild(CngxBreadcrumbSiblingItem, { read: TemplateRef })