Navbar
The Bootstrap Navbar is a powerful, responsive navigation header that is used for branding, navigation links, and other actions. It’s one of the most versatile and useful components in the Bootstrap framework, often used as the primary means of navigation on a website. The Navbar can be expanded or collapsed depending on the screen size, making it highly suitable for responsive web design.
Key Classes and Components of Bootstrap Navbar
Here’s an overview of the primary classes and components used in Bootstrap Navbars:
- .navbar: The base class for the navbar component.
- .navbar-brand: Used for the title, logo, or brand of the site placed in the navbar.
- .navbar-nav: Wraps the navigation links in the navbar.
- .nav-item and .nav-link: Used for individual items and links within the .navbar-nav.
- .navbar-toggler: The button used to toggle the navbar’s responsive collapse feature.
- .navbar-collapse: Contains the collapsible content in the navbar.
- .collapse and .navbar-collapse: Used together to control the collapsible aspect of the navbar, especially in responsive layouts.
1.Basic Navbar Structure
Objective: Create the basic structure of a responsive navbar.
Steps:
– Begin with a `<nav>` element, applying the `.navbar` class for basic styling.
– Add `.navbar-expand-lg` for a responsive collapsing behavior at the ‘lg’ (large) breakpoint.
– Use `.navbar-light` and `.bg-light` for light-themed styling (alternatively, `.navbar-dark` and `.bg-dark` for dark-themed navbars).
<ul class=”nav”>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link 1</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link 2</a>
</li>
<li class=”nav-item”>
<a class=”nav-link disabled” href=”#”>Disabled Link</a>
</li>
</ul>
2. Adding Navigation Links
Objective: Include navigation links within the navbar.
Steps:
– Inside the `<nav>`, after the `.navbar-brand`, add a button for toggling the navbar on small screens, with classes `.navbar-toggler` and `.navbar-toggler-icon`.
– Create a `<div>` with `.collapse` and `.navbar-collapse` to contain the navigation items.
– Inside this div, add a `<ul>` with `.navbar-nav` for horizontal nav items.
– For individual nav items, use `<li>` with `.nav-item` and include links with `.nav-link`.
Example:
<nav class=”navbar navbar-expand-lg navbar-light bg-light”>
<a class=”navbar-brand” href=”#”>Navbar</a>
<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarNav” aria-controls=”navbarNav” aria-expanded=”false” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarNav”>
<ul class=”navbar-nav”>
<li class=”nav-item active”>
<a class=”nav-link” href=”#”>Home</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Features</a>
</li>
<!– More nav items here –>
</ul>
</div>
</nav>
3. Integrating Dropdown Menus
Objective: Add dropdown menus to the navbar for more complex navigation requirements.
Steps:
– In the `.navbar-nav`, add a `.nav-item` with a nested `.nav-link` that will act as the dropdown toggle. Add `.dropdown-toggle` to this link and set `data-toggle=”dropdown”`.
– Immediately following the toggle link, add a `.dropdown-menu` with `.dropdown-item`s for each dropdown link.
Example:
<li class=”nav-item dropdown”>
<a class=”nav-link dropdown-toggle” href=”#” id=”navbarDropdown” role=”button” data-toggle=”dropdown” aria-haspopup=”true” aria-expanded=”false”>
Dropdown
</a>
<div class=”dropdown-menu” aria-labelledby=”navbarDropdown”>
<a class=”dropdown-item” href=”#”>Action</a>
<a class=”dropdown-item” href=”#”>Another action</a>
<!– More dropdown items –>
</div>
</li>
4. Making the Navbar Responsive
Objective: Ensure the navbar is responsive and adapts to different screen sizes.
Steps:
– The `.navbar-expand-lg` class already sets up the navbar to be responsive, collapsing on small screens.
– The toggler button added earlier will be visible only on small screens, allowing users to expand and collapse the navbar items.
By following these steps, you can create a versatile and responsive Bootstrap navbar suited for various applications, from simple websites to complex web applications. The navbar can easily be customized further with additional styles, links, or components as needed.
Example: Basic Bootstrap Navbar
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Bootstrap Navbar Example</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<nav class=”navbar navbar-expand-lg navbar-light bg-light”>
<a class=”navbar-brand” href=”#”>Navbar</a>
<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarNav” aria-controls=”navbarNav” aria-expanded=”false” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarNav”>
<ul class=”navbar-nav”>
<li class=”nav-item active”>
<a class=”nav-link” href=”#”>Home <span class=”sr-only”>(current)</span></a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Features</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Pricing</a>
</li>
</ul>
</div>
</nav>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js”></script>
</body>
</html>
Explanation
- The navbar starts with the <nav> tag using the .navbar, .navbar-expand-lg, and .navbar-light classes. .navbar-expand-lg indicates that the navbar items will be collapsed into a menu on smaller screens (less than large, or lg).
- The .navbar-brand represents the brand or title of the website and is typically used for the logo or name.
- The .navbar-toggler is used to add a button that toggles the visibility of the menu items on smaller screens. The data-toggle and data-target attributes link it to the collapsible part of the navbar.
- .navbar-collapse wraps the navigational structure, which is made up of .navbar-nav, .nav-item, and .nav-link.
- JavaScript includes for Bootstrap, Popper.js, and jQuery enable the interactive features of the navbar, such as the collapsible functionality.
This example demonstrates a basic yet functional Bootstrap navbar suitable for a wide range of websites. The navbar is responsive, ensuring it works well on devices of all sizes, from mobile phones to desktops.
YouTube Reference :
A Bootstrap navbar is a responsive, horizontal navigation bar that adapts to different screen sizes and includes support for dropdown menus.
Yes, this Bootstrap training is completely free. You can access all tutorials and learn Bootstrap at your own pace without any charges.
Use the .navbar class along with .navbar-expand-lg to create a responsive navbar that adjusts to various screen sizes.
Examples include fixed top navbars, sticky navbars, and navbars with dropdown menus. Check our examples section for code snippets.
The navbar-toggler class is used to create a toggle button for expanding and collapsing the navbar on smaller screens.
Use the .sticky-top class to make the navbar stick to the top of the page while scrolling.
A static navbar remains within the page flow, while a fixed navbar stays in a fixed position relative to the viewport.
Yes, our step-by-step Bootstrap navbar tutorial is available in Hindi.
Common issues include improper class usage, missing JavaScript files, and dropdown menus not functioning.
Yes, Bootstrap navbars are responsive by default and include a toggleable menu for mobile devices.
