angular / angular/components

Active style for mat-nav-list

Open
#13,084 10 comments 23 reactions 0 assignees View on GitHub
area: material/list G P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

There's a theme-specific active style for navigation items in a nav drawer:

https://material.io/design/components/navigation-drawer.html#standard-drawer

(Note the way "inbox" is highlighted, because that's the section we're currently in).

However, there's no way to achieve this style in Angular Material. Ideally, there'd be a way to do this with routerLinkActive on a mat-nav-list.

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the mat-nav-list entry point and how routerLinkActive applies to navigation items, then compare the requested behavior with the linked Material Design navigation-drawer example. Done means Angular Material provides a documented way to show the active navigation section with the requested theme-specific styling.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.