Bootstrap 4 | Navigation Bar

A navigation bar is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest. The navigation bar is placed at the top of the page.

Basic Navigation Bar: The .navbar class is used to create a navigation bar. The navbar is created responsive by using .navbar-expand-xl|lg|md|sm class. The responsive navbar is vertically stacked in small screens. The <class=”nav-item”> element followed by <a class=”nav-link”> is used to create nav link.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Navigation Bar</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="text-align:center;"
      
    <div class="container">
          
        <h1 style="color:green;">
            GeeksforGeeks
        </h1
          
        <h2>Navigation Bar</h2>
          
        <nav class="navbar navbar-expand-sm bg-light">
              
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
              
                <li class="nav-item">
                    <a class="nav-link" href="#">Algo</a>
                </li>
              
                <li class="nav-item">
                    <a class="nav-link" href="#">DS</a>
                </li>
              
                <li class="nav-item">
                    <a class="nav-link" href="#">Languages</a>
                </li>
            </ul>
        </nav>
    </div>
</body
  
</html>                    

chevron_right


Output:

Vertical Navbar: The .navbar-expand-xl|lg|md|sm class is used to create vertical navigation bar.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Navigation Bar</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="text-align:center;"
      
    <div class="container">
          
        <h1 style="color:green;">
            GeeksforGeeks
        </h1
          
        <h2>Vertical Navbar</h2>
          
        <nav class="navbar navbar-expand-xl|lg|md|sm">
              
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
              
                <li class="nav-item">
                    <a class="nav-link" href="#">Algo</a>
                </li>
              
                <li class="nav-item">
                    <a class="nav-link" href="#">DS</a>
                </li>
              
                <li class="nav-item">
                    <a class="nav-link" href="#">Languages</a>
                </li>
            </ul>
        </nav>
    </div>
</body
  
</html>                    

chevron_right


Output:

Centered Navbar: The .justify-content-center class is used to set the alignment of navigation bar to center. The navigation bar is displayed center on medium, large and extra large screens. In the case of small screens, the navigation bar is displayed vertically and left-aligned.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Navigation Bar</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="text-align:center;"
      
    <div class="container">
          
        <h1 style="color:green;">
            GeeksforGeeks
        </h1
          
        <h2>Centered Navbar</h2>
          
        <nav class="navbar navbar-expand-sm bg-light justify-content-center">
              
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
              
                <li class="nav-item">
                    <a class="nav-link" href="#">Algo</a>
                </li>
              
                <li class="nav-item">
                    <a class="nav-link" href="#">DS</a>
                </li>
              
                <li class="nav-item">
                    <a class="nav-link" href="#">Languages</a>
                </li>
            </ul>
        </nav>
    </div>
</body
  
</html>                    

chevron_right


Output:

Colored Navbar: The .bg-color classes is used to change the background color of the navbar. The bg-color classes are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light. The .navbar-dark class is used to set links text color to white and .navbar-light class is used to set links text color to black.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Navigation Bar</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
      
    <div class="container">
          
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1
          
        <h2 style="text-align:center;">Colored Navbar</h2>
          
        <nav class="navbar navbar-expand-sm bg-primary navbar-dark">
              
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
              
                <li class="nav-item">
                    <a class="nav-link" href="#">Algo</a>
                </li>
              
                <li class="nav-item">
                    <a class="nav-link" href="#">DS</a>
                </li>
              
                <li class="nav-item">
                    <a class="nav-link" href="#">Languages</a>
                </li>
            </ul>
        </nav>
              
        <br><br>
              
        <nav class="navbar navbar-expand-sm bg-success navbar-light">
              
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
              
                <li class="nav-item">
                    <a class="nav-link" href="#">Algo</a>
                </li>
              
                <li class="nav-item">
                    <a class="nav-link" href="#">DS</a>
                </li>
              
                <li class="nav-item">
                    <a class="nav-link" href="#">Languages</a>
                </li>
            </ul>
        </nav>
    </div>
</body
  
</html>                    

chevron_right


Output:

