CngxNavBadge
projects/common/interactive/nav/nav-badge.directive.ts
Import#
import { CngxNavBadge } from '@cngx/common/interactive'
Description#
Inline badge for navigation items - shows counts, dots, or status indicators.
For generic in-place counter/dot indicators on arbitrary hosts (buttons,
avatars, icons), prefer CngxBadge from @cngx/common/display. CngxNavBadge
stays specialised for sidebar/link usage where the badge is the host span
and style is applied directly to it rather than to an injected child.
Applies aria-hidden="true" by default because badges typically duplicate
information already conveyed by the link text. When the badge conveys
unique information (e.g., unread count), provide [ariaLabel] to make
it accessible - this removes aria-hidden and adds a visually-hidden label.
Decorative badge (aria-hidden, default)
<a cngxNavLink>Inbox <span cngxNavBadge [value]="5">5</span></a>Accessible badge (unique information)
<a cngxNavLink>
Notifications
<span cngxNavBadge [value]="3" ariaLabel="3 unread">3</span>
</a>Dot indicator
<a cngxNavLink>Updates <span cngxNavBadge variant="dot" [value]="1"></span></a>Metadata#
Host#
Index#
Inputs#
string | undefinedAccessible label for the badge. When provided, aria-hidden is removed
and this label is announced by screen readers.
string | number | null | undefinedThe badge value. Hidden when empty string, null, undefined, or 0.
NavBadgeVariantVisual variant: 'count' (number), 'dot' (presence indicator), 'status' (text).
'count'HostBindings#
| Binding | Expression |
|---|---|
[class.cngx-nav-badge] | true |
[class.cngx-nav-badge--count] | variant() === 'count' |
[class.cngx-nav-badge--dot] | variant() === 'dot' |
[class.cngx-nav-badge--status] | variant() === 'status' |
[class.cngx-nav-badge--hidden] | isEmpty() |
[attr.aria-hidden] | ariaLabel() ? null : true |
[attr.aria-label] | ariaLabel() ?? null |