Open In App

Materialize CSS Navbars

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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




<!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>


Output:

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

HTML




<!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>


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




<!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>


Output:

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

HTML




<!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>


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




<!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>


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




<!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>


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




<!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>


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




<!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>


Output:



Last Updated : 10 Jul, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads