Hamburger Menu

Bootstrap 5 Hamburger Menu

Responsive Hamburger button menu with Bootstrap 5. Hamburger toggle menu for mobile navigation, icon animations, sidenav, navbar templates & more.

Hamburger menu is a navigation type that serves the purpose of hiding some menu items & showing them on click. It stacks the items on top of each other in a "hamburger" fashion.

Basic example

Simple example of a hamburger menu in a navbar.

Show code

Hamburger in Navbar

Explore advanced navbar options & customization in the Navbar Documentation.

Start

By default this hamburger menu will be displayed on the left side of a navbar.

MDB supports right-to-left so you can easily reverse text direction as well as this display of the navbar icon.

So this elemnt will have the hamburger menu at the start of a navbar - on left or right side depending on the text direction.

Show code

End

By default this hamburger menu will be displayed on the right side of a navbar.

You can easily push an element to the end of its parent by using the .ms-auto class which stands for margin start: auto.

Thanks to this approach this example also supports RTL text direction (so with RTL enabled it will display on the left side).

Show code

Hamburger in Sidenav

Hamburger Button is a common way to toggle sidenav on mobile devices.

You can learn more about the sidebar component in the Side Navigation Documentation.

Start

Simple example of a sidebar hamburger menu with the side navigation element at the start of the viewport (on the left side by default).

Show code

End

Simple example of a sidebar hamburger menu with the side navigation element at the end of the viewport (on the left side by default).

Place the navigation on the other side by setting the right attribute to true.

Show code

Double navigation

Hamburger menu button is a great way to implement a responsive double navigation in your projects.

The side navigation will be hidden on smaller screens and reveal itself after a click on the hamburger button.

View full screen demo
Show code

Hamburger Icons

Examples of icon usage in Bootstrap Hamburger menu.

You will find even more icons in the Icons Documentation.

Custom icons

You can make any icon a hamburger menu toggler.

Show code

Animated icons

Animated hamburger menu icons add dynamism to your design.

Show code