Materialize CSS Navbar

Materialize CSS navbar is used to create a navigation bar. There are mainly two parts to the navbar: a logo or brand link and navigation links. These links can be placed either to the left or right of the navigation bar.

Right Aligned Links

You can place a navigation link on the right side of the Materialize navbar by assigning the right class to the unordered list i.e. <ul> element.

Example

General Syntax

    <ul  class="right"></ul>

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

Example

General Syntax

    <ul  class="left"> </ul>

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="#">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.

Example

General Syntax

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

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="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.

Example

General Syntax

    <ul>
    <li class="active"></li>
</ul>

Try It Now

Source Code

     
      <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

     
      <div class="navbar-fixed">
  <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo ">
        <img src="../images/logo.png" width="60" height="60" alt="Materialize Navbar">
      </a>
      <ul class="right hide-on-med-and-down">
        <li>
          <a href="">Sass</a>
        </li>
        <li>
          <a href="">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