Bootstrap Offcanvas Menu Generator

Create Bootstrap offcanvas menus with comprehensive positioning options, icons, colors, and toggle functionality for modern sidebar navigation experiences. This mobile navigation tool supports left, right, top, and bottom positioning with custom menu items, backdrop behavior, and responsive trigger integration. Perfect for mobile navigation, sidebar menus, settings panels, and creating modern off-screen navigation experiences that enhance mobile usability and interface design.

All Position Options Custom Menu Items Backdrop Behavior Responsive Triggers

Preview

Left: <div class="offcanvas offcanvas-start">...</div>

Right: <div class="offcanvas offcanvas-end">...</div>

Bottom: <div class="offcanvas offcanvas-bottom">...</div>

Button Text: Button Icon:

Browse all icons at icons.getbootstrap.com

Button Color: Menu Position: Offcanvas Background Color: Menu Items (1 per line):

Help & Related Tools

Everything you need to know

FAQ Frequently Asked Questions

What's the difference between offcanvas and regular modals?

Offcanvas menus slide in from screen edges and are typically used for navigation or secondary content, while modals appear in the center and focus attention on specific actions. Offcanvas preserves page context better.

Can I choose which side the offcanvas appears from?

Yes, offcanvas menus can slide in from left, right, top, or bottom edges of the screen. Left and right are most common for navigation menus, while top and bottom work well for notifications or tools.

What content can I put in an offcanvas menu?

Offcanvas menus can contain navigation links, forms, user profiles, shopping carts, filters, or any content that benefits from slide-out presentation. They're versatile for many UI patterns.

Can I control the backdrop and scroll behavior?

Yes, you can configure whether the backdrop is visible, whether clicking it closes the menu, and whether the page content can scroll while the offcanvas is open. These settings affect user experience and interaction patterns.

Are offcanvas menus good for mobile navigation?

Excellent! Offcanvas menus are perfect for mobile as they save screen space while providing full navigation access. They're more space-efficient than dropdown menus on small screens.