Menu using Bootstrap

1. Add bootstrap link and script in your HTML file

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
  7. integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
  8. <title>NavBar Demo</title>
  9. </head>
  10. <body>
  11. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
  12. integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
  13. crossorigin="anonymous"></script>
  14. </body>
  15. </html>

You can copy the Starter template from the official bootstrap website.

Step:2

  1. <nav class="navbar navbar-expand-lg bg-light">
  2. <div class="container-fluid">
  3. <a class="navbar-brand">Navbar</a>
  4. </div>
  5. </nav>

Add a nav tag in the body tag and give bootstrap class navbar navbar-expand-lg bg-light. Navbars require wrapping navbar with navbar-expand{-sm|-md|-lg|-xl|-xxl} for responsive collapsing.    bg-light will add light background colour to the navbar. Inside nav add a div tag with class  container-fluid. container-fluidwill take the full width of the viewport. Now add a tag inside the div tag a give it class  navbar-brandnavbar-brandis for your company or brand name. 



Step: 3

  1. <div class="collapse navbar-collapse">
  2. <ul class="navbar-nav me-auto mb-2 justify-content-end w-100 ">
  3. <li class="nav-item ">
  4. <a class="nav-link">Home</a>
  5. </li>
  6. <li class="nav-item ">
  7. <a class="nav-link">Blogs</a>
  8. </li>
  9. <li class="nav-item dropdown">
  10. <a class="nav-link">Dropdown </a>
  11. </li>
  12. <li class="nav-item">
  13. <a class="nav-link">Help</a>
  14. </li>
  15. </ul>
  16. </div>

Add a div tag in container-fluid div after a tag with class collapse navbar-collapse .This will make its items collapse when the screen size is less than 992px. Add ul tag (unordered list) inside this div and give class navbar-nav me-auto mb-2 justify-content-end w-100navbar-nav is for the full height of parent div,   me-auto mb-2 is for margin from right and bottom,  w-100 for full width and justify-content-end  is to align items to end horizontally.

Now add list items inside ul tag. Add as many li tags list tags as you required for your project and give class to each. Add a tag in li tags with class  nav-link  and at last give item names inside a tag.

Step: 4  Add Dropdown Menu

  1. <a class="nav-link dropdown-toggle" href="#" id="navBarDropdown" role="button" data-bs-toggle="dropdown"
  2. aria-expanded="false">Dropdown</a>
  3. <ul class="dropdown-menu" aria-labelledby="navBarDropdown">
  4. <li>
  5. <a class="dropdown-item">Dropdown 1</a>
  6. </li>
  7. <li >
  8. <a class="dropdown-item">Dropdown 2</a>
  9. </li>
  10. <li>
  11. <a class="dropdown-item">Dropdown 3</a>
  12. </li>
  13. </ul>

Add this code inside a li tag. First, add a tag give it class  nav-link dropdown-toggle.  Also give it an id, role, data-bs-toggle and aria-expanded. These are used by bootstrap dropdown Javascript plugin to make dropdown interactive. Now add ul tag inside li tag with class dropdown-menu  and aria-labelledby attribute with the same value as given to the id attribute of the a tag. This is for Javascript Plugin used by bootstrap. Add li tags in ul tag with a tag. Give a class name dropdown-item to a tag and add a text element inside it.

 Now if you click on the Dropdown list, the dropdown menu will show up.



Click on banner below to Learn: PHP with Laravel for beginners - Become a Master in Laravel

About Sachin Kumar

I am Sachin Kumar. I am a freelancer who works in front-end and Flutter. Here at flowkl.com, I write about CSS animations and beautiful UI & UX in Flutter. You can contact me at sachin@flowkl.com

Related Articles

With the expanding market of mobile apps, the developers are struggling to maintain the code bases for Native apps. M...
5 Elite and Imperative Hybrid App Frameworks
Django is a great framework in python. But all of the hosting do not provide django hosting in their shared or free h...
Cheap Django Hosting
Laravel provides blade template. Blade files are similar to php files and cover all features of php files. In additio...
Blade Template in Laravel 7

Full-Stack Web Development with React

Best Udemy Courses

Top Posts

Recent Posts

The Complete Web Developer Course - Build 25 Websites

Subscribe

Subscribe now and get weekly updates directly in your inbox!

Any Course on Udemy in $6 (INR 455)

Development Category (English)300x250

PHP with Laravel for beginners - Become a Master in Laravel