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

Comments

Projects
None yet
@shanksdev

No description provided.

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Sep 7, 2015

Member

@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)?

Member

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

This comment has been minimized.

Show comment
Hide comment
@shanksdev

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

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 from How about adding sidebar as a whole new component ? to Add off-canvas nav sidebar component Sep 7, 2015

@mattez

This comment has been minimized.

Show comment
Hide comment
@mattez

mattez Sep 11, 2015

Contributor

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

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@laminsk

laminsk Sep 17, 2015

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

laminsk commented Sep 17, 2015

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

@michaelwoodruff

This comment has been minimized.

Show comment
Hide comment
@av3

This comment has been minimized.

Show comment
Hide comment
@av3

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

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

This comment has been minimized.

Show comment
Hide comment
@tlaverdure

tlaverdure 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.

+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

This comment has been minimized.

Show comment
Hide comment
Member

cvrebert commented Oct 14, 2015

X-Ref: #15796, #9481

@cvrebert cvrebert changed the title from Add off-canvas nav sidebar component to Add off-canvas navigation sidebar component Mar 1, 2016

@adiramardiani

This comment has been minimized.

Show comment
Hide comment
@adiramardiani

adiramardiani 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

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

This comment has been minimized.

Show comment
Hide comment
@RyanZim

RyanZim 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.

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

This comment has been minimized.

Show comment
Hide comment
@twbs-lmvtfy

twbs-lmvtfy 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.)

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

This comment has been minimized.

Show comment
Hide comment
@RyanZim

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

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

This comment has been minimized.

Show comment
Hide comment
@twbs-lmvtfy

twbs-lmvtfy 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.)

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

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo May 12, 2016

Member

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

Member

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

This comment has been minimized.

Show comment
Hide comment
@mojimi

mojimi 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

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

This comment has been minimized.

Show comment
Hide comment
@jktravis

jktravis Mar 14, 2018

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

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