Feature request: navigation rail

[NawarA]

New material component, the navigation rail.

• good for 3 to 7 destinations
• part of the navigation design spec... see the responsive design section to see how this mixes in with other navigation components

https://m3.material.io/components/navigation-rail/overview

Benchmarks

[mbrookes]

Other than a fix for the icon centering issue, is this good enough?

https://material-ui.com/components/drawers/#mini-variant-drawer

[NawarA]

@mbrookes Hmmm...Doesn't look like it currently conforms to specs.

The Navigation Drawer and Navigation Rail are meant to be separate components, with different specs. They're meant to be used together in a certain way: scroll down to "Navigation drawer"

Also, the Navigation Drawer mini-drawer is not a material design spec, is it? I only see Standard, Modal, and Bottom as part of the Navigation Drawer spec. Perhaps the MUI mini-drawer should eventually be deprecated in v5 and replaced with Navigation Rail?

If Nav Rail gets released in v4, it'll be a minor update with a new namespace (this way people don't experience breaking changes if they're using mini-drawer).

In case you want to use the MUI's Mini-Drawer source to create a Navigation Rail, you'd want to: Step 1 - Conform to specs

• [ ] including icon spacing
• [ ] active selection (nav rail's component state)
• [ ] Compact {bool, default false} (when true, PersistentText is overridden to false)
• [ ] PersistentText {bool, default false}
• [ ] groupAlignment {Top [default], center, bottom}

Step 2 - Create a new namespace for it, calling it NavigationRail, and placing its z-index below AppBar

Step 3 - you probably know what do better for step 3 than me :)

Hopefully these suggestions were helpful

[LincMitch]

I'm keen to use Navigation Rail and hope this goes ahead. If it does, a few questions:

1. Any estimates as to when it is likely to be available?
2. Would it be quicker to 1st implement it in the Framerfx?
3. Can you make RWD feature a be a prop and appear left, bottom and even right and top?

[oliviertassinari]

@LincMitch I don't think that w will support it before a year, if we ever do. The best case would be to create a standalone repository for it, like developers usually do to fill in important gap: https://github.com/sautumn/material-ui-autocomplete-google-places.

[NawarA]

I built the Nav Rail for my react app, following the specs.

I could somehow try to export it. Would that be helpful?

[LincMitch]

@NawarA That would be very helpful indeed as I'm more designer than developer. Really just consuming components and hacking at them within Framer X.

[oliviertassinari]

@LincMitch Are you using https://packages.framer.com/package/material-ui/material-ui or did you made your own version?

[LincMitch]

@oliviertassinari Yes that's the one. Ideally, I want to wrap those components to integrate better into Framer X and allow the designer to have more flexibility - else it's hard to get it adopted as is.

[LincMitch]

@NawarA did you manage to export it?

[mbrookes]

@LincMitch What did you have in mind? Those components wrap the Material-UI ones.

[LincMitch]

@mbrookes I see. Well, I want to keep the package as a base and extend it, so would that be a wrap of a wrap? For instance, a simple example is how to add a colour prop to the Snackbar and attach that color coming from the theme component. Or another simple example is adding color to the icon component that is not a current color option.

[mblodorn]

hey there,

@LincMitch, I think you meant to tag @mbrookes

[LincMitch]

Thx @mblodorn

[NawarA]

@LincMitch nah, ive been busy coding, instead of exporting. I'll get to it next week. Is that okay with you, in terms of timing?

[LincMitch]

Of course, no rush. Just appreciate the offer.

[TreyOverton]

@LincMitch nah, ive been busy coding, instead of exporting. I'll get to it next week. Is that okay with you, in terms of timing?

@NawarA Did you ever export your Nav Rail per your offer?

[cdavid15]

Just looking to see if there is any update / progress on this as I am keen to make use of the new Navigation Rail (assuming it will leave BETA) but wasn't sure on the workflow within Material UI for implementation.

Does the components only get build once they are official guidelines within Material Design?

[galah92]

Would also want that.

[kgregory]

Just decided that a navigation rail may be worthwhile in our app at work and whipped up this codesandbox which is a close (but not exact) approximation of the material design spec. Here is a screenshot:

It is just a wrapper on BottomNavigation and BottomNavigationAction that reorients the flexbox as a column with some specific sizing applied. I hope this helps!

[galah92]

@kgregory Amazing! I ended up doing the exact same on my own for now. Good enough for now.

[IrrerPolterer]

I'm curious - what's the reason this isn't implemented officially by MUI yet? Are there specific blockers?

[listepo]

More than 3 years later, is there any understanding of whether and when this will be implemented?

[NawarA]

sorry, ive been busy with my startup.

its super duper easy to make a nav rail, if you follow the material spec.

i'll come back to this in Oct, in case its not solved, and share a snippet with Olivier, et all, if still needed