angular / angular/components

Add Navigation Rail Sidenav Component

Open
#18,280 14 comments 91 reactions 0 assignees View on GitHub
area: material/sidenav feature needs: discussion P5
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Feature Description

This was [just added](https://material.io/components/navigation-rail/) to the official Material Design spec. Navigation rails provide ergonomic movement between primary destinations in apps. YouTube and Google Photos are a couple of examples that use this component.

#### Use Case

The rail is a side navigation component that displays three to seven app destinations and, optionally, a Floating Action Button. Each destination is represented by an icon and a text label.

The rail can function on its own at larger screen sizes, such as desktop and tablet. When users transition between screen sizes and devices, the rail can also complement other navigation components, such as bottom navigation.

#### Preview
![](https://storage.googleapis.com/spec-host/mio-staging%2Fmio-components%2F1579302979877%2Fassets%2F16RFbe_aL_2_gNzrpCWu-wXNAJjouLRlm%2Frail-anatomy-container-dense.png)

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the Angular Material navigation components and the linked Material Design navigation-rail specification to understand the existing component patterns. Done means adding a navigation rail that supports three to seven destinations, optional text labels and Floating Action Button, and use alongside other navigation components across screen sizes.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.