Bootstrap 5 Navbar Nav
Last Updated :
25 Apr, 2024
Bootstrap 5 Navbar Nav simplifies navigation creation by grouping navigation links within a container element with the nav class. Use nav-item for each link and nav-link for styling. Customize with optional classes like “active” for the current page.
Bootstrap 5 Navbar Nav class: There is no specific class for this, we just need to use the toggler classes for responsive styling.
Syntax:
<nav class="navbar navbar-dark bg-dark">
<div>
<a class="navbar-brand" href="#">...</a>
<button class="navbar-toggler" ...>
<span class="navbar-toggler-icon"></span>
</button>
...
</nav>
Example 1: In this example, we will see the nav effect on the dark navbar.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous" />
</head>
<body class="m-3">
<center>
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>Bootstrap 5 Navbar Nav</strong>
</center>
<nav class="navbar
navbar-expand-lg
navbar-dark
bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Geeksforgeeks
</a>
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active">
Courses
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Tutorials
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Jobs
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled"
href="#"
tabindex="-1">
Practice
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Contests
</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Output:
Bootstrap 5 Navbar Nav
Example 2: In this example, we will see the nav effect on the bright navbar.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous" />
</head>
<body class="m-3">
<center>
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>Bootstrap 5 Navbar Nav</strong>
</center>
<nav class="navbar
navbar-expand-lg
navbar-light
bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Geeksforgeeks
</a>
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active">
Courses
</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">
Tutorials
</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">
Jobs
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled"
href="#"
tabindex="-1">
Practice
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Contests
</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Output:
Bootstrap 5 Navbar Nav
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...