Menu
Bootstrap 5 Navs
Nav Menus
If you want to create a simple horizontal menu, add the .nav class to a <ul> element, followed by .nav-item for each <li> and add the .nav-link class to their links:
Example
<!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 href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Nav</h2>
<p>Basic horizontal menu:</p>
<ul>
<li>
<a href=”#”>Link</a>
</li>
<li>
<a href=”#”>Link</a>
</li>
<li>
<a href=”#”>Link</a>
</li>
<li>
<a href=”#”>Disabled</a>
</li>
</ul>
</div>
</body>
</html>
Aligned Nav
Add the .justify-content-center class to center the nav, and the .justify-content-end class to right-align the nav.
Example
<!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 href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Nav</h2>
<p>Left-aligned nav (default):</p>
<ul>
<li>
<a href=”#”>Link</a>
</li>
<li>
<a href=”#”>Link</a>
</li>
<li>
<a href=”#”>Link</a>
</li>
<li>
<a href=”#”>Disabled</a>
</li>
</ul>
<p>Centered nav:</p>
<ul>
<li>
<a href=”#”>Link</a>
</li>
<li>
<a href=”#”>Link</a>
</li>
<li>
<a href=”#”>Link</a>
</li>
<li>
<a href=”#”>Disabled</a>
</li>
</ul>
<p>Right-aligned nav:</p>
<ul>
<li>
<a href=”#”>Link</a>
</li>
<li>
<a href=”#”>Link</a>
</li>
<li>
<a href=”#”>Link</a>
</li>
<li>
<a href=”#”>Disabled</a>
</li>
</ul>
</div>
</body>
</html>
Vertical Nav
Add the .flex-column class to create a vertical nav:
Example
<!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 href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Vertical Nav</h2>
<p>Use the .flex-column class to create a vertical nav:</p>
<ul>
<li>
<a href=”#”>Link</a>
</li>
<li>
<a href=”#”>Link</a>
</li>
<li>
<a href=”#”>Link</a>
</li>
<li>
<a href=”#”>Disabled</a>
</li>
</ul>
</div>
</body>
</html>
Tabs
Turn the nav menu into navigation tabs with the .nav-tabs class. Add the .active class to the active/current link. If you want the tabs to be togglable, see the last example on this page.
Example
<!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 href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Navigation Tabs</h2>
<p>Turn the nav menu into navigation tabs with the .nav nav-tabs class. Add the active class to the active/current link. If you want the tabs to be togglable, see the last example on the tutorial page.</p>
<ul>
<li>
<a href=”#”>Active</a>
</li>
<li>
<a href=”#”>Link</a>
</li>
<li>
<a href=”#”>Link</a>
</li>
<li>
<a href=”#”>Disabled</a>
</li>
</ul>
</div>
</body>
</html>
Pills
Turn the nav menu into navigation pills with the .nav-pills class. If you want the pills to be togglable, see the last example on this page.
Example
<!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 href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Navigation Pills</h2>
<p>Turn the nav menu into navigation pills with the .nav nav-pills class:</p>
<ul>
<li>
<a href=”#”>Active</a>
</li>
<li>
<a href=”#”>Link</a>
</li>
<li>
<a href=”#”>Link</a>
</li>
<li>
<a href=”#”>Disabled</a>
</li>
</ul>
</div>
</body>
</html>
Justified Tabs/pills
Justify the tabs/pills with the .nav-justified class (equal width):
Example
<!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 href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Justified Tabs/Pills</h2>
<p>To justify tabs/pills (equal width), use the .nav-justified class:</p>
<ul>
<li>
<a href=”#”>Active</a>
</li>
<li>
<a href=”#”>Link</a>
</li>
<li>
<a href=”#”>Link</a>
</li>
<li>
<a href=”#”>Disabled</a>
</li>
</ul><br>
<p>Justified tabs:</p>
<ul>
<li>
<a href=”#”>Active</a>
</li>
<li>
<a href=”#”>Link</a>
</li>
<li>
<a href=”#”>Link</a>
</li>
<li>
<a href=”#”>Disabled</a>
</li>
</ul>
</div>
</body>
</html>
Pills with Dropdown
Example
<!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 href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Pills with Dropdown</h2>
<ul>
<li>
<a href=”#”>Active</a>
</li>
<li>
<a data-bs-toggle=”dropdown” href=”#”>Dropdown</a>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
</ul>
</li>
<li>
<a href=”#”>Link</a>
</li>
<li>
<a href=”#”>Disabled</a>
</li>
</ul>
</div>
</body>
</html>
Tabs with Dropdown
Example
<!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 href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Tabs with Dropdown</h2>
<ul>
<li>
<a href=”#”>Active</a>
</li>
<li>
<a data-bs-toggle=”dropdown” href=”#”>Dropdown</a>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
</ul>
</li>
<li>
<a href=”#”>Link</a>
</li>
<li>
<a href=”#”>Disabled</a>
</li>
</ul>
</div>
</body>
</html>
Toggleable / Dynamic Tabs
To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class .tab-content.
If you want the tabs to fade in and out when clicking on them, add the .fade class to .tab-pane:
Example
<!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 href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Toggleable Tabs</h2>
<br>
<!– Nav tabs –>
<ul role=”tablist”>
<li>
<a data-bs-toggle=”tab” href=”#home”>Home</a>
</li>
<li>
<a data-bs-toggle=”tab” href=”#menu1″>Menu 1</a>
</li>
<li>
<a data-bs-toggle=”tab” href=”#menu2″>Menu 2</a>
</li>
</ul>
<!– Tab panes –>
<div>
<div id=”home”><br>
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id=”menu1″><br>
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id=”menu2″><br>
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div>
</body>
</html>
Toggleable / Dynamic Pills
The same code applies to pills; only change the data-toggle attribute to data-toggle="pill":
Example
<!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 href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Toggleable Pills</h2>
<br>
<!– Nav pills –>
<ul role=”tablist”>
<li>
<a data-bs-toggle=”pill” href=”#home”>Home</a>
</li>
<li>
<a data-bs-toggle=”pill” href=”#menu1″>Menu 1</a>
</li>
<li>
<a data-bs-toggle=”pill” href=”#menu2″>Menu 2</a>
</li>
</ul>
<!– Tab panes –>
<div>
<div id=”home”><br>
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id=”menu1″><br>
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id=”menu2″><br>
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div>
</body>
</html>