Menu icon Foundation
TopBar in Off Canvas

Hi,

Is it possible to have a TopBar in an Offcanvas layout? The Offcanvas example in the Docs uses a TabBar.

Thanks

offcanvas

Hi,

Is it possible to have a TopBar in an Offcanvas layout? The Offcanvas example in the Docs uses a TabBar.

Thanks

Rafi Benkual over 5 years ago

Combining them is not a supported feature. You can use them together just as it's done in the docs. You can use visibility classes to hide the topbar on mobile or use interchange.

Gazey Geester over 5 years ago

I'd like to put TopBar in the contents area, not in the Offcanvas sidebar. The docs don't seem to show using a TopBar - they just show using a TabBar or, am I missing something? Sorry, I'm new to Foundation and just trying to work out how to do things.

Right now, I want to have a TopBar menu that has standard menu options as well as the Hamburger Menu icon to trigger the Offcanvas sidebar.

Thanks.

Eric Morris over 5 years ago

If I understand correctly, you want to put the button that triggers the offcanvas menu inside a topbar. This should be possible, though not necessarily advisable.

To activate the offcanvas from a top-bar item, just include a link of class.left-off-canvas-toggle (or .right-off-canvas-toggle as necessary).

The problem is that the top-bar changes into a dropdown-style nav on small screens. That would mean that you'd have to hit the topbar hamburger to show the offcanvas trigger when you're on a mobile device, which is pretty kludgy.

The other two options would be to set the topbar breakpoint really low (0rem) so that it never triggers, making your topbar crammed with all the nav items, or else making the hamburger nav on the topbar also trigger the offcanvas, which is confusing if you want to reach a link from the topbar, since you'd have to click the hamburger and close the offcanvas before clicking on your link.

TL;DR: You can, but you probably shouldn't.