A Django Navbar is a navigation header that is placed at the top of the page. It can extend or collapse, depending on the screen size. A standard navigation bar is created with <nav class="navbar navbar-default">
. Check this documentation and examples for Django’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
Example
<nav class= "navbar navbar-horizontal navbar-expand-lg navbar-dark bg-default" >
<div class= "container" >
<a class= "navbar-brand" href= "#" > Default Color</a>
<button class= "navbar-toggler" type= "button" data-toggle= "collapse" data-target= "#navbar-default" aria-controls= "navbar-default" aria-expanded= "false" aria-label= "Toggle navigation" >
<span class= "navbar-toggler-icon" ></span>
</button>
<div class= "collapse navbar-collapse" id= "navbar-default" >
<div class= "navbar-collapse-header" >
<div class= "row" >
<div class= "col-6 collapse-brand" >
<a href= "javascript:void(0)" >
<img src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/brand/blue.png" >
</a>
</div>
<div class= "col-6 collapse-close" >
<button type= "button" class= "navbar-toggler" data-toggle= "collapse" data-target= "#navbar-default" aria-controls= "navbar-default" aria-expanded= "false" aria-label= "Toggle navigation" >
<span></span>
<span></span>
</button>
</div>
</div>
</div>
<ul class= "navbar-nav ml-lg-auto" >
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "ni ni-favourite-28" ></i>
<span class= "nav-link-inner--text d-lg-none" > Discover</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "ni ni-notification-70" ></i>
<span class= "nav-link-inner--text d-lg-none" > Profile</span>
</a>
</li>
<li class= "nav-item dropdown" >
<a class= "nav-link nav-link-icon" href= "#" id= "navbar-default_dropdown_1" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<i class= "ni ni-settings-gear-65" ></i>
<span class= "nav-link-inner--text d-lg-none" > Settings</span>
</a>
<div class= "dropdown-menu dropdown-menu-right" aria-labelledby= "navbar-default_dropdown_1" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<div class= "dropdown-divider" ></div>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
Variations
<!-- Navbar primary -->
<nav class= "navbar navbar-horizontal navbar-expand-lg navbar-dark bg-primary mt-4" >
<div class= "container" >
<a class= "navbar-brand" href= "#" > Primary Color</a>
<button class= "navbar-toggler" type= "button" data-toggle= "collapse" data-target= "#navbar-primary" aria-controls= "navbar-primary" aria-expanded= "false" aria-label= "Toggle navigation" >
<span class= "navbar-toggler-icon" ></span>
</button>
<div class= "collapse navbar-collapse" id= "navbar-primary" >
<div class= "navbar-collapse-header" >
<div class= "row" >
<div class= "col-6 collapse-brand" >
<a href= "javascript:void(0)" >
<img src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/brand/blue.png" >
</a>
</div>
<div class= "col-6 collapse-close" >
<button type= "button" class= "navbar-toggler" data-toggle= "collapse" data-target= "#navbar-primary" aria-controls= "navbar-primary" aria-expanded= "false" aria-label= "Toggle navigation" >
<span></span>
<span></span>
</button>
</div>
</div>
</div>
<ul class= "navbar-nav ml-lg-auto" >
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Discover <span class= "sr-only" > (current)</span></a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Profile</a>
</li>
<li class= "nav-item dropdown" >
<a class= "nav-link" href= "#" id= "navbar-primary_dropdown_1" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" > Settings</a>
<div class= "dropdown-menu dropdown-menu-right" aria-labelledby= "navbar-primary_dropdown_1" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<div class= "dropdown-divider" ></div>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar success -->
<nav class= "navbar navbar-horizontal navbar-expand-lg navbar-dark bg-success mt-4" >
<div class= "container" >
<a class= "navbar-brand" href= "#" > Success Color</a>
<button class= "navbar-toggler" type= "button" data-toggle= "collapse" data-target= "#navbar-success" aria-controls= "navbar-success" aria-expanded= "false" aria-label= "Toggle navigation" >
<span class= "navbar-toggler-icon" ></span>
</button>
<div class= "collapse navbar-collapse" id= "navbar-success" >
<div class= "navbar-collapse-header" >
<div class= "row" >
<div class= "col-6 collapse-brand" >
<a href= "javascript:void(0)" >
<img src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/brand/blue.png" >
</a>
</div>
<div class= "col-6 collapse-close" >
<button type= "button" class= "navbar-toggler" data-toggle= "collapse" data-target= "#navbar-success" aria-controls= "navbar-success" aria-expanded= "false" aria-label= "Toggle navigation" >
<span></span>
<span></span>
</button>
</div>
</div>
</div>
<ul class= "navbar-nav ml-lg-auto" >
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "ni ni-favourite-28" ></i>
<span class= "nav-link-inner--text d-lg-none" > Favorites</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "ni ni-planet" ></i>
<span class= "nav-link-inner--text d-lg-none" > Another action</span>
</a>
</li>
<li class= "nav-item dropdown" >
<a class= "nav-link nav-link-icon" href= "#" id= "navbar-success_dropdown_1" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<i class= "ni ni-settings-gear-65" ></i>
<span class= "nav-link-inner--text d-lg-none" > Settings</span>
</a>
<div class= "dropdown-menu dropdown-menu-right" aria-labelledby= "navbar-success_dropdown_1" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<div class= "dropdown-divider" ></div>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar danger -->
<nav class= "navbar navbar-horizontal navbar-expand-lg navbar-dark bg-danger mt-4" >
<div class= "container" >
<a class= "navbar-brand" href= "#" > Danger Color</a>
<button class= "navbar-toggler" type= "button" data-toggle= "collapse" data-target= "#navbar-danger" aria-controls= "navbar-danger" aria-expanded= "false" aria-label= "Toggle navigation" >
<span class= "navbar-toggler-icon" ></span>
</button>
<div class= "collapse navbar-collapse" id= "navbar-danger" >
<div class= "navbar-collapse-header" >
<div class= "row" >
<div class= "col-6 collapse-brand" >
<a href= "javascript:void(0)" >
<img src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/brand/blue.png" >
</a>
</div>
<div class= "col-6 collapse-close" >
<button type= "button" class= "navbar-toggler" data-toggle= "collapse" data-target= "#navbar-danger" aria-controls= "navbar-danger" aria-expanded= "false" aria-label= "Toggle navigation" >
<span></span>
<span></span>
</button>
</div>
</div>
</div>
<ul class= "navbar-nav ml-auto" >
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fab fa-facebook-square" ></i>
<span class= "nav-link-inner--text d-lg-none" > Facebook</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fab fa-twitter" ></i>
<span class= "nav-link-inner--text d-lg-none" > Twitter</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fab fa-google-plus" ></i>
<span class= "nav-link-inner--text d-lg-none" > Google +</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fab fa-instagram" ></i>
<span class= "nav-link-inner--text d-lg-none" > Instagram</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar warning -->
<nav class= "navbar navbar-horizontal navbar-expand-lg navbar-dark bg-warning mt-4" >
<div class= "container" >
<a class= "navbar-brand" href= "#" > Warning Color</a>
<button class= "navbar-toggler" type= "button" data-toggle= "collapse" data-target= "#navbar-warning" aria-controls= "navbar-warning" aria-expanded= "false" aria-label= "Toggle navigation" >
<span class= "navbar-toggler-icon" ></span>
</button>
<div class= "collapse navbar-collapse" id= "navbar-warning" >
<div class= "navbar-collapse-header" >
<div class= "row" >
<div class= "col-6 collapse-brand" >
<a href= "javascript:void(0)" >
<img src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/brand/blue.png" >
</a>
</div>
<div class= "col-6 collapse-close" >
<button type= "button" class= "navbar-toggler" data-toggle= "collapse" data-target= "#navbar-warning" aria-controls= "navbar-warning" aria-expanded= "false" aria-label= "Toggle navigation" >
<span></span>
<span></span>
</button>
</div>
</div>
</div>
<ul class= "navbar-nav align-items-lg-center ml-lg-auto" >
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fab fa-facebook-square" ></i>
<span class= "nav-link-inner--text d-lg-none" > Share</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fab fa-twitter" ></i>
<span class= "nav-link-inner--text d-lg-none" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fab fa-pinterest" ></i>
<span class= "nav-link-inner--text d-lg-none" > Pin</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar info -->
<nav class= "navbar navbar-horizontal navbar-expand-lg navbar-dark bg-info mt-4" >
<div class= "container" >
<a class= "navbar-brand" href= "#" > Info Color</a>
<button class= "navbar-toggler" type= "button" data-toggle= "collapse" data-target= "#navbar-info" aria-controls= "navbar-info" aria-expanded= "false" aria-label= "Toggle navigation" >
<span class= "navbar-toggler-icon" ></span>
</button>
<div class= "collapse navbar-collapse" id= "navbar-info" >
<div class= "navbar-collapse-header" >
<div class= "row" >
<div class= "col-6 collapse-brand" >
<a href= "javascript:void(0)" >
<img src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/brand/blue.png" >
</a>
</div>
<div class= "col-6 collapse-close" >
<button type= "button" class= "navbar-toggler" data-toggle= "collapse" data-target= "#navbar-info" aria-controls= "navbar-info" aria-expanded= "false" aria-label= "Toggle navigation" >
<span></span>
<span></span>
</button>
</div>
</div>
</div>
<ul class= "navbar-nav ml-auto" >
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fab fa-facebook-square" ></i>
<span class= "nav-link-inner--text" > Facebook</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fab fa-twitter" ></i>
<span class= "nav-link-inner--text" > Twitter</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fab fa-instagram" ></i>
<span class= "nav-link-inner--text" > Instagram</span>
</a>
</li>
</ul>
</div>
</div>
</nav>