Bootstrap Menu
A menu is the list of links used to navigate between different pages or sections of the web page. There are different types of websites menu.
- Classic navigation menu: This is the most widely used menu placed on the website's header. It is typically a horizontal list.
- Dropdown menu: A menu in which additional links opens when you click on the menu bar. This is suitable for websites with lots of content.
- Side menu: A menu list usually found on the left or right side of the webpage.
- Hamburger menu: In this type of menu there is an icon made of three horizontal stripes. It opens up the menu when it is clicked. It is generally found in mobile apps.
Creating Menu Using Bootstrap
For creating a menu in bootstrap, a navbar is used. Here is the list of classes used for creating the menu.
- Add .navbar, .navbar-default with navbar class. For responsive sites add .navbar-expand-{xs,sm,md,lg,xl} along with .navbar depending on screen size.
- Add a header .navbar-header with <div> class.
- Add a .navbar-brand with <a> tag
- For list of menus add .navbar or nav navbar-nav in <ul> tag.
Example: Creating navigation menu/ classical menu
Here we have created a simple classical menu bar. It is placed horizontally to the header of the webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap Navbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-info">
<div class ="container-fluid">
<div class=" navbar navbar-header">
<a class="navbar-brand" href="#">studytonight</a>
</div>
<ul class ="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Tests</a></li>
<li><a href="#">About us</a></li>
</ul>
</div>
</nav>
</body>
</html>
Output:
Here is the output of the above program.
Bootstrap Dropdown Menu
- To create a dropdown menu, use the .dropdown class.
- To open the dropdown menu, use a link or button with a class of .dropdown-toggle and the data-toggle="dropdown".
- To create an arrow icon use .caret class.
- For adding items to the menu use .dropdown-menu class and add items under <ul>.
Example: Creating dropdown menu
In the program below, the horizontal menu has been updated to the dropdown menu. Add .dropdown class to the menu item and add subitems using <ul> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-success">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Studytonight</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Study Material</a></li>
<li><a href="#">Courser</a></li>
<li><a href="#">Career</a></li>
</ul>
</li>
<li><a href="#"></a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</nav>
</body>
</html>
Output:
Here is the output of the above program.
Bootstrap Side Menu
Unlike the horizontal menu which appears at the header of the web page, the side menu appears at either side of the web page. The side menu can be created using bootstrap.
- For creating side menu use .id="sidebar" within <nav> class.
- Use .sidebar-header to add headings to the side menu.
- <ul> attribute is used to add a list of items to the side menu bar.
Example: Creating a side menu using bootstrap
Add the above attribute to create a side menu. Here we have used the .wrapper class to wrap the side menu. The wrapper and sidebar are styled with CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.wrapper {
display: flex;
width: 100%;
height: 50%;
}
#sidebar {
width: 200px;
position: fixed;
top: 20;
left: 50;
height: 50%;
z-index: 999;
background: #D3D3D3;
color: white;
transition: all 0.3s;
}
</style>
</head>
<body>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3 class="text-center">content</h3>
</div>
<ul class="list-unstyled components text-center ">
<li class="active ">
<a href="#"> Study material</a>
<li>
<a href="#">Courses</a>
</li>
<li>
<a href="#">About me</a>
</li>
</ul>
</nav>
</body>
</html>
Output:
Bootstrap Hamburger Menu
This type of menu generally consists of three stripes icon. The menu list appears when the icon is clicked. It is generally found in small screen devices like a mobile phone.
Example: Creating a Hamburger menu
For creating a hamburger menu a <button> tag is used. The button is embedded with the Font Awesome bar icon. Menu items are added within <ul> attribute. For a larger screen, it appears as a horizontal menu bar. For the small screen, we can see it as a hamburger menu. So, reduce the screen size to see the effect.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-light bg-success">
<div class="container">
<a class="navbar-brand " href="#">studytonight</a>
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="nav navbar-nav ">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Tests</a></li>
<li><a href="#">About us</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Output:
Here is the output of the above program.
Conclusion
So here we learned to design different types of menu bars. Bootstrap provides an easy and fast alternative to design a menu bar. No more hassle to write that long CSS code. Combine your website with a horizontal menu bar, for smaller screens use a hamburger menubar, if you have a huge amount of content, use the dropdown menu bar, and use the sidebar for blogs.
