Bootstrap 4 | Navs

Nav Menu: The .nav, .nav-item and .nav-link classes are used to create navigation menu. The .nav, .nav-item and .nav-link classes are used with <ul>, <li> and link element respectively.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Nav menu</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 Menu</h2>
      
        <ul class="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>
    </div>
</body
  
</html>                    

chevron_right


Output:

Aligned Nav: The .justify-content-center and .justify-content-end classes are used to set the alignment of navigation menu to center and end respectively.

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Nav menu</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;">
            Aligned Navigation Menu
        </h2>
          
        <div>Left-aligned nav</div>
        <ul class="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>
          
        <br><br>
          
        <div class="text-center">Centered-aligned nav</div>
        <ul class="nav justify-content-center">
            <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>
          
        <br><br>
          
        <div class="text-right">Right-aligned nav</div>
        <ul class="nav justify-content-end">
            <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>
    </div>
</body
  
</html>                    

chevron_right


Output:

Vertical Nav: The .flex-column class is used to create the vertical navigation menu.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Nav menu</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;">
            Vertical Nav Menu
        </h2>
          
        <ul class="nav flex-column">
            <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>
    </div>
</body
  
</html>                    

chevron_right


Output:

Tabs Nav Menu: The .nav-tabs class is used to create the tab navigation menu. The .active class is used to active the link.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Nav menu</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;">
            Vertical Nav Menu
        </h2>
          
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link active" 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>
</body
  
</html>                    

chevron_right


Output:

Pills Nav Menu: The .nav-pills class is used to create navigation pills menu.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Nav menu</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;">
            Pills Nav Menu
        </h2>
          
        <ul class="nav nav-pills">
            <li class="nav-item">
                <a class="nav-link active" 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>
</body
  
</html>                    

chevron_right


Output:



Justified Tabs/pills Nav Menu: The .nav-justified class is used to justify the tabs/pills navigation menu.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Nav menu</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;">
            Justified Tabs/pills Nav Menu
        </h2>
          
        <ul class="nav nav-tabs nav-justified">
            <li class="nav-item">
                <a class="nav-link active" 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>
          
        <br><br>
          
        <ul class="nav nav-pills nav-justified">
            <li class="nav-item">
                <a class="nav-link active" 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>
</body
  
</html>                    

chevron_right


Output:

Pills/Tabs with Dropdown Nav Menu: The .nav-pills/.nav-tabs class is used to create navigation pills/tabs menu and .dropdown class is used to create dropdown nav menu.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Nav menu</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;">
            Pills/Tabs with Dropdown Nav Menu
        </h2>
          
        <ul class="nav nav-pills">
            <li class="nav-item">
                <a class="nav-link active" 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 dropdown-toggle"
                        data-toggle="dropdown" href="#">
                    Languages
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">C</a>
                    <a class="dropdown-item" href="#">C++</a>
                    <a class="dropdown-item" href="#">Java</a>
                    <a class="dropdown-item" href="#">Python</a>
                </div>
            </li>
        </ul>
          
        <br><br>
          
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link active" 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 dropdown-toggle"
                        data-toggle="dropdown" href="#">
                    Languages
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">C</a>
                    <a class="dropdown-item" href="#">C++</a>
                    <a class="dropdown-item" href="#">Java</a>
                    <a class="dropdown-item" href="#">Python</a>
                </div>
            </li>
        </ul>
    </div>
</body
  
</html>                                

chevron_right


Output:

Toggleable/Dynamic Pills Nav Menu: The data-toggle=”pill” attribute is used to make the pills toggleable. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class .tab-content.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Nav menu</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;">
            Toggleable/Dynamic Pills Nav Menu
        </h2>
          
        <ul class="nav nav-pills" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="pill" href="#home">
                    Home
                </a>
            </li>
              
            <li class="nav-item">
                <a class="nav-link" data-toggle="pill" href="#algo">Algo</a>
            </li>
              
            <li class="nav-item">
                <a class="nav-link" data-toggle="pill" href="#ds">DS</a>
            </li>
              
            <li class="nav-item">
                <a class="nav-link" data-toggle="pill" href="#languages">
                    Languages
                </a>
            </li>
        </ul>
          
        <div class="tab-content">
            <div id="home" class="container tab-pane active">
                <strong>Home</strong>
                <p>
                    GeeksforGeeks: It is a computer science portal
                    where you can learn programming
                </p>
            </div>
              
            <div id="algo" class="container tab-pane fade">
                <strong>algo</strong>
                <p>
                    A process or set of rules to be followed in calculations
                    or other problem-solving operations
                </p>
            </div>
              
            <div id="ds" class="container tab-pane fade">
                <strong>DS</strong>
                <p>
                    Data Structure is a perticular way to organizing
                    the dat in computer memory
                </p>
            </div>
              
            <div id="languages" class="container tab-pane fade">
                <strong>Languages</strong>
                <p>
                    There are many programming languages exist
                    in computer science.
                </p>
            </div>
        </div>
    </div>
</body
  
</html>                    

chevron_right


Output:

Toggleable/Dynamic Tabs Nav Menu: The data-toggle=”tab” attribute is used to make the tabs toggleable. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class .tab-content.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Nav menu</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;">
            Toggleable/Dynamic Tabs Nav Menu
        </h2>
          
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#home">
                    Home
                </a>
            </li>
              
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#algo">Algo</a>
            </li>
              
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#ds">DS</a>
            </li>
              
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#languages">
                    Languages
                </a>
            </li>
        </ul>
          
        <div class="tab-content">
            <div id="home" class="container tab-pane active">
                <strong>Home</strong>
                <p>
                    GeeksforGeeks: It is a computer science portal
                    where you can learn programming
                </p>
            </div>
              
            <div id="algo" class="container tab-pane fade">
                <strong>algo</strong>
                <p>
                    A process or set of rules to be followed in calculations
                    or other problem-solving operations
                </p>
            </div>
              
            <div id="ds" class="container tab-pane fade">
                <strong>DS</strong>
                <p>
                    Data Structure is a perticular way to organizing
                    the dat in computer memory
                </p>
            </div>
              
            <div id="languages" class="container tab-pane fade">
                <strong>Languages</strong>
                <p>
                    There are many programming languages exist
                    in computer science.
                </p>
            </div>
        </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.