Bootstrap: Add off-canvas navigation sidebar component

[shanksdev]

[cvrebert]

@shanksdev Do you mean something similar to a vertical nav menu ( http://v4-alpha.getbootstrap.com/components/navs/#stacked-pills ), or similar to an off-canvas menu (like http://getbootstrap.com/examples/offcanvas/ with its "Toggle nav" button when the screen is narrow)?

[shanksdev]

The off-canvas menu with toggle nav was something i was looking for. I came across this need when i was first time getting my hands on bootstrap i came up with the sidebar using the nav stacked-pills, something like this

Sorry @cvrebert, I didn't knew about offcanvas.css and offcanvas.js that time. But after reviewing the code of both js and css files it seems easy to implement. :)
Still, if you think that its worth adding that much code of both files in your bootstrap's js and css then please do, we can save 1 or 2 http requests. :)

[mattez]

YES. Off Canvas or also called Drawer (may be better name) is more and more often used UI component these days. It would be nice if it becomes an official Bootstrap 4 component with standardized implementation process.
I'm not sure how sophisticated and bullet-proof this v3 (old) Off Canvas example is. Some of Bootstrap GURUs should revised that solution and update it. Because this v4 Off Canvas example is only copy of that v3 (old) solution.

ZUBR Fundation got component "offcanvas" which looks really cool, it got also offcanvas multilevel menu variant (must see, realy cool)

For example in Polymer there is component called "paper-drawer-panel" demo here which act more like overlay with Bootstrap Modal with 100vh and transition.

Ink got "drawer" too.

UIKit got "off-canvas" component

Semantic UI got "sidebar" module

etc..

Here is classical article about off-canvas patterns: http://jasonweaver.name/lab/offcanvas

[laminsk]

Will be great to see this in next v4 alpha. cheers.

[michaelwoodruff]

+1

[av3]

+1

Those drawers are also used in Material Design, therefore I would like to use drawsers for the main navigation of my mobile optimized websites (like used in materializecss.com, but with a horizontal navbar on non-mobile devices)

[tlaverdure]

+1

This seems to be a popular feature. I've used a bootstrap plugin (http://www.jasny.net/bootstrap/examples/navmenu/) for this sort of thing before but it would be great to have official support for something like this.

[cvrebert]

X-Ref: #15796, #9481

[adiramardiani]

I think in Collapsible content is the best method to create off-canvas, drawer, or whatever name to references this.

If this feature is add example not only on the top, maybe in the right, left or bottom. If added a OVERLAY option, this will be great :)

Actually/currently method to handle off-canvas in other framework
And overlay method to handle ui like material-design menu implement now

It can also be used for other things as well with a variety creativity

@cvrebert @mdo @RyanZim

[RyanZim]

Here is a proof-of-concept of @adiramardiani's method: https://jsfiddle.net/2q4ppqm5/2/. I was able to use all existing BS classes except I added added an .overlay class that sets:

.overlay {
  height: 100vh;
  position: fixed;
  background-color: #FFF;
  border-right: solid 1px ;
}

A few problems with my example:

• Navigation should come in from the right instead of the top.
• It isn't possible to make the drawer visible as a sidebar. (This probably could be done, but I didn't take the time to figure out how.)

Note that this example has two buttons, one on the page, and one in the drawer (for closing).

I think this might be a good idea, it will just take a little work. Also, .navbar-toggleable-* & .navbar-toggle would need to be renamed if we implement drawers with this method.

[twbs-lmvtfy]

Hi @RyanZim!

You appear to have posted a live example (https://fiddle.jshell.net/2q4ppqm5/2/show/light/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

• line 10181, column 5: E013: Only columns (.col-*-*) may be children of .rows

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)

[RyanZim]

Updated: https://jsfiddle.net/2q4ppqm5/3/

• Added .col-xs-12 to main content to fix lmvtfy errors
• Moved <nav> outside .row
• Added z-index: 1 to .overlay

(ignore the below lmvtfy errors - I'm using .col-*-* classes for the size of the nav)

[twbs-lmvtfy]

Hi @RyanZim!

You appear to have posted a live example (https://fiddle.jshell.net/2q4ppqm5/3/show/light/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

• line 10164, column 3: E014: Columns (.col-*-*) can only be children of .rows or .form-groups

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)

[mdo]

Punting on adding this in v4 for the initial launch. Let's tackle it with a follow-up release.

[mojimi]

Is this possible as of now? The off canvas example on the website doesn't seem to be working as a side drawer

[jktravis]

The offcanvas example is confusing since it seems to be broken.