Add .navbar-nav-scroll for vertical scrolling of navbar content

[mdo]

Fixes #23374.

TODO:

• Fix example

Preview: https://deploy-preview-32037--twbs-bootstrap.netlify.app/docs/5.0/components/navbar/#scrolling

[patrickhlauke]

nitpick ... not just vertical scrolling, but horizontal scrolling as well, no? i.e. despite targetting only the y axis, the mere presence of overflow-y seems to also lead to that horizontal scrollbar in larger (non-collapsed) nav?

[ffoodd]

Just a suggestion here: couldn't we use the scrolling shadow trick by Lea Verou here?

Would help to get a visual clue of overflown things.

And maybe some scroll-snap-* love too? Don't have a concrete idea but there's probably something to do.

[patrickhlauke]

Just a suggestion here: couldn't we use the scrolling shadow trick by Lea Verou here?

Would help to get a visual clue of overflown things.

And maybe some scroll-snap-* love too? Don't have a concrete idea but there's probably something to do.

i'd suggest a new ticket for this. and agree, would be good to provide a visual hint that there's more that can be reached with scrolling (for platforms where the scrollbar is not shown, like mobile). maybe not a shadow, but perhaps a subtle arrow or similar if that's still possible to do with pure CSS

[mdo]

Rebased and updated this PR to prevent the horizontal scrolling issue on expanded navbars. Also documented the potential issue with using overflow-y and clipping through overflow-x being automatically set by browsers. I think this is good to go and could be nice to include in both v5 and v4.6.

Can y'all take another look?

[XhmikosR]

@mdo it seems there are still overflow in certain display widths

But it seems to affect the other snippets too. That being said, I'm having trouble visualizing the scroll part here; I don't see the ability to horizontally scroll at all.

[ffoodd]

Like @XhmikosR said, even duplicating some nav items it still overflows horizontally. Am I missing something?

[mdo]

That being said, I'm having trouble visualizing the scroll part here; I don't see the ability to horizontally scroll at all.

This is for vertical scroll, not horizontal. On the expanded navbars (that is to say, the horizontal ones) the intent is that you don't see anything different than other navbars. Resetting to overflow visible might not be the right move though (maybe unset or initial?), but I was aiming for something that can be backported to v4.

[XhmikosR]

TBH I'm not sure about the feature itself, but if you all think it's something useful, that's fine.

BTW the scrollbar seems to overlap here with the button (FF on Windows x64)

[mdo]

Scrollbar only overlapped the button focus, but I've tweaked the demo to prevent that. Also updated the docs verbiage a bit, so should be good to go now.

[baszero]

Is this available in Bootstrap 4.5 ?