https://github.com/andrewalderson/angular-material-multilevel-sidenav

An implementation of a multi-level Angular Material Sidenav. Influenced by the navigation on Google Material V3 site
https://github.com/andrewalderson/angular-material-multilevel-sidenav

angular material

Last synced: about 2 months ago
JSON representation

An implementation of a multi-level Angular Material Sidenav. Influenced by the navigation on Google Material V3 site

• Host: GitHub
• URL: https://github.com/andrewalderson/angular-material-multilevel-sidenav
• Owner: andrewalderson
• License: mit
• Created: 2022-11-10T22:53:32.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-10-27T21:18:28.000Z (over 2 years ago)
• Last Synced: 2025-12-19T18:49:37.409Z (6 months ago)
• Topics: angular, material
• Language: TypeScript
• Homepage: https://andrewalderson.github.io/angular-material-multilevel-sidenav
• Size: 1.14 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Angular Material Multi-level Sidenav Sample

This sample was inspired by the navigation on the [Google Material Design v3 site](https://m3.material.io). It has been implmented in Angular using components from Angular Material.

[Demo](https://andrewalderson.github.io/angular-material-multilevel-sidenav)

## Features

- Implementation of Material Navigation Rail component

- Three levels of navigation

- Responsive 

    - Navigation rail used on screen widths of 960px and above

    - Top level navigation displays in sidenav on screens under 960px

- Accessiblity

    - proper aria labels added

    - proper focus management and click events