DzinerHub

DzinerHub

Off-canvas Navigation

A menu hidden off‑screen that slides in via icon or gesture.

Off-canvas Navigation

A menu hidden off‑screen that slides in via icon or gesture.

In Web & Mobile Design

What is Off‑canvas Navigation?

Off‑canvas navigation is a pattern where the menu lives off‑screen and is revealed via an icon or edge gesture.

When to use Off‑canvas Navigation?

- To prioritize content on small screens

- To tuck away secondary or infrequently used navigationWhen not to use Off‑canvas Navigation?

- When primary tasks depend on the menu for discoverability

- When visibility and wayfinding are criticalWhat is the anatomy of Off‑canvas Navigation?

- Trigger: hamburger icon or edge gesture

- Overlay and focus trap

- Dismissal area and escape behavior