Brand/Logo navbar: The .navbar-brand class is used to highlight the brand/logo name.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Navigation Bar</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
      
    <div class="container">
          
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1
          
        <h2 style="text-align:center;">Brand/Logo navbar</h2>
          
        <nav class="navbar navbar-expand-sm bg-primary navbar-dark">
              
            <a class="navbar-brand" href="#">GFG</a>
    
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
              
                <li class="nav-item">
                    <a class="nav-link" href="#">Algo</a>
                </li>
              
                <li class="nav-item">
                    <a class="nav-link" href="#">DS</a>
                </li>
              
                <li class="nav-item">
                    <a class="nav-link" href="#">Languages</a>
                </li>
            </ul>
        </nav>
              
        <br><br>
              
        <nav class="navbar navbar-expand-sm bg-success navbar-light">
              
            <a class="navbar-brand" href="#">
                <img src=
                alt="logo" style="width:40px;">
            </a>
              
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
              
                <li class="nav-item">
                    <a class="nav-link" href="#">Algo</a>
                </li>
              
                <li class="nav-item">
                    <a class="nav-link" href="#">DS</a>
                </li>
              
                <li class="nav-item">
                    <a class="nav-link" href="#">Languages</a>
                </li>
            </ul>
        </nav>
    </div>
</body
  
</html>                    

chevron_right


Output:

Collapsing Navbar: The collapsing navbar is used on small screens. It hides the navigation links and replaces with a button. The class=”navbar-toggler”, data-toggle=”collapse” and data-target=”#thetarget” is used to create collapse navigation bar.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Navigation Bar</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
      
    <div class="container">
          
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1
          
        <h2 style="text-align:center;">Collapsing Navbar</h2>
  
              
        <nav class="navbar navbar-expand-sm bg-success navbar-light">
              
            <!-- Brand/logo -->
            <a class="navbar-brand" href="#">
                <img src=
                alt="logo" style="width:40px;">
            </a>
              
            <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#collapse_Navbar">
                <span class="navbar-toggler-icon"></span>
            </button>
              
            <div class="collapse navbar-collapse" id="collapse_Navbar">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                  
                    <li class="nav-item">
                        <a class="nav-link" href="#">Algo</a>
                    </li>
                  
                    <li class="nav-item">
                        <a class="nav-link" href="#">DS</a>
                    </li>
                  
                    <li class="nav-item">
                        <a class="nav-link" href="#">Languages</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</body
  
</html>                    

chevron_right


Output:
On large screen:

On small screen:

Dropdown Navbar: The navbar can be created by using dropdown menu.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Navigation Bar</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
      
    <div class="container">
          
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1
          
        <h2 style="text-align:center;">Dropdown Navbar</h2>
  
              
        <nav class="navbar navbar-expand-sm bg-success navbar-dark">
              
            <!-- Brand/logo -->
            <a class="navbar-brand" href="#">
                <img src=
                alt="logo" style="width:40px;">
            </a>
              
            <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#collapse_Navbar">
                <span class="navbar-toggler-icon"></span>
            </button>
              
            <div class="collapse navbar-collapse" id="collapse_Navbar">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                  
                    <li class="nav-item">
                        <a class="nav-link" href="#">Algo</a>
                    </li>
                  
                    <li class="nav-item">
                        <a class="nav-link" href="#">DS</a>
                    </li>
                  
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" 
                                id="navbardrop" data-toggle="dropdown">
                            Languages
                        </a>
                          
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">Link 1</a>
                            <a class="dropdown-item" href="#">Link 2</a>
                            <a class="dropdown-item" href="#">Link 3</a>
                        </div>
                    </li
                </ul>
            </div>
        </nav>
    </div>
</body
  
</html>                    

chevron_right


Output:

Forms and Buttons Navbar: The <form class=”form-inline”> element is used to group inputs and button side-by-side. The .input-group-prepend or .input-group-append class is used to attach icon of input text fields.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Navigation Bar</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
      
    <div class="container">
          
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1
          
        <h2 style="text-align:center;">Forms and Buttons Navbar</h2>
  
              
        <nav class="navbar navbar-expand-sm bg-success navbar-dark">
              
            <!-- Brand/logo -->
            <a class="navbar-brand" href="#">
                <img src=
                alt="logo" style="width:40px;">
            </a>
              
            <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#collapse_Navbar">
                <span class="navbar-toggler-icon"></span>
            </button>
              
            <div class="collapse navbar-collapse" id="collapse_Navbar">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                  
                    <li class="nav-item">
                        <a class="nav-link" href="#">Algo</a>
                    </li>
                  
                    <li class="nav-item">
                        <a class="nav-link" href="#">DS</a>
                    </li>
                </ul>
            </div>
              
            <form class="form-inline" action="#">
                <input class="form-control mr-sm-2" type="text"
                          placeholder="Search">
                <button class="btn btn-primary" type="submit">Search</button>
            </form>
        </nav>
    </div>
