Bootstrap Navbar

Bootstrap Navbar
Nikhil
Published on 2021-07-24 07:39:45

Navbar

The navbar, Bootstrap's strong, responsive navigation header, has documentation and examples. Includes branding, navigation, and other features, as well as compatibility for our collapse plugin.

How does it work?

Before you start using the navbar, here's what you should know:

  • For responsive collapsing and color scheme classes, navbars require a wrapping .navbar with .navbar-expand-sm|-md|-lg|-xl.
  • By default, navbars and their contents are fluid. To limit their horizontal width, use optional containers.
  • To modify the spacing and alignment of navbars, use our spacing and flex utility classes.
  • Navbars are responsive by default, but you may change that with ease. Our Collapse JavaScript plugin is responsible for responsive behavior.
  • When printing, the navbars are concealed by default. By adding .d-print to the .navbar, you may force them to be printed. See the show utility class for further information.
  • Ensure accessibility by using an <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.

A few sub-components are supported by default in navbars. As needed, select from the following options:

  • .navbar-nav for a full-height and lightweight navigation.
  • .navbar-brand for your company, product, or project name (including support for dropdowns).
  • .navbar-toggler is a class that may be used with our collapse plugin and other toggling navigation actions.
  • For all form controls and actions, use .form-inline.
  • .navbar-text allows you to add vertically centered text strings to your navigation bar.
  • For grouping and hiding navbar contents by a parent breakpoint, use .collapse .navbar-collapse.

Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the lg (large) breakpoint.

<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
            <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <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>
            <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
        </ul>
        <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form>
    </div>
</nav>

 

Adding images to the .navbar-brand will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.

example:

<!-- Image and text -->
<nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#">
        <img src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt=""> Bootstrap
    </a>
</nav>

You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for .nav-item and .nav-link as shown below.

<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
            <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div>
            </li>
        </ul>
    </div>
</nav>

Place various form controls and components within a navbar with .form-inline.

<nav class="navbar navbar-light bg-light justify-content-between"> <a class="navbar-brand">Navbar</a>
    <form class="form-inline"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form>
</nav>

 

Color schemes

Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from .navbar-light for use with light background colors, or .navbar-dark for dark background colors. Then, customize with .bg-* utilities.

<nav class="navbar navbar-dark bg-dark">
    <!-- Navbar content -->
</nav>
<nav class="navbar navbar-dark bg-primary">
    <!-- Navbar content -->
</nav>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
    <!-- Navbar content -->
</nav>

To place navbars in non-static places, use our position tools. Fastened to the top, fixed to the bottom, or stickied to the top are the options (scrolls with the page until it reaches the top, then stays there). Fixed navbars employ position: fixed, which means they're taken out of the DOM's usual flow and may require additional CSS (e.g., padding-top on the body>) to avoid overlapping with other elements.

Fixed top

<nav class="navbar fixed-top navbar-light bg-light"> <a class="navbar-brand" href="#">Fixed top</a> </nav>

Fixed bottom

<nav class="navbar fixed-bottom navbar-light bg-light"> <a class="navbar-brand" href="#">Fixed bottom</a> </nav>

Sticky top

<nav class="navbar sticky-top navbar-light bg-light"> <a class="navbar-brand" href="#">Sticky top</a> </nav>

By default, navbar togglers are left-aligned, but if they follow a sibling element like.navbar-brand, they'll be positioned to the far right. The toggler's position will be reversed if your markup is reversed. Here are some instances of various toggle styles.

In the lowest breakpoint, there is no .navbar-brand:

<nav class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <a class="navbar-brand" href="#">Hidden brand</a>
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
            <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
        </ul>
        <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form>
    </div>
</nav>

You may want to use the collapse plugin to reveal content that is buried elsewhere on the page. That's simple with our plugin because it works with id and data-target matching.

Example:

<div class="pos-f-t">
    <div class="collapse" id="navbarToggleExternalContent">
        <div class="bg-dark p-4">
            <h4 class="text-white">Collapsed content</h4> <span class="text-muted">Toggleable via the navbar brand.</span>
        </div>
    </div>
    <nav class="navbar navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </nav>
</div>

ATutorialHub Related Guide

Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website