Materialize CSS | Navbar

Materialize CSS | navbar is completely supported HTML nav tag.It has basically two parts. The first part contains the brand logo or brand link and the second one denotes navigation links. These navigation links can be placed either left or right.

Right Aligned Links

To place nav link right side of the navbar, add .right class to the <ul> element base class.

General Syntax

      <nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo">
      <img src="../images/logo.png" width="70" height="60" alt="Brand Logo" />
    </a>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li><a href="#!">Nav Link</a></li>
    </ul>
  </div>
</nav>
    
Try it now

Source Code

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

Source Code: Output

Left Aligned Links

To place nav link left side of the navbar, assign .left class to the <ul> element base class.

General Syntax

      <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="#">Nav Link</a></li>
    </ul>
  </div>
</nav>
    
Try it now

Source Code

          <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="#">PHP</a></li>
      <li><a href="#">JQuery</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>
</nav>
        
Try it now

Source Code: Output

Centering the logo

To center the brand logo, just add the .center class to the element base class having class .brand-logo.

General Syntax

      <nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo center">
      <img src="../images/logo.png" width="60" height="60" alt="Brand Logo" />
    </a>
    <ul id="nav-mobile" class="left hide-on-med-and-down">
      <li><a href="#!">Nav Link</a></li>
    </ul>
  </div>
</nav>
    
Try it now

Source Code

          <nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo center">
      <img src="../images/logo.png" width="60" height="60" alt="Brand 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><a href="#!">Material Design</a></li>
    </ul>
  </div>
</nav>
        
Try it now

Source Code: Output

Active Navbar Link

To create active link item assign .active class to the child element(<li>) base class.

General Syntax

      <nav>
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo center">Logo</a>
    <ul class="left hide-on-med-and-down">
      <li class="active"><a href="#">Materialize CSS</a></li>
    </ul>
  </div>
</nav>
    
Try it now

Source Code

          <nav>
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo center">Logo</a>
    <ul class="left hide-on-med-and-down">
      <li><a href="#">HTML5</a></li>
      <li><a href="#">CSS3</a></li>
      <li class="active"><a href="#">Materialize CSS</a></li>
    </ul>
  </div>
</nav>
        
Try it now

Source Code: Output

Fixed Navbar

To create a fixed navbar, just add an out wrapper div having class .navbar-fixed.

General Syntax

      <div class="navbar-fixed"></div>
    
Try it now

Source Code

          <div class="navbar-fixed">
  <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">
        <img src="../images/logo.png" width="70" height="60" alt="Brand Logo" />
      </a>
      <ul class="right hide-on-med-and-down">
        <li><a href="#!">HTML5</a></li>
        <li><a href="#!">CSS3</a></li>
        <li><a href="#!">Javascript</a></li>
      </ul>
    </div>
  </nav>
</div>
        
Try it now
Web Tutorials
Materialize CSS | Navbar
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4