47 Bootstrap Menus
Collection of free Bootstrap navigation menu code examples: responsive, sidebar, dropdown, fixed, vertical, horizontal, hamburger, etc. Update of May 2020 collection. 23 new items.
Related Articles
Author
Links
Made with
About a code
Bootstrap 5 Sidebar Menu with Toggle Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Bootstrap version: 5.0.0
Author
Links
Made with
About a code
Bootstrap Menu V14
Right align navbar menu template with social media icons and a completely responsive structure. You can easily embed it into your website and perform additional edits to tailor it to your needs.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css, jquery.js, popper.js
Bootstrap version: 4.3.1
Author
Links
Made with
About a code
Bootstrap Menu V18
Present even more content and make navigation more powerful with this free mega menu template design. You can preview it first, hit the download second and put it into action third. Enjoy the process.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css, jquery.js, popper.js
Bootstrap version: 4.3.1
Author
Links
Made with
About a code
Bootstrap Menu V19
Instead of sticking to the traditional navigation positioning on a website, this free left sidebar menu template goes slightly against the grain. It is also fully mobile-friendly, offering an off-canvas menu for a better user experience.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css, jquery.js, popper.js
Bootstrap version: 4.3.1
Author
Links
Made with
About a code
Bootstrap Menu V20
Keep things minimal while at the same time bold with this free full-screen menu overlay template. The navigation goes straight to the point, and you can also add a company logo or leave it out completely.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css, jquery.js, popper.js
Bootstrap version: 4.3.1
Author
Links
Made with
About a code
How to Convert Bootstrap Pills (Tabs) Into a Dropdown Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Bootstrap version: 4.6.0
Author
Links
Made with
About a code
Bootstrap Menu V07
Create excellent website navigability with this beautiful, responsive and free transparent menu template. It also features a top bar with social media icons and multi-level drop-down menu layering.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: icomoon.css, owl.carousel.css, jquery.js, popper.js
Bootstrap version: 4.3.1
Author
Links
Made with
About a code
Bootstrap Menu V05
Create excellent website navigability with this beautiful, responsive and free transparent menu template. It also features a top bar with social media icons and multi-level drop-down menu layering.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: icomoon.css, owl.carousel.css, jquery.js, popper.js
Bootstrap version: 4.3.1
Author
Links
Made with
About a code
Side Menu Responsive Bootstrap
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Bootstrap version: 4.5.2
Author
Links
Made with
About a code
Bootstrap 5 Colorful Navbar with Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Bootstrap version: 5.0.0
Author
Links
Made with
About a code
Cool Bootstrap Navigation Bar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Bootstrap version: 4.1.1
Author
Links
Made with
About a code
Menu Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Bootstrap version: 4.5.0
Author
Links
Made with
About a code
Bootstrap 4 Navigation Bar
Bootstrap 4 navigation bar with brand logo and name.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 4.3.1
Author
Links
Made with
About a code
Bootstrap Sticky Navbar
Create a sticky top navbar using Bootstrap 4 utility classes.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 4.3.1
Author
Links
Made with
About a code
Bootstrap Dropdown Menu Style 96
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: bootsnav.css, jquery.js, bootsnav.js
Bootstrap version: 3.3.0
Author
Links
Made with
About a code
Bootstrap Dropdown Menu Style 83
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: bootsnav.css, jquery.js, bootsnav.js
Bootstrap version: 3.3.0
Author
Links
Made with
About a code
Bootstrap Dropdown Menu Style 75
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: bootsnav.css, jquery.js, bootsnav.js
Bootstrap version: 3.3.0
Author
Links
Made with
About a code
Menu with Awesome Hover
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Bootstrap version: 4.1.3
Author
Links
Made with
About a code
Bootstrap 4 Mega
Bootstrap 4 mega menu navigation bar with icons.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 4.3.1
Author
Links
Made with
About a code
Bootstrap Transparent Navbar
The menu starts off as a transparent header bar. Then, as your website visitor scrolls down, it becomes opaque that will enhance your menu’s accessibility. Additionally, the menu bar is responsive, and the menu items are hidden in a minimal hamburger menu. Bootstrap transparent navbar looks good in both desktop computers and mobile devices.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 4.3.1
Author
Links
Made with
About a code
Bootstrap 4 Navbar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 4.3.1
Author
Links
Made with
About a code
Bootstrap 4 Dropdown Megamenu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Bootstrap version: 4.3.1
Author
Links
Made with
About a code
Bootstrap Menu
Bootstrap menu with smooth border transition.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Bootstrap version: 4.3.1
Author
Links
Made with
About a code
Multi-level Bootstrap Menu
Multi-level Bootstrap menu on hover Bootstrap3.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Bootstrap version: 3.4.0
Author
Links
Made with
About a code
Bootstrap Navbar with Logo
Build a Bootstrap 4 navbar with an image logo.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 4.3.1
Author
Links
Made with
About a code
Bootstrap Vertical Navbar
Build a fixed sidebar using Bootstrap 4 vertical navigation and media objects.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 4.3.1
Author
Links
Made with
About a code
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Bootstrap version: 4.1.3
Author
Links
Made with
About a code
Bootstrap Responsive Hover Navbar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Bootstrap version: 3.3.7
Author
Links
Made with
About a code
Bootstrap Menu Underline Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Bootstrap version: 4.0.0
Author
Links
Made with
About a code
Bootstrap 4 Navbar with Dropdown Animations
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Bootstrap version: 4.0.0
Author
Links
Made with
About a code
Bootstrap Menu for One Page
One page Bootstrap + jQuery smooth scroll effect menu, if clicked menu item change active status and scroll to the section.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Bootstrap version: 3.3.7
Author
Links
Made with
About a code
Bootstrap Menu + Submenu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 3.3.5
Author
Links
Made with
About a code
Bootstrap 4 Mega Dropdown Menu Navbar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Bootstrap version: 4.1.3
Author
Links
Made with
About a code
Minimal Bootstrap Navbar
A minimal Bootstrap navbar.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 3.3.7
Author
Links
Made with
About a code
Draggable Bootstrap Menu
This draggable bootstrap menu overflows the dropdown menus yet shows a background color the same size as the collapsed menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: jquery.js, jquery-ui.js
Bootstrap version: 3.3.7
Author
Links
Made with
About a code
Fixed Navigation Sidebar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: linearicons.js, jquery.js
Bootstrap version: 3.3.6
Author
Links
Made with
About a code
Bootstrap Fullscreen Menu
Here’s an example of using Bootstrap’s modal plugin for site navigation. This will animate your navigation in nicely and is great for portfolio and brochure style websites that don’t require second level links.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Bootstrap version: 3.3.6
Author
Links
Made with
About a code
Responsive Animated Nav
A fully responsive animated navigation menu for Bootstrap literally copy and paste and you’re on your way.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 3.3.1
Author
Links
Made with
About a code
Bootstrap Navbar Toggle Show/Hide
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 2.3.2
Author
Links
Made with
About a code
Header Blue
Landing page header featuring a responsive navbar, beautiful intro text, and a phone mockup for showcasing your products.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 4.1.3
Author
Links
Made with
About a code
Style Header Menu Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 4.1.1
Author
Links
Made with
About a code
Accordian Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 4.0.0
Author
Links
Made with
About a code
Responsive Side Navigation Menu Bar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 4.0.0
Author
Links
Made with
About a code
Side Menu Responsive
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Bootstrap version: 4.0.0
Author
Links
Made with
About a code
Bootstrap Mega Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Bootstrap version: 3.3.0
Author
Links
Made with
About a code
Mega Menu
Mega menu slide down on hover with carousel.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Bootstrap version: 3.3.0
Author
Links
Made with
About a code
Mega Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Angular Bootstrap mega menu is a navigation component which enhance standard navbar features. Extended dropdown contains images and categorized links.
It may contain a smaller version of your sitemap and images.
You can split it into categories and by doing so, enhance the UX of your website.
Examples of Angular Bootstrap mega menu use:
See the following Angular Bootstrap mega menu examples:
In this section you will find informations about required modules and available inputs, outputs, methods and events of mega menu component.
Modules used
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
API Reference for MDB Angular Mega Menu:
Components
MdbNavbar
MdbNavbarBrand
Links
Inputs
MdbNavbar
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
| containerInside | boolean | true | Allow to add container for navbar content | [containerInside]=»false» |
| iconBackground | string | string[]; | — | Allow to change background color of hamburger icon | [iconBackground]=»‘purple'» |
| SideClass | string | — | Allow to add custom classes to navbar | [SideClass]=»‘navbar navbar-expands indigo'» |
Methods
You can get access to the navbar methods from another component. Add template reference variable to your mdb-navbar component in HTML file:
Then in your typescript file use @ViewChild decorator to get access to MdbNavbar methods:
@ViewChild(‘navbar’, < static: true >) navbar: NavbarComponent
| Name | Description | Example |
|---|---|---|
| show | Open navbar (to use on the expandable navbar) | this.navbar.open() |
| hide | Close navbar (to use on the expandable navbar) | this.navbar.close() |
| toggle | Open or close navbar (to use on the expandable navbar) | this.navbar.toggle() |
Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
Write to us
For any technical questions please use Support
You can find licensing details on our license page
Панель навигации
Как это работает
Вот что вам нужно знать, прежде чем начать работу с навигационной панелью:
Бренд
.navbar-brand может применяться к большинству элементов, но якорь работает лучше всего, поскольку для некоторых элементов могут потребоваться служебные классы или пользовательские стили.
Текст
Изображение
Изображение и текст
Навигация
А поскольку мы используем классы для нашей навигации, Вы можете полностью отказаться от подхода на основе списков, если хотите.
Формы
Разместите различные элементы управления и компоненты формы на панели навигации:
Группы ввода тоже работают. Если Ваша панель навигации представляет собой всю форму или в основном форму, Вы можете использовать элемент
В составе этих форм навигационной панели также поддерживаются различные кнопки. Это также отличное напоминание о том, что утилиты вертикального выравнивания можно использовать для выравнивания элементов разного размера.
Текст
При необходимости смешивайте и сочетайте с другими компонентами и утилитами.
Цветовые схемы
Контейнеры
Используйте любой из адаптивных контейнеров, чтобы изменить ширину представления содержимого на панели навигации.
Размещение
Прокрутка
Прокрутка
Отзывчивое поведение
Переключатель
С названием бренда слева и переключателем справа:
С переключателем слева и названием бренда справа:
Внешний контент
Свернутый контент
Переменные
Bootstrap 5 Navbar component
Video tutorial
Basic example
A basic example of the navbar with the most common elements like link, search form, brand, and dropdown. All of them are explained in detail in the supported content section.
How it works
Here’s what you need to know before getting started with the navbar:
And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
Forms
Place various form controls and components within a navbar:
White form for dark theme.
Buttons
Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.
Mix and match with other components and utilities as needed.
Dropdown
Learn more about dropdowns in our dropdown docs.
Breadcrumb
Icons
Choose from hundreds of our icons and simply add them to the navbar.
Badges
Badges can be very useful for presenting counters, for example in the shopping cart.
Notifications
Flags
Use dropdown together with flags to create a language switch.
Avatar
By combining simple image and dropdown you can create an avatar with typical user options.
Content alignment
To align navbar content to the right or left use me-auto or ms-auto classes. For content centering use flexbox utilities.
Left aligned
Right aligned
Centered
Colors
See also our color docs to learn more about colors.
Containers
Use any of the responsive containers to change how wide the content in your navbar is presented.
Placement
Responsive behaviors
Toggler
Navbar (меню)
Документация и примеры для мощного, отзывчивого навигационного заголовка Bootstrap, navbar. Включает поддержку брендинга, навигации и др., Включая поддержку нашего плагина свертывания.
Как это устроено
Вот что вам нужно знать, прежде чем начать работу с навигационной панелью:
Brand
.navbar-brand могут быть применены к большинству элементов, но якорь работает лучше всего, как некоторые элементы могут потребоваться служебные классы или пользовательские стили.
А поскольку мы используем классы для нашей навигации, вы можете полностью отказаться от подхода на основе списков, если хотите.
Формы
Разместите различные элементы управления и компоненты формы на панели навигации:
Группы ввода тоже работают. Если ваша панель навигации представляет собой всю форму или в основном форму, вы можете использовать
В составе этих форм навигационной панели также поддерживаются различные кнопки. Это также отличное напоминание о том, что утилиты вертикального выравнивания можно использовать для выравнивания элементов разного размера.
Текст
При необходимости смешивайте и сочетайте с другими компонентами и утилитами.
Цветовые схемы
Контейнеры
Используйте любой из адаптивных контейнеров, чтобы изменить ширину содержимого на панели навигации.
Размещение
Отзывчивое поведение
Переключатель
С названием бренда слева и переключателем справа:
С переключателем слева и названием бренда справа:
Внешний контент
Иногда вы хотите использовать плагин свертывания, чтобы активировать скрытый контент в другом месте страницы. Потому что наш плагин работает на id и data-target согласования, что это легко сделать!
Свернутый контент
Разработан и построен с любовью к миру, командой Bootstrap и помощью наших участников.
В настоящее время v5.0.0-alpha1. Код под лицензией MIT, документы CC BY 3.0.
