@gerandon/ngx-mat-cdk-deep-menu

(RADME was generated by GPT-5)

An Angular component library that provides a deep (multi-level) menu built with Angular CDK and Angular Material. It focuses on accessibility, keyboard navigation, and a clean API for nested menu structures.

Features

• Multi-level (deep) nested menus
• Accessible and keyboard-navigable structure
• Built on Angular CDK + Angular Material
• Lightweight and tree-shakable
• Strongly typed menu model
• Easy integration with standalone Angular components

Demo

A demo application is included in the repository under projects/demo. It showcases a nested menu setup and Material theming integration.

Installation

npm install @gerandon/ngx-mat-cdk-deep-menu

Peer dependencies you should have in your project:

• Angular 20
• @angular/material 20
• @angular/cdk 20
• rxjs 7

Quick Start

1. Import the component into your standalone component:

import { Component, signal } from '@angular/core'; 
import { MenuComponent } from '@gerandon/ngx-mat-cdk-deep-menu'; 
import { Menu } from '@gerandon/ngx-mat-cdk-deep-menu/menu-item';

@Component({ 
  selector: 'app-root',
  imports: [MenuComponent],
  template: `<gerandon-menu [items]="menuItems"></gerandon-menu>`, 
  standalone: true 
}) 
export class AppComponent {
  readonly menuItems: Menu[] = []; 
}

2. Ensure Angular Material styles are included (via your global styles or theme setup).

Usage

• Input
  • items: Menu[] — Array of menu items with optional nested children.
• Menu item model
  • label: string
  • children?: Menu[]
  • icon?: string
  • disabled?: boolean
  • any additional custom fields you map in your templates/handlers

Example with deeper nesting:

const items: Menu[] = [];

Theming

• Works with Angular Material theming.
• You can override component styles in your global or component stylesheets.
• Make sure your Material theme is applied to the app for consistent styling.

Accessibility

• Built with Angular CDK patterns for focus management and keyboard navigation.
• Use semantic labels and consider ARIA attributes for custom needs.

Development

• Library source: projects/ngx-mat-cdk-deep-menu
• Demo app: projects/demo

Common scripts:

Version Compatibility

• Angular: 20.x
• @angular/material: 20.x
• TypeScript: 5.8.x
• RxJS: 7.8.x

Contributing

• Open an issue for bugs or feature requests.
• Follow Angular and Material best practices.
• Use conventional commits if possible.

License

MIT