CngxNavGroup

DirectivePrimaryv0.1.0WCAG AA

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

Import#

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

Description#

Navigation accordion group - a collapsible section in a sidebar nav.

Composes CngxDisclosure as a hostDirective for expand/collapse behavior. Adds nav-specific semantics: depth tracking and CSS classes for styling.

When CNGX_NAV_CONFIG is provided with singleAccordion: true and a CngxNavGroupRegistry is in scope, opening this group closes all other groups registered in the same registry.

Applied to the trigger element (the group header button). The consumer renders the content separately and wires role="group" and aria-labelledby on the content container.

Basic

<button cngxNavGroup #group="cngxNavGroup" [controls]="'settings-nav'"
        [depth]="0" id="settings-label">
  Settings
</button>
@if (group.disclosure.opened()) {
  <div id="settings-nav" role="group" [attr.aria-labelledby]="'settings-label'">
    <a cngxNavLink [depth]="1">General</a>
    <a cngxNavLink [depth]="1">Security</a>
  </div>
}

Single-accordion mode

@Component({
  providers: [
    provideNavConfig({ singleAccordion: true }),
    CngxNavGroupRegistry,
  ],
})

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: [cngxNavGroup]
Export as: cngxNavGroup
Host directives: CngxDisclosure
inputs cngxDisclosureOpened controls
outputs openedChange

Host#

Bound classes: cngx-nav-group ← true cngx-nav-group--open ← disclosure.opened()
Bound styles: --cngx-nav-depth ← depth

Dependencies#

CngxDisclosureinject()hostdisclosure

The composed disclosure instance - use disclosure.opened() to read state.

Index#

Inputs

depth

HostBindings

class.cngx-nav-group class.cngx-nav-group--open style.--cngx-nav-depth

Inputs#

depth#number

input()

Nesting depth for indentation. Consumer sets manually.

default 0

HostBindings#

Binding	Expression
`[class.cngx-nav-group]`	`true`
`[class.cngx-nav-group--open]`	`disclosure.opened()`
`[style.--cngx-nav-depth]`	`depth()`