components Add Navigation Rail Sidenav Component

trafficstars

Feature Description

This was just added 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

Jan 24 '20 15:01 JaxonWright

Hi, are there plans to implement this feature soon? Its much awaited!

Apr 16 '20 16:04 vthil3049

This would be a really nice addition to the new MDC components.

It's a shame the specs do not have an option to place the text next to the icons instead of only underneath.

Collapsed => only icons
Expanded => icons with the text on the right side, like the navigation drawer

Does this automatically mean that 'extra' functionality will not be added to the Angular Navigation Rail?

Jul 15 '20 09:07 the-ult

can't wait to see this come through

Sep 02 '20 04:09 joshtune

Has this been implemented? I am eagerly awaiting to use this new rail mode for minimizing my nav bar, but still allowing the user to go right to the nav item they want, saving a click.

Jul 25 '21 20:07 tom-juntunen

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

Feb 22 '22 15:02 angular-robot[bot]

Has this gone somewhere?

Aug 21 '24 01:08 geoapis-ti

Any update on this feature?

Jun 19 '25 12:06 nirh1989

+1, The navigation-rail component is awesome, I can't wait to see it in the Angular component

Jun 19 '25 13:06 hungtcs

I ended up just implementing my own version of this component. The only problem is that it surely is not as accessible or robust as an eventual official solution.

Not sure if I want to make it generic enough to be an NPM package or not yet.

Jul 10 '25 15:07 JaxonWright

+1, would be very useful!