Materialize CSS Navbar

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

Try it now

Source Code

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

Try it now

Source Code

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

Try it now

Source Code

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

Try it now

Source Code

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

Try it now

Source Code

Try it now