How to create Materialize Navbar

The navigation bar (navbar) that generally acts as the header in a website, is an important part to deal with. Creating navbars with various options is easy as using Materialize framework.

The navbar normally has two parts:

  • The placement of brand name or logo
  • Navigational links e.g. products, services, about, contact pages

The Materialize navbar is created by HTML 5 <nav> tag with container (recommended div) with nav-wrapper class.

For creating responsive navbar with hamburger icon, you may use the built-in class button-collapse for that. The navbar may contain buttons, search box, and links/logo can be aligned left or right easily.

The next section shows all the above mentioned examples with live demos and code, so keep reading.

A navbar with logo and navigational links example

In this example, a navbar is created with logo/slogan towards the left side and navigational links to the right side. The navigational links disappear on medium and small devices while only the logo keeps on displaying. This is done by using the hide-on-med-and-down class. Have a look at the code and demo online:

materialize navbar

See online demo and code

The Code:

Links left aligned and logo right aligned example

If you want to align logo to the right and nav links towards the left side then use the right class in the <a> tag containing log/slogan and left class in the <ul> containing navigation links. See the example:

materialize navbar right

See online demo and code

The markup:

Similarly, for aligning the logo centrally, replace the right class in above example by center class.

<a href=”#” class=”brand-logo center”>Slogan</a>

The navbar example with hamburger icon for mobile

In today’s mobile world where more and more people are visiting websites from the smart phones, your website overall and navbar should adapt according to the user’s screen. Generally, this is desired to display hamburger icon for the navbar. As this is tapped, the navigational links open as offset menu.

For adding this capability in navbar based on Materialize, you need to follow certain steps. First, have a look at the example below. If you are on the desktop then resize the browser to the smaller size until hamburger icon appears:

materialize navbar mobile

See online demo and code

The markup:

For initializing the collapsible button for mobile, you need to use the following JavaScript code:

In the markup section, you can see the navigational links are used twice; one as in above example that hides in medium and small devices by using the hide-on-med-and-down class in <ul> containing links.

The same set of links (or links that you want to display on mobile) are also placed in another <ul> with side-nav class.

After the logo markup, the following line is used for the hamburger icon:

<a href=”#” data-activates=”mobile-demo” class=”button-collapse”><i class=”material-icons”>menu</i></a>

Finally, a little jQuery code to make it work. In the example page, you can also see that the materialize CSS and jQuery library are also included in the <head> section.

How to change the default color of materialize navbar?

In your Materialize framework based projects, you most probably require using the navbar with a different color than default – to match it to the rest of design.

For modifying the default navbar color, you may override the nav-wrapper class. Add this class in your external CSS file or in the <style> section. There, you may provide the background color as you want. See the example below with custom colored navbar:

materialize navbar color

See online demo and code

The CSS:

Get the complete code including the markup from the demo page.

An extended navbar with tabs example

If you require navbar with more components than logo and navigation links then extend the navbar with more height by using nav-extended class in the main <nav> tag.

After that, you may use tab component markup for including tabs in the navbar. Have a look at the demo and code online. I used another custom color for this demo for the navbar:

materialize navbar extended

See online demo and code

The CSS:

The markup:

The navbar with active item example

For making the current menu item/navigation link active to let the users know which page they are on, use the active class in the <li> tag as shown in the example below:

materialize navbar active

See online demo and code

For example:

<li class=”active”><a href=””>jQuery</a></li>

See the complete code on the example page.

A navbar with dropdown menu demo

If you require adding a dropdown menu, use the markup for the dropdown menu and inside the <nav> tag, use an element e.g. a button to trigger the dropdown.

materialize navbar dropdown

See online demo and code

The markup:

A little CSS for customizing the color of navbar:

Using search in navbar example

The following example shows using the search bar in the navbar component. The search icon appears and as a user clicks it, the search textbox displays that spans across the navbar. Have a look at the code and output:

navbar search

See online demo and code

Using the search box with logo and navigation links

Rather than taking the full width for the search box, you may also create a small search element that displays with logo/slogan and navigation links in the navbar.

For that, use the markup for search box inside another <li> element that is used for creating navigation links. Have a look:

navbar search 2

See online demo and code

The markup:

The navbar with icons for links demo

The following example shows using icons rather than text for navigation links in the navbar. The material icons are included in the <head> section that is used in the markup for navbar:

navbar icons

See online demo and code

The markup:


You can see the output by visiting the example page.