Off-canvas slides a sidebar (usually navigation) over or beside the main content on small screens. Wrap the page in off-canvas-wrapper, place the menu in div.off-canvas with data-off-canvas, and put page content in off-canvas-content with data-off-canvas-content.
Triggers
Buttons use data-toggle="offCanvasId" to open the panel. Pair with data-close inside the menu for explicit dismiss. Test that focus returns to the trigger when the panel closes.
When to use it
Mobile nav drawers are the classic case—same mental model as Bootstrap offcanvas, but Foundation’s markup names differ. Desktop layouts often show the menu inline and hide off-canvas triggers at large breakpoints.
Self-check
- Which wrapper contains both the panel and main content?
- What attribute marks the sliding panel region?
- How does the open button reference the correct panel?