Materialize CSS Navbars - GeeksforGeeks

10 Jul, 2020
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="https://fonts.googleapis.com/icon?family=Material+Icons"        rel="stylesheet">      <!-- Compiled and minified CSS -->    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js">    </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="https://www.geeksforgeeks.org/materialize-css-tables/?ref=rp">                        Table                    </a>                </li>                                  <li>                    <a href="https://www.geeksforgeeks.org/materialize-css-colors/?ref=rp">                        Colors                    </a>                </li>                                  <li><a href="https://www.geeksforgeeks.org/materialize-css-typography/?ref=rp">                        Typography                    </a>                </li>            </ul>        </div>    </nav>      <!-- Compiled and minified JavaScript -->    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">    </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="https://fonts.googleapis.com/icon?family=Material+Icons"        rel="stylesheet">      <!-- Compiled and minified CSS -->    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">      <script type="text/javascript" src=        "https://code.jquery.com/jquery-2.1.1.min.js">    </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="https://www.geeksforgeeks.org/materialize-css-tables/?ref=rp">                        Table                    </a>                </li>                                  <li>                    <a href="https://www.geeksforgeeks.org/materialize-css-colors/?ref=rp">                        Colors                    </a>                </li>                                  <li>                    <a href="https://www.geeksforgeeks.org/materialize-css-typography/?ref=rp">                        Typography                    </a>                </li>            </ul>        </div>    </nav>      <!-- Compiled and minified JavaScript -->    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">    </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="https://fonts.googleapis.com/icon?family=Material+Icons"        rel="stylesheet">      <!-- Compiled and minified CSS -->    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js">    </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="https://www.geeksforgeeks.org/materialize-css-tables/?ref=rp">                        Table                    </a>                </li>                                  <li><a href="https://www.geeksforgeeks.org/materialize-css-colors/?ref=rp">                        Colors                    </a>                </li>                                  <li><a href="https://www.geeksforgeeks.org/materialize-css-typography/?ref=rp">                        Typography                    </a>                </li>            </ul>        </div>    </nav>      <!-- Compiled and minified JavaScript -->    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">    </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="https://fonts.googleapis.com/icon?family=Material+Icons"        rel="stylesheet">      <!-- Compiled and minified CSS -->    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js">    </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="https://www.geeksforgeeks.org/materialize-css-tables/?ref=rp">                        Table                    </a>                </li>                                  <li class="active">                    <a href="https://www.geeksforgeeks.org/materialize-css-colors/?ref=rp">                        Colors                    </a>                </li>                                  <li><a href="https://www.geeksforgeeks.org/materialize-css-typography/?ref=rp">                        Typography                    </a>                </li>            </ul>        </div>    </nav>      <!-- Compiled and minified JavaScript -->    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">    </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="https://fonts.googleapis.com/icon?family=Material+Icons"        rel="stylesheet">      <!-- Compiled and minified CSS -->    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js">    </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="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">    </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="https://fonts.googleapis.com/icon?family=Material+Icons"     rel="stylesheet">    <!-- Compiled and minified CSS -->  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js">  </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="http://lorempixel.com/output/abstract-q-c-640-480-10.jpg" alt="">              </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="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">  </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="https://fonts.googleapis.com/icon?family=Material+Icons"    rel="stylesheet">    <!-- Compiled and minified CSS -->  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js">  </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="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">  </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="https://fonts.googleapis.com/icon?family=Material+Icons"    rel="stylesheet">    <!-- Compiled and minified CSS -->  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js">  </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="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">  </script>  </body>  </html>
Output:
Materialize-CSS
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills