CngxNavLabel

Directivev0.1.0WCAG AA

projects/common/interactive/nav/nav-label.directive.ts

Import#

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

Description#

Non-interactive section header for navigation groups.

Renders as a visual label without semantic heading role by default. Use [heading]="true" to opt in to role="heading" with aria-level when the label genuinely represents a heading in the document outline.

Section label (default - no heading role)

<span cngxNavLabel>@cngx/common</span>

With heading semantics (opt-in)

<span cngxNavLabel [heading]="true" [level]="3">Settings</span>

https://cngxjs.github.io/cngx/examples/#/common/interactive/nav/nav-badge-counts-and-dots https://cngxjs.github.io/cngx/examples/#/common/interactive/nav/nav-group-accordion-sections https://cngxjs.github.io/cngx/examples/#/common/interactive/nav/nav-links-active-state-depth

Metadata#

Selector: [cngxNavLabel]
Export as: cngxNavLabel

Host#

Static attributes: [attr.role]heading() ? "heading" : null
[attr.aria-level]heading() ? level() : null
Bound classes: cngx-nav-label ← true

Index#

Inputs

heading level

HostBindings

class.cngx-nav-label attr.role attr.aria-level

Inputs#

heading#boolean

input()

Whether to apply role="heading". Off by default to avoid inflating the heading outline.

default false

level#number

input()

The heading level (2–6) when heading is true.

default 3

HostBindings#

Binding	Expression
`[class.cngx-nav-label]`	`true`
`[attr.role]`	`heading() ? "heading" : null`
`[attr.aria-level]`	`heading() ? level() : null`