Bootstrap4 Breadcrumb Navigation Bootstrap4 Navigation

Bootstrap4 Navigation bar

　　 You can use Bootstrap navigation bar components to create responsive navigation titles for your website or application. These responsive navigation bars are initially folded on devices with small viewports (such as mobile phones) but expand when the user clicks the toggle button. However, on medium and large devices such as laptops or desktops, it will remain horizontal as usual.

The navigation bar is generally placed at the top of the page.

We can use the .navbar class to create a standard navigation bar, followed by: .navbar-expand-Use the classes xl|lg|md|sm to create responsive navigation bars (Horizontal layout on large screens, vertical stacking on small screens).

The options on the navigation bar can be used with the <ul> element and add the class. Then add .nav on the <li> element.-item class, use .nav on the <a> element.-link class:

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-light">
　　<ul class="navbar-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 href="#">Link　3</a>
　　　　</li>
　　</ul>
</nav>
<br>
<div class="container-fluid">
　　<h2>Simple navigation bar example</h2>
　　<p>The navigation bar is generally placed at the top of the page.</p>
　　<p>We can use the .navbar class to create a standard navigation bar, followed by: .navbar<-expand-Use the classes xl|lg|md|sm to create responsive navigation bars (horizontal layout on large screens, vertical stacking on small screens).</p>
</div>
</body>
</html>

Test and See ‹/›

Vertical Navigation Bar

By removing the .navbar-expand-xl|lg|md|sm classes to create vertical navigation bars:

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar bg-light">
　　<ul class="navbar-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 href="#">Link　3</a>
　　　　</li>
　　</ul>
</nav>
<br>
<div class="container-fluid">
　　<h2>Vertical Navigation Bar</h2>
　　<p>The navigation bar is usually located at the top of the page.</p>
</div>
</body>
</html>

Test and See ‹/›

Different color navigation bars

You can use the following classes to create different color navigation bars: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light).

Tip: For dark backgrounds, set the text color to light. For light backgrounds, set the text color to dark.

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Different color navigation bars</h2>
　　<p>For dark backgrounds, set the text color to light. For light backgrounds, set the text color to dark.</p>
</div>
<nav class="navbar navbar-expand-sm bg-light navbar-light">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Active</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Disabled</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Active</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Disabled</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Active</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Disabled</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-success navbar-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Active</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Disabled</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-info navbar-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Active</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Disabled</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-warning navbar-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Active</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Disabled</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-danger navbar-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Active</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Disabled</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Active</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Disabled</a>
　　　　</li>
　　</ul>
</nav>
</body>
</html>

Test and See ‹/›

Active and Disabled States: You can add the .active class to the <a> element to highlight the selected option. The .disabled class is used to set the link as non-clickable.

Brand/Logo

.navbar-class "brand" is used to highlight the brand/Logo:

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　<!--　Brand/logo　-->
　　<a class="navbar-brand" href="#">Logo</a>
　　
　　<!--　Links　-->
　　<ul class="navbar-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 href="#">Link　3</a>
　　　　</li>
　　</ul>
</nav>
<div class="container-fluid">
　　<h2>Brand/Logo</h2>
　　<p>.navbar-class "brand" is used to highlight the brand/Logo:/p>
</div>
</body>
</html>

Test and See ‹/›

If using images, you can use .navbar-class "brand" to set the image to adapt to the navigation bar.

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　<!--　Brand/logo　-->
　　<a class="navbar-brand" href="#">
　　　　<img src="https://static.oldtoolbag.com/images/mix/bird.jpg" alt="logo" style="width:40px;">
　　</a>
　　
　　<!--　Links　-->
　　<ul class="navbar-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 href="#">Link　3</a>
　　　　</li>
　　</ul>
</nav>
<div class="container-fluid">
　　<h2>Brand　/　Logo</h2>
　　<p>If using images, you can use the .navbar-class "brand" to set the image to adapt to the navigation bar.</p>
</div>
</body>
</html>

Test and See ‹/›

Collapsible Navigation Bar

Generally, on small screens, we will collapse the navigation bar and display the navigation options by clicking.

To create a collapsible navigation bar, you can add data-toggle="collapse" with data-target="#"thetarget" class. Then wrap the navigation content (links) in the div element with the class set, and the id of the div element matches the button data-The id specified by target：

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
　　<a class="navbar-brand" href="#">Navbar</a>
　　<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
　　　　<span class="navbar-toggler-icon"></span>
　　</button>
　　<div class="collapse navbar-collapse" id="collapsibleNavbar">
　　　　<ul class="navbar-nav">
　　　　　　<li class="nav-item">
　　　　　　　　<a class="nav-link href="#">Link</a>
　　　　　　</li>
　　　　　　<li class="nav-item">
　　　　　　　　<a class="nav-link href="#">Link</a>
　　　　　　</li>
　　　　　　<li class="nav-item">
　　　　　　　　<a class="nav-link href="#">Link</a>
　　　　　　</li>　　　　
　　　　</ul>
　　</div>　　
</nav>
<br>
<div class="container">
　　<h2>Collapse navigation bar</h2>
　　<p>Generally, on small screens, we will collapse the navigation bar and display the navigation options by clicking. </p>
　　<p>Tip: If you delete  .navbar-expand-md class, the navigation link will always be hidden, and the toggle button will always be displayed.</p>
</div>
</body>
</html>

