Bootstrap: Drawer, sidebar, offcanvas nav

[davidenco]

Does the navbar in BS4 have an option whereby the hamburger menu slides from right to left, also pushing the content to the left too, instead of top to bottom?

[farooq07]

You want an offcanvas menu ?

[SamThilmany]

This thread seems to have fallen into oblivion. Too bad, because an "offcanvas menu" in Bootstrap would be really great.

In this commentary I want to present some useful information that are – in my eyes – relevant for such a menu. For the developers it is certainly an advantage that the frontend framework UIkit offers such an offcanvas menu, which meets all requirements for a good menu. So you only have to add it in Bootstrap.

A few important features:

The menu should be openable with different animations:

• Reveal
• Push
• Slide

Furthermore, an overlay should be placed over the rest of the page when the menu is open.

Most important is that the body is not scollable when the menu is open. Unfortunately, it is not sufficient to set the overflow to hidden, as touch devices ignore it. On mobile phones this results in a very annoying scrolling behaviour, especially if the menu itself is scrollable. Thus, a solution has to be found how to prevent the scrolling of the body both on the desktop and on mobile devices when the menu is open. The latter must of course remain scrollable.

This has already been implemented by UIkit. Just have a look at one of the overlay examples on a touch device.

Final words

I really hope that this can be implemented in the next version of BS4 since the lack of this component in my eyes would be a good reason for a switch to UIkit.

I wanted to create such a component myself and make it available as a pull request, but unfortunately I fail to implement the important scroll sublink. This was probably solved with JavaScript in UIkit, unfortunately I don't understand the code. To all developers: UIkit is, like Bootstrap, an open-source project, so you can find their approach on GitHub.

[Johann-S]

There is a off canvas example here: https://getbootstrap.com/docs/4.1/examples/offcanvas/

[SamThilmany]

That's right, but it expands to the full width which is not recommended in the context of good UX design since the user no longer sees on which page he is. It could be the impression of a page change, although one has actually only opened a menu. For this reason, it is recommended to open the menu only over 80% to 90% of the width and thus still display the actual page. Here, the scrolling behaviour described by me becomes important.

Since bootstrap is usually a very user-friendly framework, I think there is definitely a lot of catching up to do here. I would like to refer you to the resource I mentioned, which solved the UX perfectly. Bootstrap should definitely do something in that form as well.

[viktorsmari]

I think the Offcanvas menu (not filling the whole screen, only ~80%) is becoming a _standard_, and I would really like Bootstrap to support it.

There have been made a couple of PR on this, but I have never seen them merged, only talk about a new component being made, but I cannot find if it is being worked on.

[davidenco]

I ended up using this instead, which provides all the functionality and flexibility that the Bootstrap version lacks. Such a shame, I was hoping to use Bootstrap for everything, but that will never happen! :(

[thehitechpanky]

Last comment is more than an year ago. Is this in pipeline?

[viktorsmari]

Could this be related? https://github.com/twbs/bootstrap/pull/29017

[mariusa]

Would love a component similar to https://coreui.io/docs/components/sidebar/ or https://vuetifyjs.com/en/components/navigation-drawers

[dimitor115]

Hi everyone 😸 I have created some concept of bootstrap sidebar / side-menu. The design and behaviour is inspired by gitlab and coreui. The side-menus are really popular in the admin panels / dashboards and many of them uses Bootstrap components, so it will be awesome to have such component here.

Here is my concept: https://jsfiddle.net/dimitor115/v9sf4rxb/61/
@mdo @XhmikosR @MartijnCuppens If you like the whole idea, I would love to prepare PR and polish the code with your help!

[rafalp]

@dimitor115 Have you seen this PR?

https://github.com/twbs/bootstrap/pull/29017

[dimitor115]

@rafalp yes! But in that PR only the offcanvas was introduced. My goal was to extend bootstrap nav component to be use as sidebar, important for me was also this minimized version (very helpful for smaller resolutions). I also think that these two feature can work together!

There reason I've create this fiddle was the fact that it's quite easy to to use boostrap horizontal nav as sidebar (with few more css) and implement toggling it manually. However it's a little bit tricky to add this minimized behaviour. So when I make it for my project I thought about sharing this solution with the bootstrap community 😺

[XhmikosR]

At the moment, we plan to finish #29017 for v5.0.0. Not sure about your solution, but feel to make a PR against master and we'll try to have a look. So many things to do, so there might be a delay, though.

[dimitor115]

@XhmikosR thanks for responding! I will create a PR and describe carefully my idea for this components and it's potential usage. Understand that the maintainers are focused on 5.0.0 release, no pressure from my side 😸