Mobile Menus

What is a mobile menu?

A mobile menu is the navigation pattern used on small screens, where a full navbar does not fit. Common variants include the hamburger menu that expands below the header, the off-canvas drawer that slides in from the side, full-screen overlay menus and multi-level menus that drill down into sub-pages. A good mobile menu is quick to open, easy to scan and simple to close.

When to use each mobile menu type

• Dropdown under the header: fine for a few links on simple sites.
• Off-canvas drawer: good for apps and stores with nested sections; the page stays visible behind it.
• Full-screen overlay: suits portfolios and brand sites with few, large links.
• Drill-down menus: work well for deep hierarchies such as large catalogues.

If your site has only three or four main links, consider showing them directly or using a bottom navigation bar instead of hiding them.

Mobile menu best practices

• The hamburger icon must be a <button> with an accessible label like "Open menu" and aria-expanded.
• When the menu opens, move focus into it, trap focus while it is open and restore focus to the toggle when it closes.
• Provide a clear close button and support the Escape key.
• Prevent the page behind from scrolling while a full-screen or off-canvas menu is open.
• Make tap targets at least around 44 pixels tall with enough spacing between them.
• Keep animations short and respect prefers-reduced-motion.

Framework versions

Mobile menu snippets are available for Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. Bootstrap 5 versions use the collapse and offcanvas components, while the Bootstrap 6 alpha uses <dialog>-based off-canvas menus that bring native focus handling and Escape support, plus theme-* colour roles. Tailwind and pure CSS hamburger menus use a small toggle script. Use the framework filter, resize the live preview to phone width, then copy the HTML, CSS and JS from the code tabs or download the snippet.