Test and See ‹/›

The navigation bar uses a dropdown menu

The navigation bar can be set with a dropdown menu：

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　<!--　Brand　-->
　　<a class="navbar-brand" href="#">Logo</a>
　　<!--　Links　-->
　　<ul class="navbar-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>
　　　　<!--　Dropdown　-->
　　　　<li class="nav-item dropdown">
　　　　　　<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
　　　　　　　　Dropdown link
　　　　　　</a>
　　　　　　<div class="dropdown-menu">
　　　　　　　　<a class="dropdown-item" href="#">Link　1</a>
　　　　　　　　<a class="dropdown-item" href="#">Link　2</a>
　　　　　　　　<a class="dropdown-item" href="#">Link　3</a>
　　　　　　</div>
　　　　</li>
　　</ul>
</nav>
<br>
　　
<div class="container">
　　<h2>The navigation bar uses a dropdown menu</h2>
　　<p>The navigation bar can be set with a dropdown menu.</p>
</div>
</body>
</html>

Test and See ‹/›

Navigation bar form and button

The navigation bar's form <form> element uses class to align the input box and button：

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　<form class="form-inline">
　　　　<input class="form-control" type="text" placeholder="Search">
　　　　<button class="btn btn-success" type="button">Search</button>
　　</form>
</nav>
<br>
<div class="container">
　　<h2>The navigation bar's form</h2>
　　<p>The navigation bar's form element uses class="form-inline" class to align the input box and button：</p>
</div>
</body>
</html>

Test and See ‹/›

You can also use other input box classes, such as .input-group-addon class is used to add a small label in front of the input box.

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　<form class="form-inline">
　　　　<div class="input-group">
　　　　　　<span class="input"</span>-group-<input type="text" class="form/span>
　　　　　　control" placeholder="Username">-<input type="text" class="form
　　　　</div>　　　　
　　</form>
</nav>
<br>
<div class="container">
　　<h2>Navigation Form</h2>
　　<p>  .input-group-addon class is used to add a small label before the input box.</p>
</div>
</body>
</html>

Test and See ‹/›

Navigation Bar Text

Use .navbar-The text class is used to set non-link text on the navigation bar, ensuring horizontal alignment and matching color and padding.

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　<!--　Links　-->
　　<ul class="navbar-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>
　　</ul>
　　<!--　Navbar Text-->
　　<span class="navbar-text">
　　　　Navbar Text
　　</span>
</nav>
<br>
<div class="container">
　　<h2>Navigation Bar Text</h2>
　　<p>Use .navbar-The text class is used to set non-link text on the navigation bar, ensuring horizontal alignment and matching color and padding.</p>
</div>
</body>
</html>

Test and See ‹/›

Fixed Navigation Bar

The navigation bar can be fixed at the top or bottom.

We use .fixed-The top class is used to implement the fixed navigation bar:

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body style="height:1500px">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
　　<a class="navbar-brand" href="#">Logo</a>
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link</a>
　　　　</li>
　　</ul>
</nav>
<div class="container-fluid" style="margin-top:80px">
　　<h2>Fixed Navigation Bar</h2>
　　<p>The navbar can be fixed at the top or bottom.</p>
　　<h1>Scroll the page to see the effect.</h1>
</div>
</body>
</html>

Test and See ‹/›

.fixed-The bottom class is used to set the navigation bar fixed at the bottom:

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body style="height:1500px">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
　　<a class="navbar-brand" href="#">Logo</a>
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="javascript:void(0)">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="javascript:void(0)">Link</a>
　　　　</li>
　　</ul>
</nav>
<div class="container-fluid">
　　<h2>Fixed navbar at the bottom</h2>
　　<p>The navbar can be fixed at the top or bottom.</p>
　　<h1>Scroll the page to see the effect.</h1>
</div>
</body>
</html>

Test and See ‹/›

Bootstrap4 Breadcrumb Navigation Bootstrap4 Navigation

Bootstrap4 Basic Tutorial

Bootstrap4 Navigation bar

Vertical Navigation Bar

Different color navigation bars

Brand/Logo

Collapsible Navigation Bar

The navigation bar uses a dropdown menu

Navigation bar form and button

Navigation Bar Text

Fixed Navigation Bar