Menu icon Foundation
Foundation 6 & Off-Canvas: bottom

In Foundation 5, the Off-Canvas container supported all 4 edges of the screen, but looking at the Foundation 6 docs the container now only supports left and right edges. That's a bit frustrating for me with the current app I'm working on. Is there an equivalent within Foundation 6 that could be used instead?

foundation 6off-canvas

In Foundation 5, the Off-Canvas container supported all 4 edges of the screen, but looking at the Foundation 6 docs the container now only supports left and right edges. That's a bit frustrating for me with the current app I'm working on. Is there an equivalent within Foundation 6 that could be used instead?

Rafi Benkual over 3 years ago

There are some issues with the interactions of these implementations I'd like to get your feedback on.

In the example http://foundation.zurb.com/sites/docs/v/5.5.3/components/offcanvas.html#off-canvas-from-any-direction

The top off-canvas feels nice because you have to be at the top to trigger it open. The bottom one however, if you open it from the top, unless you have a screen that is 100vh height, will open and the user must know to scroll to the content.

Also if the bar is sticky, the top off-canvas would need to jump back to the top to focus the user. Might be jarring.

What are your thoughts?

Silver over 3 years ago

As you said, the top one is easy-ish. Honestly, it feels like a bottom-bound version of the off-canvas would have to be either tied to the bottom of the viewport, or activated by a button at the bottom of the screen; you're right in that it certainly doesn't generally fit usage with a top-bar. Perhaps top and bottom off-canvas components would be unavailable for use with a top-bar? I think they still have uses, though.

As I use the Foundation 6 off-canvas more, I'm finding other options also missing - for example, the option to have an offcanvas container overlay the page content, rather than push it away. Things like that are extremely useful options that I hope make a comeback.

Ryan McCready over 2 years ago

Good news! Thanks to your feedback there was a push to build something better. In Foundation 6.3, released on Dec 15th, there is an all new improved off-canvas. We’d love to hear the challenges or common patterns with off-canvas are you working with. Check out the details and jump in on the conversation!

 

 

http://foundation.zurb.com/forum/posts/49868-new-improved-off-canvas-in-foundation-63