</body
  
</html>                    

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Navigation Bar</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
      
    <div class="container">
          
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1
          
        <h2 style="text-align:center;">Forms and Buttons Navbar</h2>
  
              
        <nav class="navbar navbar-expand-sm bg-success navbar-dark">
              
            <!-- Brand/logo -->
            <a class="navbar-brand" href="#">
                <img src=
                alt="logo" style="width:40px;">
            </a>
              
            <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#collapse_Navbar">
                <span class="navbar-toggler-icon"></span>
            </button>
              
            <div class="collapse navbar-collapse" id="collapse_Navbar">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                  
                    <li class="nav-item">
                        <a class="nav-link" href="#">Algo</a>
                    </li>
                  
                    <li class="nav-item">
                        <a class="nav-link" href="#">DS</a>
                    </li>
                </ul>
            </div>
              
            <form class="form-inline" action="#">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">@</span>
                    </div>
                      
                    <input type="text" class="form-control" 
                            placeholder="Username">
            </form>
        </nav>
    </div>
</body
  
</html>                    

chevron_right


Output:

Text Navbar: The .navbar-text class is used to add the text element to the navigation bar.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Navigation Bar</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
      
    <div class="container">
          
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1
          
        <h2 style="text-align:center;">Text Navbar</h2>
  
              
        <nav class="navbar navbar-expand-sm bg-success navbar-dark">
  
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                  
                <li class="nav-item">
                    <a class="nav-link" href="#">Algo</a>
                </li>
                  
                <span class="navbar-text">
                    DS
                </span>
            </ul>
        </nav>
    </div>
</body
  
</html>                    

chevron_right


Output:

Fixed Navbar: The .fixed-top class is used to fix the navigation bar at the top position and the .fixed-bottom class is used to fix the navigation bar at the bottom position.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Navigation Bar</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="height:1000px"
  
    <nav class="navbar navbar-expand-sm bg-success navbar-dark fixed-top">
  
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
                  
            <li class="nav-item">
                <a class="nav-link" href="#">Algo</a>
            </li>
                  
            <li class="nav-item">
                <a class="nav-link" href="#">DS</a>
            </li>
                  
            <li class="nav-item">
                <a class="nav-link" href="#">Languages</a>
            </li>
        </ul>
    </nav>
          
    <div class="container-fluid" style="margin-top:80px">
          
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1
          
        <h2 style="text-align:center;">Fixed Top Navbar</h2>
    </div>
</body
  
</html>                    

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Navigation Bar</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="height:1000px">
    <nav class="navbar navbar-expand-sm bg-success navbar-dark fixed-bottom">
  
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
                  
            <li class="nav-item">
                <a class="nav-link" href="#">Algo</a>
            </li>
                  
            <li class="nav-item">
                <a class="nav-link" href="#">DS</a>
            </li>
                  
            <li class="nav-item">
                <a class="nav-link" href="#">Languages</a>
            </li>
        </ul>
    </nav>
          
    <div class="container-fluid" style="margin-top:80px">
          
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1
          
        <h2 style="text-align:center;">Fixed Bottom Navbar</h2>
    </div>
</body
  
</html>                    

chevron_right


Output:

Sticky Navbar: The .sticky-top class is used to create the sticky navbar. The sticky navbar stays fixed at the top of the page when scrolling the page.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Navigation Bar</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="height:1000px">
      
    <div class="container-fluid">
          
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1
          
        <h2 style="text-align:center;">Sticky Navbar</h2>
    </div>
      
    <nav class="navbar navbar-expand-sm bg-success navbar-dark sticky-top">
  
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
                  
            <li class="nav-item">
                <a class="nav-link" href="#">Algo</a>
            </li>
                  
            <li class="nav-item">
                <a class="nav-link" href="#">DS</a>
            </li>
                  
            <li class="nav-item">
                <a class="nav-link" href="#">Languages</a>
            </li>
        </ul>
    </nav>
          
    <div class="container-fluid" style="margin-top:80px">
          
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1
          
        <div style="text-align:center;">
            A computer science portal for geeks
        </div>
    </div>
</body
  
</html>                    

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.