-
-
Notifications
You must be signed in to change notification settings - Fork 79k
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
Comments
@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)? |
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 |
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. 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 |
Will be great to see this in next v4 alpha. cheers. |
+1 |
+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) |
+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. |
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 It can also be used for other things as well with a variety creativity |
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
A few problems with my example:
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, |
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:
You'll need to fix these errors and post a revised example before we can proceed further. (Please note that this is a fully automated comment.) |
Updated: https://jsfiddle.net/2q4ppqm5/3/
(ignore the below lmvtfy errors - I'm using |
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:
You'll need to fix these errors and post a revised example before we can proceed further. (Please note that this is a fully automated comment.) |
Punting on adding this in v4 for the initial launch. Let's tackle it with a follow-up release. |
Is this possible as of now? The off canvas example on the website doesn't seem to be working as a side drawer |
The offcanvas example is confusing since it seems to be broken. |
No description provided.
The text was updated successfully, but these errors were encountered: