Materialize CSS Navbar

Materialize CSS Navbar

Materialize CSS navbar is used to create a navigation bar. It consists of mainly two parts such as a logo or brand link and

Right Aligned Links

Navigation link can be placed right side of the navbar easily by placing the .right class to the <ul> element base class.

General Syntax

<ul  class="right"></ul>    
Try It Now

Source Code

Download
<nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo">
      <img src="../../images/logo.png" width="60" height="60" alt="Brand Logo">
    </a>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li><a href="#!">HTML5 </a></li>
      <li><a href="#!">CSS3 </a></li>
      <li><a href="#!">Material Design</a></li>
    </ul>
  </div>
</nav>    
Try it yourself

Source Code : Output

Left Aligned Links

To place the navigation link on the left side of the navbar, add the .left class to the <ul> element base class.

General Syntax

<ul  class="left"> </ul>    
Try It Now

Source Code

Download
<nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo right">Logo</a>
      <ul id="nav-mobile" class="left hide-on-med-and-down">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </nav>    
Try it yourself

Source Code : Output

Centering the logo

To center the brand logo, just add the .center class to the logo container i.e <a> element base class having class .brand-logo.

General Syntax

<a href="#" class="brand-logo center">
 	<img src="..." alt="center the image">
 </a>    
Try It Now

Source Code

Download
<nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo center">
        <img src="" width="270" height="60" alt="Logo">
      </a>
      <ul id="nav-mobile" class="hide-on-med-and-down">
        <li><a href="#!">Home</a></li>
        <li><a href="#!">About</a></li>
        <li><a href="#!">Services</a></li>
      </ul>
    </div>
</nav>    
Try it yourself

Source Code : Output

Active Items

To create an active link, use .active class in the child element i.e (<li>) base class.

General Syntax

<ul>
    <li class="active"></li>
</ul>    
Try It Now

Source Code

Download
<nav>
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo center">Logo</a>
    <ul id="nav-mobile" class="left hide-on-med-and-down">
      <li><a href="#">HTML5</a></li>
      <li><a href="#">CSS3</a></li>
      <li class="active"><a href="#">JavaScript</a></li>
    </ul>
  </div>
</nav>    
Try it yourself

Source Code : Output

Fixed Navbar

To create a fixed navbar, add an outer wrapper div and assign it .navbar-fixed class.This will offset your other content while making your nav fixed.

General Syntax

<div class="navbar-fixed">
  <nav>
    <div class="nav-wrapper"></div>
  </nav>
</div>    
Try It Now

Source Code

Download
<div class="navbar-fixed">
    <nav>
      <div class="nav-wrapper">
        <a href="#!" class="brand-logo">Logo</a>
        <ul class="right hide-on-med-and-down">
          <li><a href="sass.html">Sass</a></li>
          <li><a href="badges.html">Components</a></li>
        </ul>
      </div>
    </nav>
  </div>    
Try it yourself

Source Code : Output

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS