Bootstrap Menu
Navbar with large dropdown template

Free navbar with large dropdown template for your projects, built with the latest Bootstrap, HTML, CSS & JavaScript. MIT Licensed - free for personal & commercial use.

edit & download Live preview
  • License
    MIT License
  • Free for commercial use?
    Yes
  • Bootstrap version
    5.2.3+
  • NPM downloads
    npm
  • GitHub stars
    GitHub Repo stars

Bootstrap navbar with large dropdown


Get 700+ Material components for the latest Bootstrap 5 for free. This component is also available as ready-to-use solution in MDB UI Kit. Learn more about Bootstrap Dropdown here, or download MDB Free version with 700+ components here.

In this sample we are showing dropdown menu with custom width size. This kind of dropdowns are popular on ecommerce web sites.

Steps to create large dropdown menu for navbar
  • We don't need to make all dropdown-menu elements large size. Add your class to that dropdown which you want to make larger. In this case I added dropdown-large
  • We will make large size only for desktops. Create media query like @media all and (min-width: 992px) { ... }
  • Add any size .dropdown-large{min-width:500px;}
  • Don't forget to prevent close when mouse clicks inside the dropdown. Use code e.stopPropagation();. Because by default bootstrap's dropdown-menu closes when you click on content of menu itself
Here are basic code snippets

Back to all examples

Get more free tools & themes

Join the newsletter to receive more free templates - including Instagram, Facebook or Amazon clone templates, as well as multiple free tools & resources.

    By subscribing you agree to receive the newsletter & commercial information from the data administrator StartupFlow s.c. Kijowska 7, Warsaw. Privacy Policy