Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Investigate making Bottom Navigation Component #59

Open
traviskaufman opened this issue Dec 5, 2016 · 18 comments
Open

Investigate making Bottom Navigation Component #59

traviskaufman opened this issue Dec 5, 2016 · 18 comments

Comments

@traviskaufman
Copy link
Contributor

traviskaufman commented Dec 5, 2016

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

Useful for mobile-specific sites and layouts.

Copied from google/material-design-lite#4502 @

@traviskaufman traviskaufman added this to the Post-Release milestone Dec 5, 2016
@sgomes sgomes changed the title Implement Bottom Navigation v2 Component Implement Bottom Navigation Component Dec 19, 2016
@lynnmercier lynnmercier changed the title Implement Bottom Navigation Component Investigate making Bottom Navigation Component Jan 23, 2018
@AriasBros
Copy link

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
Copy link

AriasBros commented Apr 11, 2018

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
Copy link

neves-io commented Jun 1, 2018

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!)

@kfranqueiro kfranqueiro removed this from the Post-Release milestone Aug 17, 2018
@ChristianHardy
Copy link

White smoke here?

@Download
Copy link

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
Copy link

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
Copy link

@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
Copy link
Contributor

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
Copy link

EskiMojo14 commented Feb 21, 2019

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
Copy link
Contributor

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

@EskiMojo14
Copy link

@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
Copy link
Contributor

@EskiMojo14 Should be the same 🤔

@EskiMojo14
Copy link

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

@touficbatache
Copy link
Contributor

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

@EskiMojo14
Copy link

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

@touficbatache
Copy link
Contributor

@EskiMojo14 Okay

@no-1ne
Copy link

no-1ne commented Jun 13, 2019

Folks any love for bottom navigation anytime soon

@FANMixco
Copy link

FANMixco commented May 5, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet