Materialize CSS Navbars

A navigation bar is a user interface element within a webpage that contains links to other sections of the website. It is displayed as a list of horizontal links at the top of each page. It is placed before the main content of the page or below the header. The navbar is contained in an HTML5 <nav> followed by a container “div”, that holds 2 main parts of the navbar. A logo or brand link, and the navigation link. The links can be aligned left or right according to the application requirement.

Following are the different ways of using Navbars.

1. Right Aligned: To right align the navbar links, right class is added to <ul> element.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <!--Import Google Icon Font-->
    <link href=
        rel="stylesheet">
  
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
  
    <script type="text/javascript" src=
    </script>
  
    <!-- Let browser know website is
        optimized for mobile -->
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
</head>
  
<body>
    <nav>
        <div class="nav-wrapper green">
            <a href="#" class="brand-logo">
                Materialize
            </a>
              
            <ul id="nav-mobile" class=
                "right hide-on-med-and-down">
                <li>
                    <a href=
                        Table
                    </a>
                </li>
                  
                <li>
                    <a href=
                        Colors
                    </a>
                </li>
                  
                <li><a href=
                        Typography
                    </a>
                </li>
            </ul>
        </div>
    </nav>
  
    <!-- Compiled and minified JavaScript -->
    <script src=
    </script>
</body>
  
</html>

chevron_right


Output:



Left Aligned: To left align the navbar links, left class is added to <ul> element.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <!--Import Google Icon Font-->
    <link href=
        rel="stylesheet">
  
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
  
    <script type="text/javascript" src=
    </script>
  
    <!-- Let browser know website is 
        optimized for mobile -->
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
</head>
  
<body>
    <nav>
        <div class="nav-wrapper green">
            <a href="#" class="brand-logo 
                right">Materialize
            </a>
              
            <ul id="nav-mobile" class=
                "left hide-on-med-and-down">
                  
                <li>
                    <a href=
                        Table
                    </a>
                </li>
                  
                <li>
                    <a href=
                        Colors
                    </a>
                </li>
                  
                <li>
                    <a href=
                        Typography
                    </a>
                </li>
            </ul>
        </div>
    </nav>
  
    <!-- Compiled and minified JavaScript -->
    <script src=
    </script>
</body>
  
</html>

chevron_right


Output:

Center Logo: To align the logo in center, center class is added to <a class=”brand-logo”>. Although the logo will center itself on medium and down screens. While using this, make sure that links do not overlap.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <!--Import Google Icon Font-->
    <link href=
        rel="stylesheet">
  
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
  
    <script type="text/javascript" src=
    </script>
  
    <!-- Let browser know website is 
        optimized for mobile -->
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
</head>
  
<body>
    <nav>
        <div class="nav-wrapper green">
            <a href="#" class="brand-logo 
                center">Materialize
            </a>
              
            <ul id="nav-mobile" class=
                "left hide-on-med-and-down">
                  
                <li>
                    <a href=
                        Table
                    </a>
                </li>
                  
                <li><a href=
                        Colors
                    </a>
                </li>
                  
                <li><a href=
                        Typography
                    </a>
                </li>
            </ul>
        </div>
    </nav>
  
    <!-- Compiled and minified JavaScript -->
    <script src=
    </script>
</body>
  
</html>

chevron_right


Output:

Active Items: It is used to denote the current active page, for this active class is added to the “li” tag.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <!--Import Google Icon Font-->
    <link href=
        rel="stylesheet">
  
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
  
    <script type="text/javascript" 
    </script>
  
    <!-- Let browser know website is 
        optimized for mobile -->
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
</head>
  
<body>
  
    <nav>
        <div class="nav-wrapper green">
            <a href="#" class="brand-logo 
                center">Materialize
            </a>
              
            <ul id="nav-mobile" class=
                "left hide-on-med-and-down">
                <li>
                    <a href=
                        Table
                    </a>
                </li>
                  
                <li class="active">
                    <a href=
                        Colors
                    </a>
                </li>
                  
                <li><a href=
                        Typography
                    </a>
                </li>
            </ul>
        </div>
    </nav>
  
    <!-- Compiled and minified JavaScript -->
    <script src=
    </script>
</body>
  
</html>

chevron_right


Output:



Navbar with Tabs: It is used to extend the component of the navbar. To use this, nav-extended class is added to the outer “nav” tag. This will allow tabs component inside the” nav-wrapper” and the “height” to be variable.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <!--Import Google Icon Font-->
    <link href=
        rel="stylesheet">
  
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
  
    <script type="text/javascript" src=
    </script>
  
    <!-- Let browser know website 
        is optimized for mobile -->
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
</head>
  
<body>
  
    <nav class="nav-extended green">
        <div class="nav-wrapper">
            <div class="container">
                <a href="#" class="brand-logo">
                    LOGO
                </a>
                  
                <a href="#" data-activates="mobile-menu"
                    class="button-collapse">
                    <i class="material-icons">menu</i>
                </a>
  
                <ul class="right hide-on-med-and-down">
                    <li><a href="#">item1</a></li>
                    <li><a href="#">item2</a></li>
                    <li><a href="#">item3</a></li>
                    <li><a href="#">item4</a></li>
                </ul>
                <ul class="side-nav" id="mobile-menu">
                    <li><a href="#">item1</a></li>
                    <li><a href="#">item2</a></li>
                    <li><a href="#">item3</a></li>
                    <li><a href="#">item4</a></li>
                </ul>
                <!-- tabs items -->
                <ul class="tabs tabs-transparent">
                    <li class="tab"><a href="#test1">
                        Test 1
                    </a></li>
  
                    <li class="tab"><a class="active" 
                        href="#test2">Test 2</a></li>
                    <li class="tab disabled"><a href=
                        "#test3">Disabled Tab</a></li>
                    <li class="tab"><a href="#test4">
                        Test 4
                    </a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- tabs content -->
    <div id="test1" class="col s12">Test 1</div>
    <div id="test2" class="col s12">Test 2</div>
    <div id="test3" class="col s12">Test 3</div>
    <div id="test4" class="col s12">Test 4</div>
  
    <!-- Compiled and minified JavaScript -->
    <script src=
    </script>
</body>
  
</html>

chevron_right


Output:

Dropdown Menu: To add a navbar dropdown menu, “ul” dropdown structure is added into the page. Then, an element is added to trigger the dropdown menu. The “id” of the dropdown structure is supplied to the “data-target” attribute of the dropdown .

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  <!--Import Google Icon Font-->
  <link href=
    rel="stylesheet">
  
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href=
  
  <script type="text/javascript" src=
  </script>
  
  <!-- Let browser know website 
    is optimized for mobile -->
  <meta name="viewport" content=
    "width=device-width, initial-scale=1.0" />
</head>
  
<body>
  <nav>
    <div class="nav-wrapper green">
      <div class="container">
        <a href="#" class="brand-logo">LOGO</a>
        <!-- mobile menu trigger -->
        <a href="#" data-activates="mobile-menu"
          class="button-collapse">
          <i class="material-icons">menu</i>
        </a>
        <!-- desktop menu content -->
        <ul class="right hide-on-med-and-down">
          <li><a href="#">Option-1</a></li>
          <li><a href="#">Option-2</a></li>
          <!-- desktop menu dropdown trigger -->
          <li><a class="dropdown-button" href="#!"
              data-activates="dropdown1">
              Dropdown
              <i class="material-icons right">
                arrow_drop_down
              </i>
            </a></li>
          <li><a href="#">Option-3</a></li>
          <!-- desktop menu dropdown content -->
          <ul id='dropdown1' class=
            'dropdown-content green-text'>
            <li><a href="#!">sub-dropdown1</a></li>
            <li><a href="#!">sub-dropdown2</a></li>
            <li><a href="#!">sub-dropdown3</a></li>
            <li><a href="#!">sub-dropdown4</a></li>
          </ul>
        </ul>
        <!-- mobile and tablet menu content -->
        <ul id="mobile-menu" class="side-nav">
          <li>
            <div class="userView">
              <div class="background">
                <img src=
              </div>
            </div>
          </li>
          <li><a href="#!">Option-1</a></li>
          <li><a href="#!">Option-2</a></li>
          <li class="no-padding">
            <ul class="collapsible collapsible-accordion">
              <li>
                <!-- Mobile and tablet menu dropdown trigger -->
                <a class="collapsible-header">Dropdown
                  <i class="material-icons right">
                    arrow_drop_down
                  </i>
                </a>
                <div class="collapsible-body">
                  <!-- Mobile and tablet dropdown content -->
                  <ul>
                    <li><a href="#!">sub-dropdown1</a></li>
                    <li><a href="#!">sub-dropdown2</a></li>
                    <li><a href="#!">sub-dropdown3</a></li>
                    <li><a href="#!">sub-dropdown4</a></li>
                  </ul>
                </div>
              </li>
            </ul>
          </li>
          <li><a href="#!">Option-3</a></li>
        </ul>
      </div>
    </div>
  </nav>
    
  <!-- Compiled and minified JavaScript -->
  <script src=
  </script>
</body>
  
</html>

chevron_right


Output:

Fixed Navbar: To make the navbar fixed, an outer wrapping “div” with the navbar-fixed class is added. This will give offset to all the other content while making the navbar fixed.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  <!--Import Google Icon Font-->
  <link href=
    rel="stylesheet">
  
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href=
  
  <script type="text/javascript" src=
  </script>
  
  <!-- Let browser know website 
      is optimized for mobile -->
  <meta name="viewport" content=
    "width=device-width, initial-scale=1.0" />
</head>
  
<body>
  <div class="navbar-fixed ">
    <nav>
      <div class="nav-wrapper green">
        <a href="#" class="brand-logo">LOGO</a>
        <a href="#" data-activates=
          "mobile-menu" class="button-collapse">
          <i class="material-icons">menu</i></a>
        <ul class="right hide-on-med-and-down">
          <li><a href="#">item1</a></li>
          <li><a href="#">item2</a></li>
          <li><a href="#">item3</a></li>
          <li><a href="#">item4</a></li>
        </ul>
        <ul class="side-nav" id="mobile-menu">
          <li><a href="#">item1</a></li>
          <li><a href="#">item2</a></li>
          <li><a href="#">item3</a></li>
          <li><a href="#">item4</a></li>
        </ul>
      </div>
    </nav>
  </div>
  <h1>GeeksforGeeks</h1>
  <h1>GeeksforGeeks</h1>
  <h1>GeeksforGeeks</h1>
  <h1>GeeksforGeeks</h1>
  <h1>GeeksforGeeks</h1>
  <h1>GeeksforGeeks</h1>
  <h1>GeeksforGeeks</h1>
  <h1>GeeksforGeeks</h1>
  
  <!-- Compiled and minified JavaScript -->
  <script src=
  </script>
</body>
  
</html>

chevron_right


Output:

Icon Links: Icons can be added into links inside the navbar. For “icon” as links, there is no need to add additional class just use the i tag.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  <!--Import Google Icon Font-->
  <link href=
    rel="stylesheet">
  
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href=
  
  <script type="text/javascript" src=
  </script>
  
  <!-- Let browser know website 
    is optimized for mobile -->
  <meta name="viewport" content=
    "width=device-width, initial-scale=1.0" />
</head>
  
<body>
  
  <nav>
    <div class="nav-wrapper green">
      <a href="#!" class="brand-logo">
        <i class="material-icons">
          account_box
        </i>Logo
      </a>
        
      <ul class="right hide-on-med-and-down">
        <li><a href="sass.html"><i class=
          "material-icons">search</i></a>
        </li>
          
        <li><a href="badges.html"><i class=
          "material-icons">add_to_photos</i></a>
        </li>
        <li><a href="collapsible.html">
          <i class="material-icons">refresh</i></a>
        </li>
        <li><a href="mobile.html"><i class=
          "material-icons">dehaze</i></a>
        </li>
      </ul>
    </div>
  </nav>
    
  <!-- Compiled and minified JavaScript -->
  <script src=
  </script>
  
</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.