30 Bootstrap Hamburger Menu Examples

An agglomeration of the top free bootstrap hamburger menu code examples. These carefully curated hamburger menus all utilize the CSS bootstrap framework with each having its own unique design and color scheme making them ideal for both desktop and mobile web design.

hamburger menu multilevel for bootstrap featured

Hover to play
Title:

IOS style sliding menu

Author:

Jason Howmans

Created on:

July 12, 2013

Made with:

HTML, SCSS, JS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A classic iOS style sliding menu created using HTML, SCSS and JS. When you click on the hamburger menu, it expands with a menu item in a gray background giving a decent look to the web page. When you hover over the menu item, the text color changes to pleasant sea green color.

Hover to play
Title:

Lezione bootstrap hamburger menu

Author:

Marcella

Created on:

November 29, 2017

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

Bootstrap 3.3.7

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A Bootstrap hamburger menu for medium screen devices created using HTML, CSS, and Bootstrap. It has a nice sliding effect on the toggle navbar when you click on the hamburger menu.

Hover to play
Title:

Hamburger bootstrap menu

Author:

Andjela

Created on:

June 02, 2020

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A classic, collapsible and horizontal hamburger menu with nice transition effects created using HTML, CSS, and Bootstrap. When you click on the hamburger menu it will expand the menu with a nice sliding effect and also toggles the icon.

Hover to play
Title:

Circular SVG hamburger menu

Author:

Sarah Drasner

Created on:

April 21, 2016

Made with:

HTML, SCSS, JS

Responsive:

No

Dependencies:

Circulus.svg

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A stylish, space efficient circular menu with animation is created using HTMl, CSS, JS. The animation is created using circulus.svg file and greensock. This is suitable for small screen web pages.

Hover to play
Title:

Bootstrap hamburger menu

Author:

Morgan Reno

Created on:

October 18, 2016

Made with:

HTML

Responsive:

Yes

Dependencies:

Bootstrap 3.3.5

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple, light themed hamburger menu with navigation bar created using HTML, CSS, and Bootstrap. It is responsive and on small screen devices, it will toggle the navigation bar with smooth sliding effects.

Hover to play
Title:

Responsive bootstrap hamburger menu

Author:

Kalaiselva

Created on:

September 22, 2020

Made with:

HTML, CSS, jQuery

Responsive:

Yes

Dependencies:

Bootstrap 3.3.5, jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple, right aligned, responsive hamburger menu with the navigation bar created using HTML, CSS, and Bootstrap. When you click on the menu, it will show the menu items with a sliding effect. When you hover over the menu items, text color changes.

Hover to play
Title:

full screen navigation menu

Author:

Brenden Palmer

Created on:

December 29, 2015

Made with:

HTML, CSS(Less)

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A stylish, full page hamburger navigation menu created using HTML and CSS. When you click on menu, it expands to cover the whole page and displays the menu items. When you hover over the menu item, a white animated line appears below the menu item to give a rich look to the element.

Hover to play
Title:

Bootstrap hamburger menu with gradient background

Author:

Nightboard

Created on:

October 22, 2021

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A hamburger menu with gradient background created using HTML, CSS, and Bootstrap. When you click on the menu, it will show the content with a sliding effect. It makes use of three color shades for the gradient background.

Hover to play
Title:

Material Design Hamburger

Author:

Chris Draycott-Wheatley

Created on:

October 23, 2014

Made with:

HTML, CSS, JS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple, hamburger menu aligned on the left side of the web page is created using HTML, CSS and JS. When you click on the menu, menu items are displayed from the left with the pop out effect from the left.

Hover to play
Title:

Multilevel hamburger menu

Author:

Francesco Rombecchi

Created on:

December 05, 2019

Made with:

HTML, CSS, Bootstrap

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant, classic hamburger menu with the random background images on the web page looks attractive and modish. When you click on the menu, it will show vertical navigation bar wih a sliding effect from right. It is created using HTML, CSS and Bootstrap.

Hover to play
Title:

Page tilt effect hamburger menu

Author:

Marco Fugaro

Created on:

August 11, 2015

Made with:

HTML, SCSS, JS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A sophisticated, alluring hamburger menu with the effect simulating a tilting sheet of paper to reveal the navigation menu looks awesome. It is created using HTML, SCSS and JS

Hover to play
Title:

CSS Animated hamburger icon

Author:

Giuseppe Caruso

Created on:

October 11, 2015

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Bootstrap 3.3.5

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant, classic hamburger menu created using HTML and SCSS. When you click on the menu, menu items pop out horizontally with the smooth sliding effect. When you hover over the menu items, its text color changes.

Hover to play
Title:

Animated bootstrap hamburger

Author:

Brian Purkiss

Created on:

February 01, 2016

Made with:

HTML, SCSS, Bootstrap

Responsive:

Yes

Dependencies:

Bootstrap 3.3.5

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple, beautiful, light color scheme hamburger menu created using HTML, CSS, and Bootstrap. It is responsive on the click; it will toggle the hamburger icon with smooth animation and also slide the navigation bar with a smooth transition.

Hover to play
Title:

Classic bootstrap hamburger menu

Author:

John Montanye

Created on:

February 26, 2020

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

Bootstrap 4.1.3

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A classic, sophisticated hamburger menu created using HTML, CSS, and Bootstrap. When you click on the menu, it displays the menu items with the toggle effect on the menu and smooth sliding effect.

Hover to play
Title:

Two hamburger menu

Author:

Gleb Kemarsky

Created on:

August 04, 2016

Made with:

HTML, CSS, Bootstrap

Responsive:

Yes

Dependencies:

Bootstrap 3.3.6

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple navigation bar with two hamburger menus on the right and left side is created using HTML, CSS, and Bootstrap. On click, it will show menu items with nice fade-in effects. When you hover over the menu item, its text color changes.

Hover to play
Title:

Responsive overlay menu

Author:

Mario Loncarek

Created on:

August 13, 2015

Made with:

HTML, CSS, jQuery

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant, responsive flat animated overlay menu created using HTML, CSS and jQuery. There are two menus, classic and hamburger menu with full screen overlay.

Hover to play
Title:

Simple bootstrap hamburger menu

Author:

Jason Nickel

Created on:

March 28, 2016

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

Bootstrap 3.3.1

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple hamburger menu with a light colored scheme is created using HTML, CSS, and Bootstrap. When you click on menu, it will show the menu items with nice sliding effects.

Hover to play
Title:

Animated hamburger menu

Author:

Sava Lazic

Created on:

August 18, 2016

Made with:

HTML, CSS, jQuery

Responsive:

Yes

Dependencies:

Bootstrap 3.3.6, jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant, animated hamburger menu is created using HTML, SCSS, and Bootstrap. When you click on menu, It will list all menu items with a nice sliding effect and also changes the hamburger icon with smooth animation.

Hover to play
Title:

Gooey hamburger menu

Author:

Lucas Bebber

Created on:

October 22, 2015

Made with:

HTML, SCSS

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An attractive, decorous hamburger menu created on the blue background is created using HTML and SCSS. It gives amazing look. When you click on the menu, it displays the menu item icons in semi circular fashion. It also toggles the menu icon.

Hover to play
Title:

Morphing hamburger menu

Author:

Imgonzalves

Created on:

February 10, 2017

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A delightful, morphing hamburger menu suitable for the compact space web page is created using HTML and SCSS. When you click on the menu, it slides down the page by shifting the page content downwards.

Hover to play
Title:

Bootstrap animated mobile hamburger

Author:

Wesley Chitwood

Created on:

July 17, 2017

Made with:

HTML, SCSS, jQuery

Responsive:

Yes

Dependencies:

Bootstrap 3.3.7

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A delightful, purple colored mobile hamburger menu is created using HTML, SCSS, and Bootstrap. When you click on the menu, it will show the actual menu items with smooth sliding effects. It will also toggle the menu icon with the close icon.

Hover to play
Title:

Panel bootstrap hamburger

Author:

ObZen

Created on:

February 02, 2017

Made with:

HTML, CSS, JS

Responsive:

No

Dependencies:

Bootstrap 3.3.5

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple hamburger menu with a light background is created using HTML, CSS, and Bootstrap. When you click on menu, it will show the content with nice fade-in effects and also toggles the icon in hamburger.

Hover to play
Title:

Hamburger icon with morphing menu

Author:

Sergio Andrade

Created on:

September 29, 2020

Made with:

HTML, CSS, jQuery

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A modern, stylish corner hamburger menu created using HTML, CSS, jQuery. When you click on the menu, it slides with the menu item to cover the corner in circular fashion.

Hover to play
Title:

Classic hamburger menu

Author:

Emar

Created on:

August 13, 2021

Made with:

HTML, CSS, jQuery

Responsive:

Yes

Dependencies:

Bootstrap 5.1.0, JQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A classic, black hamburger menu is created using HTML, CSS, and Bootstrap. When you click on the menu, it will toggle the menu with nice sliding effects and also change the icon in a hamburger with smooth animation.

Hover to play
Title:

Gooey hover menu concept

Author:

Michael Leonard

Created on:

March 22, 2016

Made with:

HTML, CSS, jQuery

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An attractive, decorous hamburger menu created with HTML, CSS and jQuery. When you hover the mouse over the menu, it slides to open the menu items. When you hover over the menu item, main menu moves with the current position.

Hover to play
Title:

Pull hamburger menu

Author:

Fabrizio Bianchi

Created on:

December 24, 2014

Made with:

HTML, SCSS, JS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A stylish, attractive hamburger menu suitable for mobile apps is created using HTML, SCSS and JS. When you hold and pull down the icon of hamburger menu, it navigates over the menu items.

Hover to play
Title:

Bootstrap horizontal hamburger menu

Author:

Erick Rodriguez

Created on:

January 23, 2017

Made with:

HTML, CSS, JS

Responsive:

Yes

Dependencies:

Bootstrap 3.3.7

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful, responsive, stylish hamburger menu is created using HTML, CSS, and Bootstrap. When you click on the menu, it will show the menu items with a nice sliding effect.

Hover to play
Title:

Hamburger menu from right

Author:

Asit Das

Created on:

August 02, 2020

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

Bootstrap 4.5.0

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful, classic hamburger menu with a blue background is created using HTML, CSS, and Bootstrap. When you click on the menu, it will show a menu items from the right with nice fade-in and sliding effects. It also has a hover effect for the menu items.

Hover to play
Title:

Dropdown hamburger menu

Author:

Liz

Created on:

July 04, 2017

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

Bootstrap 3.3.6

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A hamburger menu with a dark color scheme created using HTML, CSS, and Bootstrap. When you click on the menu, it will expand the menu with nice sliding effects and also change the hamburger icon with animations.

Hover to play
Title:

Hamburger menu with toggle button

Author:

Geoffrey Crofte

Created on:

June 10, 2015

Made with:

HTML, CSS, JS

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful, hamburger menu created with HTML, CSS and JS. When you click on the menu, it pops out the menu as an callout and toggles the menu icon.