Intro
The examples that follow demonstrates the library behaviour using various combinations
of .navbar-expand-(sm|md|lg) breakpoints with.navbar
and .navbar-collapse themes, and .bg-(dark|light|primary)
navbar backgrounds.
All the examples need to import, after the bootstrap css and js libraries, two basic
library assets: pine3ree-bs-navbar.css and pine3ree.bs.navbar.js
or their minified versions.
The first example uses a custom "flat" theme, provided by the accordingly named
asset (pine3ree-bs-navbar.flat.css).
The stylesheets provided for the examples are meant just as starting points
flat variants
Custom theme with flat-squared dropdown menus
<!-- css files: -->
<link href="url/to/css/pine3ree-bs-navbar(.min).css" rel="stylesheet">
<link href="url/to/css/pine3ree-bs-navbar.flat(.min).css" rel="stylesheet">
<navbar> attributes:
class="navbar-expand-md p3-bs-navbar-flat" data-bs-theme="dark"
<navbar-collapse> attributes:
data-bs-theme="light"
<nav
id="navbar-01"
class="navbar navbar-expand-md p3-bs-navbar-flat navbar-example"
data-bs-theme="dark"
>
<div class="container-fluid">
<a class="navbar-brand" href="#">NAVBAR</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbar-nav-wrapper-01"
aria-controls="navbar-01"
aria-expanded="false"
aria-label="Toggle navbar-01"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
id="navbar-nav-wrapper-01"
class="collapse navbar-collapse mt-3 mt-md-0"
data-bs-theme="light"
>
<ul class="navbar-nav me-auto mb-0">
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-start">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 5
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 6
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 7
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 8
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Stop here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Another link</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-0">
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 5
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 6
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 7
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 8
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Stop here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
default variants
Using the default bootstrap dropdown styles and using combinations of '.navbar' and '.navbar-collapse' dark/light theme
<!-- css files: -->
<link href="url/to/css/pine3ree-bs-navbar(.min).css" rel="stylesheet">
<navbar> attributes:
class="navbar-expand-md bg-dark" data-bs-theme="dark"
<navbar-collapse> attributes:
data-bs-theme="light"
<nav
id="navbar-02"
class="navbar navbar-expand-md bg-dark navbar-example"
data-bs-theme="dark"
>
<div class="container-fluid">
<a class="navbar-brand" href="#">NAVBAR</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbar-nav-wrapper-02"
aria-controls="navbar-02"
aria-expanded="false"
aria-label="Toggle navbar-02"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
id="navbar-nav-wrapper-02"
class="collapse navbar-collapse mt-3 mt-md-0"
data-bs-theme="light"
>
<ul class="navbar-nav me-auto mb-0">
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-start">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 5
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 6
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 7
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 8
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Stop here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Another link</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-0">
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 5
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 6
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 7
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 8
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Stop here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- css files: -->
<link href="url/to/css/pine3ree-bs-navbar(.min).css" rel="stylesheet">
<navbar> attributes:
class="navbar-expand-md bg-dark" data-bs-theme="dark"
<navbar-collapse> attributes:
data-bs-theme="dark"
<nav
id="navbar-03"
class="navbar navbar-expand-md bg-dark navbar-example"
data-bs-theme="dark"
>
<div class="container-fluid">
<a class="navbar-brand" href="#">NAVBAR</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbar-nav-wrapper-03"
aria-controls="navbar-03"
aria-expanded="false"
aria-label="Toggle navbar-03"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
id="navbar-nav-wrapper-03"
class="collapse navbar-collapse mt-3 mt-md-0"
data-bs-theme="dark"
>
<ul class="navbar-nav me-auto mb-0">
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-start">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 5
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 6
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 7
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 8
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Stop here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Another link</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-0">
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 5
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 6
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 7
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 8
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Stop here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- css files: -->
<link href="url/to/css/pine3ree-bs-navbar(.min).css" rel="stylesheet">
<navbar> attributes:
class="navbar-expand-md bg-light" data-bs-theme="light"
<navbar-collapse> attributes:
data-bs-theme="light"
<nav
id="navbar-04"
class="navbar navbar-expand-md bg-light navbar-example"
data-bs-theme="light"
>
<div class="container-fluid">
<a class="navbar-brand" href="#">NAVBAR</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbar-nav-wrapper-04"
aria-controls="navbar-04"
aria-expanded="false"
aria-label="Toggle navbar-04"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
id="navbar-nav-wrapper-04"
class="collapse navbar-collapse mt-3 mt-md-0"
data-bs-theme="light"
>
<ul class="navbar-nav me-auto mb-0">
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-start">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 5
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 6
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 7
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 8
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Stop here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Another link</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-0">
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 5
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 6
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 7
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 8
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Stop here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- css files: -->
<link href="url/to/css/pine3ree-bs-navbar(.min).css" rel="stylesheet">
<navbar> attributes:
class="navbar-expand-md bg-light" data-bs-theme="light"
<navbar-collapse> attributes:
data-bs-theme="dark"
<nav
id="navbar-05"
class="navbar navbar-expand-md bg-light navbar-example"
data-bs-theme="light"
>
<div class="container-fluid">
<a class="navbar-brand" href="#">NAVBAR</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbar-nav-wrapper-05"
aria-controls="navbar-05"
aria-expanded="false"
aria-label="Toggle navbar-05"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
id="navbar-nav-wrapper-05"
class="collapse navbar-collapse mt-3 mt-md-0"
data-bs-theme="dark"
>
<ul class="navbar-nav me-auto mb-0">
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-start">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 5
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 6
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 7
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 8
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Stop here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Another link</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-0">
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 5
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 6
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 7
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 8
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Stop here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
inherit variants
Same as the default variant but with collapsed navigation menus using the navbar bg-color
<!-- css files: -->
<link href="url/to/css/pine3ree-bs-navbar(.min).css" rel="stylesheet">
<link href="url/to/css/pine3ree-bs-navbar.inherit(.min).css" rel="stylesheet">
<navbar> attributes:
class="navbar-expand-md bg-dark p3-bs-navbar-inherit" data-bs-theme="dark"
<navbar-collapse> attributes:
data-bs-theme="light"
<nav
id="navbar-06"
class="navbar navbar-expand-md bg-dark p3-bs-navbar-inherit navbar-example"
data-bs-theme="dark"
>
<div class="container-fluid">
<a class="navbar-brand" href="#">NAVBAR</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbar-nav-wrapper-06"
aria-controls="navbar-06"
aria-expanded="false"
aria-label="Toggle navbar-06"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
id="navbar-nav-wrapper-06"
class="collapse navbar-collapse mt-3 mt-md-0"
data-bs-theme="light"
>
<ul class="navbar-nav me-auto mb-0">
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-start">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 5
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 6
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 7
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 8
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Stop here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Another link</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-0">
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 5
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 6
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 7
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 8
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Stop here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- css files: -->
<link href="url/to/css/pine3ree-bs-navbar(.min).css" rel="stylesheet">
<link href="url/to/css/pine3ree-bs-navbar.inherit(.min).css" rel="stylesheet">
<navbar> attributes:
class="navbar-expand-md bg-dark p3-bs-navbar-inherit" data-bs-theme="dark"
<navbar-collapse> attributes:
data-bs-theme="dark"
<nav
id="navbar-07"
class="navbar navbar-expand-md bg-dark p3-bs-navbar-inherit navbar-example"
data-bs-theme="dark"
>
<div class="container-fluid">
<a class="navbar-brand" href="#">NAVBAR</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbar-nav-wrapper-07"
aria-controls="navbar-07"
aria-expanded="false"
aria-label="Toggle navbar-07"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
id="navbar-nav-wrapper-07"
class="collapse navbar-collapse mt-3 mt-md-0"
data-bs-theme="dark"
>
<ul class="navbar-nav me-auto mb-0">
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-start">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 5
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 6
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 7
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 8
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Stop here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Another link</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-0">
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 5
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 6
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 7
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 8
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Stop here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- css files: -->
<link href="url/to/css/pine3ree-bs-navbar(.min).css" rel="stylesheet">
<link href="url/to/css/pine3ree-bs-navbar.inherit(.min).css" rel="stylesheet">
<navbar> attributes:
class="navbar-expand-md bg-light p3-bs-navbar-inherit" data-bs-theme="light"
<navbar-collapse> attributes:
data-bs-theme="light"
<nav
id="navbar-08"
class="navbar navbar-expand-md bg-light p3-bs-navbar-inherit navbar-example"
data-bs-theme="light"
>
<div class="container-fluid">
<a class="navbar-brand" href="#">NAVBAR</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbar-nav-wrapper-08"
aria-controls="navbar-08"
aria-expanded="false"
aria-label="Toggle navbar-08"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
id="navbar-nav-wrapper-08"
class="collapse navbar-collapse mt-3 mt-md-0"
data-bs-theme="light"
>
<ul class="navbar-nav me-auto mb-0">
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-start">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 5
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 6
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 7
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 8
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Stop here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Another link</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-0">
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 5
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 6
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 7
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 8
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Stop here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- css files: -->
<link href="url/to/css/pine3ree-bs-navbar(.min).css" rel="stylesheet">
<link href="url/to/css/pine3ree-bs-navbar.inherit(.min).css" rel="stylesheet">
<navbar> attributes:
class="navbar-expand-md bg-light p3-bs-navbar-inherit" data-bs-theme="light"
<navbar-collapse> attributes:
data-bs-theme="dark"
<nav
id="navbar-09"
class="navbar navbar-expand-md bg-light p3-bs-navbar-inherit navbar-example"
data-bs-theme="light"
>
<div class="container-fluid">
<a class="navbar-brand" href="#">NAVBAR</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbar-nav-wrapper-09"
aria-controls="navbar-09"
aria-expanded="false"
aria-label="Toggle navbar-09"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
id="navbar-nav-wrapper-09"
class="collapse navbar-collapse mt-3 mt-md-0"
data-bs-theme="dark"
>
<ul class="navbar-nav me-auto mb-0">
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-start">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 5
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 6
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 7
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 8
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Stop here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Another link</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-0">
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 5
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 6
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 7
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 8
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Stop here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
blend variants
Same as the default variant but with collapsed navigation menus using blending bg-color (lighter or darker) values at different depths
<!-- css files: -->
<link href="url/to/css/pine3ree-bs-navbar(.min).css" rel="stylesheet">
<link href="url/to/css/pine3ree-bs-navbar.blend(.min).css" rel="stylesheet">
<navbar> attributes:
class="navbar-expand-md bg-dark p3-bs-navbar-blend" data-bs-theme="dark"
<navbar-collapse> attributes:
data-bs-theme="light"
<nav
id="navbar-10"
class="navbar navbar-expand-md bg-dark p3-bs-navbar-blend navbar-example"
data-bs-theme="dark"
>
<div class="container-fluid">
<a class="navbar-brand" href="#">NAVBAR</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbar-nav-wrapper-10"
aria-controls="navbar-10"
aria-expanded="false"
aria-label="Toggle navbar-10"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
id="navbar-nav-wrapper-10"
class="collapse navbar-collapse mt-3 mt-md-0"
data-bs-theme="light"
>
<ul class="navbar-nav me-auto mb-0">
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-start">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 5
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 6
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 7
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 8
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Stop here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Another link</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-0">
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 5
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 6
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 7
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 8
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Stop here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- css files: -->
<link href="url/to/css/pine3ree-bs-navbar(.min).css" rel="stylesheet">
<link href="url/to/css/pine3ree-bs-navbar.blend(.min).css" rel="stylesheet">
<navbar> attributes:
class="navbar-expand-md bg-dark p3-bs-navbar-blend" data-bs-theme="dark"
<navbar-collapse> attributes:
data-bs-theme="dark"
<nav
id="navbar-11"
class="navbar navbar-expand-md bg-dark p3-bs-navbar-blend navbar-example"
data-bs-theme="dark"
>
<div class="container-fluid">
<a class="navbar-brand" href="#">NAVBAR</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbar-nav-wrapper-11"
aria-controls="navbar-11"
aria-expanded="false"
aria-label="Toggle navbar-11"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
id="navbar-nav-wrapper-11"
class="collapse navbar-collapse mt-3 mt-md-0"
data-bs-theme="dark"
>
<ul class="navbar-nav me-auto mb-0">
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-start">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 5
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 6
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 7
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 8
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Stop here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Another link</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-0">
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 5
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 6
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 7
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 8
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Stop here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- css files: -->
<link href="url/to/css/pine3ree-bs-navbar(.min).css" rel="stylesheet">
<link href="url/to/css/pine3ree-bs-navbar.blend(.min).css" rel="stylesheet">
<navbar> attributes:
class="navbar-expand-md bg-light p3-bs-navbar-blend" data-bs-theme="light"
<navbar-collapse> attributes:
data-bs-theme="light"
<nav
id="navbar-12"
class="navbar navbar-expand-md bg-light p3-bs-navbar-blend navbar-example"
data-bs-theme="light"
>
<div class="container-fluid">
<a class="navbar-brand" href="#">NAVBAR</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbar-nav-wrapper-12"
aria-controls="navbar-12"
aria-expanded="false"
aria-label="Toggle navbar-12"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
id="navbar-nav-wrapper-12"
class="collapse navbar-collapse mt-3 mt-md-0"
data-bs-theme="light"
>
<ul class="navbar-nav me-auto mb-0">
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-start">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 5
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 6
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 7
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 8
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Stop here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Another link</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-0">
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 5
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 6
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 7
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 8
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Stop here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- css files: -->
<link href="url/to/css/pine3ree-bs-navbar(.min).css" rel="stylesheet">
<link href="url/to/css/pine3ree-bs-navbar.blend(.min).css" rel="stylesheet">
<navbar> attributes:
class="navbar-expand-md bg-light p3-bs-navbar-blend" data-bs-theme="light"
<navbar-collapse> attributes:
data-bs-theme="dark"
<nav
id="navbar-13"
class="navbar navbar-expand-md bg-light p3-bs-navbar-blend navbar-example"
data-bs-theme="light"
>
<div class="container-fluid">
<a class="navbar-brand" href="#">NAVBAR</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbar-nav-wrapper-13"
aria-controls="navbar-13"
aria-expanded="false"
aria-label="Toggle navbar-13"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
id="navbar-nav-wrapper-13"
class="collapse navbar-collapse mt-3 mt-md-0"
data-bs-theme="dark"
>
<ul class="navbar-nav me-auto mb-0">
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-start">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 5
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 6
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 7
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 8
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Stop here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Another link</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-0">
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 5
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 6
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 7
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-item dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown 8
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Stop here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>