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

Add off-canvas navigation sidebar component #17502

Closed
shanksdev opened this issue Sep 7, 2015 · 16 comments
Closed

Add off-canvas navigation sidebar component #17502

shanksdev opened this issue Sep 7, 2015 · 16 comments
Labels

Comments

@shanksdev
Copy link

@shanksdev shanksdev commented Sep 7, 2015

No description provided.

@cvrebert
Copy link
Member

@cvrebert cvrebert commented Sep 7, 2015

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

@shanksdev shanksdev commented Sep 7, 2015

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
sidebar
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. :)

@cvrebert cvrebert changed the title How about adding sidebar as a whole new component ? Add off-canvas nav sidebar component Sep 7, 2015
@mattez
Copy link
Contributor

@mattez mattez commented Sep 11, 2015

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

@laminsk laminsk commented Sep 17, 2015

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

@michaelwoodruff
Copy link

@michaelwoodruff michaelwoodruff commented Sep 17, 2015

+1

@av3
Copy link

@av3 av3 commented Sep 22, 2015

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

@tlaverdure tlaverdure commented Sep 27, 2015

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

@cvrebert cvrebert commented Oct 14, 2015

X-Ref: #15796, #9481

@cvrebert cvrebert changed the title Add off-canvas nav sidebar component Add off-canvas navigation sidebar component Mar 1, 2016
@adiramardiani
Copy link

@adiramardiani adiramardiani commented Apr 16, 2016

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

@RyanZim RyanZim commented Apr 16, 2016

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

@twbs-lmvtfy twbs-lmvtfy commented Apr 16, 2016

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

@RyanZim RyanZim commented Apr 16, 2016

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

@twbs-lmvtfy twbs-lmvtfy commented Apr 16, 2016

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

@mdo mdo commented May 12, 2016

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

@mdo mdo closed this May 12, 2016
@mdo mdo added this to the v4.1 ideas milestone May 12, 2016
@mdo mdo modified the milestone: v4.1 ideas Jun 18, 2017
@mojimi
Copy link

@mojimi mojimi commented Feb 22, 2018

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

@jktravis
Copy link

@jktravis jktravis commented Mar 14, 2018

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

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

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.