Investigate making Bottom Navigation Component

[traviskaufman]

Spec reference: https://material.io/go/design-bottom-navigation

Useful for mobile-specific sites and layouts.

Copied from https://github.com/google/material-design-lite/issues/4502 @

[AriasBros]

https://docs.google.com/document/d/1N2f0z-HI1xpiYbiYQF-PrkvELJ3vv2Q-VrmAMzIapBU/edit?usp=sharing

I need this component, so I could start its development. What do you think?

[AriasBros]

I wrote a first functional implementation:

https://github.com/AriasBros/material-components-web/tree/dev/packages/mdc-bottom-navigation

There is still dealing with snackbars, dialogs and ripples.

Please, give me some feedback so I can go forward with more documentation and tests or if on the contrary, I must change something in the current implementation. Any advice or suggestion is welcome.

[neves-io]

Hi @AriasBros I'm keen to test this out for you, as I've got a little project that this would be perfect for. I'm having trouble getting this running though. If you're able to talk me through getting it running I can test it out for you. (Warning I'm a bit of a newbie with web components, but very willing to learn!)

[ChristianHardy]

White smoke here?

[Download]

For an item pretty essential to every app (navigation component) this issue has been open for a very long time. Is there a progress update on this?

What is Google doing internally? Just not using bottom app bar in websites? I think Google often goes native apps on mobile so maybe that is why this component does not get any love on the web?

[richturner]

I came across the following codepen whilst trying to track progress:

https://codepen.io/eskimojo14/pen/PEVjBJ

Don't know how well it follows the material design guidelines and cannot find anything else about it or the author.

[samuel-fonseca]

@richturner that actually seems to be a pretty good partial fix. If you look at the documentation for the bottom navigation bar it fits - mostly - the description and guidelines set by Material Design.

Will have to try and implement it until they release a patch for this.

[touficbatache]

Hey @richturner, I've also come across the same codepen while searching on Google and I thought the one who made it would have already referenced it here. So the author of this codepen seems to be @EskiMojo14 and I strongly believe he should submit this component here.

[EskiMojo14]

Oh hello! The codepen mentioned above was made by me while bored at work - I had a rather strong material design phase. I designed it to be as close to the spec at the time (this was before the new spec came out) as possible. I'm not particularly up to date with material-components-web nowadays, but I believe they use a particular way of formatting things that I'm not familiar with. My JS knowledge is lacking, but if anyone wanted to build a component to MCW's specifications based on my SCSS, I think that'd be awesome. Feel free to use my codepen however you wish.

Edit: the main part I struggled with was getting the ripple to work correctly on the shifting bottom nav, hence why it's not enabled on the codepen.

[touficbatache]

@EskiMojo14 The ripple seems to be working completely fine on the codepen!

[EskiMojo14]

@touficbatache works fine on the fixed (white) bottom nav, ye - it's the shifting (green) one that I couldn't work out how to do it right

[touficbatache]

@EskiMojo14 Should be the same 🤔

[EskiMojo14]

@touficbatache nah, because the icons actually move - the way unbounded icons are handled now may make it better, not sure

[touficbatache]

@EskiMojo14 Do you mind we talk a bit on Discord?

[EskiMojo14]

@touficbatache sure, meet you in the Material Components discord?

[touficbatache]

@EskiMojo14 Okay

[no-1ne]

Folks any love for bottom navigation anytime soon

[FANMixco]

Would we ever have this feature? It´s extremely common in the current times. This could be an option: https://github.com/greenyouse/bottom-nav