Navbar

Default and rounded navbars

The default navbar has square corners and no border. Use appbar for the structured app-bar layout shown throughout this page.

Default

<nav class="navbar appbar" aria-label="Default navbar example">
  <div class="nav-wrapper">
    <a href="index.html" class="brand-logo">Workspace</a>
    <ul class="ml-auto">
      <li><a href="cards.html">Cards</a></li>
      <li><a href="timeline.html">Timeline</a></li>
    </ul>
  </div>
</nav>

Rounded with padding

Add navbar-rounded for 16px corners, 4px of padding around the inner bar, and a subtle shadow. The navigation controls retain their usual height.

<nav class="navbar appbar navbar-rounded" aria-label="Rounded navbar example">
  <div class="nav-wrapper">
    <a href="index.html" class="brand-logo">Workspace</a>
    <ul class="ml-auto">
      <li><a href="cards.html">Cards</a></li>
      <li><a href="timeline.html">Timeline</a></li>
    </ul>
  </div>
</nav>

For an optional outline, add appbar-bordered. Existing navbars using that class keep their layout and border.

<nav class="navbar appbar appbar-bordered navbar-rounded">...</nav>

There are 2 main parts of the navbar. A logo or brand link, and the navigations links. You can align these links to the left or right.

For crowded navigation, add navbar-scroll to keep one row with horizontal overflow, or navbar-wrap to let links flow onto additional rows.

Combine a logo, a visual separator, compact floating icon buttons, and a final call-to-action. The ml-auto class keeps the action group fixed to the right edge.

Materialize Design system

Create

Many items: wrap or horizontal scroll

Choose navbar-wrap when every link should remain visible, or navbar-scroll when the bar should stay compact.

Wrap

Horizontal scroll

<nav class="navbar appbar navbar-scroll">
  <div class="nav-wrapper">
    <a href="#" class="brand-logo" aria-label="Materialize home">
      <img class="brand-logo-image" src="images/materialize.svg" alt="">
      <span>Materialize</span>
    </a>
    <span class="nav-separator" aria-hidden="true"></span>
    <span class="nav-context hide-on-med-and-down">Design system</span>
    <ul class="nav-actions ml-auto">
      <li><a class="btn-floating" aria-label="Search"><i class="material-icons">search</i></a></li>
      <li class="hide-on-small-only"><a class="btn-floating" aria-label="Notifications"><i class="material-icons">notifications</i></a></li>
      <li class="nav-separator hide-on-small-only" aria-hidden="true"></li>
      <li><a class="btn-floating" aria-label="Pinned items"><i class="material-icons">push_pin</i></a></li>
      <li class="hide-on-med-and-down"><a class="btn filled rounded icon-right appbar-create">Create <i class="material-icons">add</i></a></li>
    </ul>
  </div>
</nav>

Scrolling styles are included in kmaterialize. Initialize the edge fades with the library helper; call the returned function when removing the navbar.

import { initNavbarScroll } from 'kmaterialize';
const dispose = initNavbarScroll(document.querySelector('.navbar-scroll'));
// When unmounting: dispose();

Links sit at the left by default, since .nav-wrapper is a flex row and they're the first thing after the logo in source order. To push the logo itself to the right instead and keep the links at the left, put the ul before the logo in the markup and add ml-auto to the logo.

<nav class="navbar appbar">
  <div class="nav-wrapper">
    <ul id="nav-mobile" class="hide-on-med-and-down">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <li><a href="collapsible.html">JavaScript</a></li>
    </ul>
    <a href="#" class="brand-logo ml-auto"><img class="brand-logo-image" src="images/materialize.svg" alt="" /><span>Materialize</span></a>
  </div>
</nav>

The logo will center itself on medium and down screens, but if you want the logo to always be centered, add the center class to your <a class="brand-logo"></a>. You will have to make sure yourself that links do not overlap if you use this.

<nav class="navbar appbar">
  <div class="nav-wrapper nav-wrapper-centered">
    <a href="#" class="brand-logo center"><img class="brand-logo-image" src="images/materialize.svg" alt="" /><span>Materialize</span></a>
    <ul id="nav-mobile" class="left hide-on-med-and-down">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <li><a href="collapsible.html">JavaScript</a></li>
    </ul>
  </div>
</nav>

Add active class to your li tags to denote the current page.

<nav class="navbar appbar">
  <div class="nav-wrapper nav-wrapper-centered">
    <a href="#!" class="brand-logo center"><img class="brand-logo-image" src="images/materialize.svg" alt="" /><span>Materialize</span></a>
    <ul class="left hide-on-med-and-down">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <li class="active"><a href="collapsible.html">JavaScript</a></li>
    </ul>
  </div>
</nav>

To add extended components to the navbar, add the class nav-extended to the outer nav tag. This will allow your navbar height to be variable. Then you can just include a tabs component inside the nav-wrapper.

<nav class="navbar appbar nav-extended">
  <div class="nav-wrapper">
    <a href="#" class="brand-logo"><img class="brand-logo-image" src="images/materialize.svg" alt="" /><span>Materialize</span></a>
    <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
    <ul id="nav-mobile" class="ml-auto hide-on-med-and-down">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <li><a href="collapsible.html">JavaScript</a></li>
    </ul>
  </div>
  <div class="nav-content">
    <ul class="tabs tabs-transparent">
      <li class="tab"><a href="#test1">Test 1</a></li>
      <li class="tab"><a class="active" href="#test2">Test 2</a></li>
      <li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
      <li class="tab"><a href="#test4">Test 4</a></li>
    </ul>
  </div>
</nav>

<ul class="sidenav" id="mobile-demo">
  <li><a href="sass.html">Sass</a></li>
  <li><a href="badges.html">Components</a></li>
  <li><a href="collapsible.html">JavaScript</a></li>
</ul>

<div id="test1">Test 1</div>
<div id="test2">Test 2</div>
<div id="test3">Test 3</div>
<div id="test4">Test 4</div>

To make the navbar fixed, you have to add an outer wrapping div with the class navbar-fixed. This will offset your other content while making your nav fixed. You can adjust the height of this outer div to change how much offset is on your content.

<div class="navbar-fixed">
  <nav class="navbar appbar">
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo"><img class="brand-logo-image" src="images/materialize.svg" alt="" /><span>Materialize</span></a>
      <ul class="ml-auto 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>

Use navbar-tiny for a slim full-width bar with quick links or an announcement. Add navbar-tiny-top to pin it to the top, or navbar-tiny-bottom to pin it to the bottom. Without either placement class, it stays in normal page flow.

Add navbar-tiny-dismissible for a close icon on the right. Closing hides the entire bar until you call open(); scrolling does not bring a dismissed bar back.

Open the tiny navbar example, or use the controls below to try top, bottom, and in-page placement.

<nav class="navbar navbar-tiny navbar-tiny-bottom navbar-tiny-dismissible" aria-label="Quick links">
  <div class="nav-wrapper">
    <p class="navbar-tiny-content">New components are ready to explore.</p>
    <ul>
      <li><a href="#guide">Guide</a></li>
      <li><a href="#changes">What’s new</a></li>
    </ul>
  </div>
</nav>

import { AutoInit, TinyNavbar } from 'kmaterialize';
import 'kmaterialize/dist/css/materialize.css';

AutoInit();
const navbar = TinyNavbar.getInstance(document.querySelector<HTMLElement>('.navbar-tiny')!);
navbar.setPosition('bottom'); // 'top', 'bottom', or 'inline'
navbar.close();
navbar.open();
// When unmounting: navbar.destroy();

Options

For manual initialization, add no-autoinit and use TinyNavbar.init(). Explicit options override the placement and dismissible classes.

const navbar = TinyNavbar.init(document.querySelector<HTMLElement>('#quick-links')!, {
  position: 'bottom',
  dismissible: true,
  closeLabel: 'Close quick links',
  returnFocus: document.querySelector<HTMLElement>('#show-navbar'),
  onClose: instance => console.log('Closed', instance.isOpen)
});

The defaults are position: 'inline', dismissible: false, and closeLabel: 'Close navigation', unless the corresponding classes are present. The close button supports mouse, touch, Enter, and Space. Focus moves to returnFocus if provided, or to an available control outside the closed navbar. Include the Material Icons font for the close icon.

Fixed bars sit above the page. Leave space in your content at the chosen edge, as the live example does. Set --navbar-tiny-offset to offset the bar from that edge; device safe-area insets are included. Long text and links wrap on smaller screens.

Add navbar-hide-on-scroll to a navbar and run AutoInit(). It slides away when scrolling down, returns when scrolling up, and stays visible at the top. This follows the interaction demonstrated by Headroom.js, implemented directly in kmaterialize without another dependency.

Scroll inside this preview to try it, or open the full-page example.

<nav class="navbar appbar navbar-hide-on-scroll">
  <div class="nav-wrapper">
    <a href="#overview" class="brand-logo">Explore</a>
    <ul class="ml-auto">
      <li><a href="#stories">Stories</a></li>
    </ul>
  </div>
</nav>
<main id="overview">…</main>

import { AutoInit } from 'kmaterialize';
import 'kmaterialize/dist/css/materialize.css';

AutoInit();

The class uses sticky positioning and preserves the navbar’s space. Place the navbar alongside the page content within a parent that spans the scroll area. It also works on the navbar inside an existing navbar-fixed wrapper. Avoid wrapping a sticky navbar in a parent that is only as tall as the bar itself.

Keyboard focus reveals the navbar immediately and keeps it visible while its controls are in use. Reduced-motion preferences disable the slide animation. Wrapped and extended navbars hide using their full current height.

Optional settings

import { NavbarAutoHide } from 'kmaterialize';

// For manual initialization, also add no-autoinit to the navbar.
const navbar = NavbarAutoHide.init(document.querySelector<HTMLElement>('#my-navbar')!, {
  tolerance: 4,     // Pixels in one direction before hiding or showing (default: 4)
  offset: 0,        // Stay visible this far from the top (default: 0)
  scrollTarget: null // Page scroll; use an HTMLElement for a scrollable panel
});

// When unmounting:
navbar.destroy();

Set tolerance: 0 to react to the first pixel of scrolling. For a scrollable panel, place the navbar and its content inside that panel and pass the panel as scrollTarget. Use --navbar-hide-offset to position the bar below another fixed header. For in-page anchor links, set the scroll container’s scroll-padding-top to leave room for the visible navbar.

To add a navbar dropdown menu, add the ul dropdown structure into the page. Then, add an element to trigger the dropdown menu. Make sure to supply the id of the dropdown structure to the data-target attribute of the dropdown trigger.

<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
</ul>
<nav class="navbar appbar">
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo"><img class="brand-logo-image" src="images/materialize.svg" alt="" /><span>Materialize</span></a>
    <ul class="ml-auto hide-on-med-and-down">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
    </ul>
  </div>
</nav>

To activate the dropdown menu, insert this line of code into your JavaScript file. You can read more about the Dropdown component here.


  document.addEventListener('DOMContentLoaded', function() {
    const elems = document.querySelectorAll('.dropdown-trigger');
    const instances = Dropdown.init(elems, {
      // specify options here
    });
  });

Trigger dropdown menu on click

By default, the dropdown menu is activated by hovering over the dropdown trigger. To activate the dropdown menu on click, pass { hover: false } into the above dropdown() function

You can add icons into links. For icon only links you don't need any additional class. Just pop the i tag in and it will work.

<nav class="navbar appbar">
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo"><img class="brand-logo-image" src="images/materialize.svg" alt="" /><span>Materialize</span></a>
    <ul class="ml-auto hide-on-med-and-down">
      <li><a href="sass.html"><i class="material-icons">search</i></a></li>
      <li><a href="badges.html"><i class="material-icons">view_module</i></a></li>
      <li><a href="collapsible.html"><i class="material-icons">refresh</i></a></li>
      <li><a href="mobile.html"><i class="material-icons">more_vert</i></a></li>
    </ul>
  </div>
</nav>

For adding an icon to a text link you need to add either a left or right class to the icon depending on where you want the icon to be.

<nav class="navbar appbar">
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo"><img class="brand-logo-image" src="images/materialize.svg" alt="" /><span>Materialize</span></a>
    <ul class="ml-auto hide-on-med-and-down">
      <li><a href="sass.html"><i class="material-icons left">search</i>Link with Left Icon</a></li>
      <li><a href="badges.html"><i class="material-icons right">view_module</i>Link with Right Icon</a></li>
    </ul>
  </div>
</nav>

You can add buttons into links. For buttons you don't need any additional class. Just pop the .btn class on the a tag.

<nav class="navbar appbar">
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo"><img class="brand-logo-image" src="images/materialize.svg" alt="" /><span>Materialize</span></a>
    <ul class="ml-auto hide-on-med-and-down">
      <li><a class="waves-effect waves-light btn">Button</a></li>
      <li><a class="waves-effect waves-light btn">Button <i class="material-icons right">cloud</i></a></li>
      <li><a class="waves-effect waves-light btn-large">Large Button</a></li>
    </ul>
  </div>
</nav>

Halfway FAB in Extended Navbar

Add a halfway FAB to your extended navbar.

<nav class="navbar appbar nav-extended">
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo"><img class="brand-logo-image" src="images/materialize.svg" alt="" /><span>Materialize</span></a>
    <ul class="ml-auto hide-on-med-and-down">
      <li><a>A link</a></li>
      <li><a>A second link</a></li>
      <li><a>A third link</a></li>
    </ul>
  </div>
  <div class="nav-content">
    <span class="nav-title">Title</span>
    <a class="btn-floating btn-large halfway-fab waves-effect waves-light">
      <i class="material-icons">add</i>
    </a>
  </div>
</nav>

You can add a search form in the navbar.

<nav class="navbar appbar">
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo"><img class="brand-logo-image" src="images/materialize.svg" alt=""><span>Materialize</span></a>
    <div class="toolbar navbar-search-toolbar">
      <div class="toolbar-group">
        <div class="toolbar-search">
          <button class="toolbar-search-toggle" type="button" aria-label="Open search"><i class="material-icons">search</i></button>
          <input class="toolbar-search-input" type="search" placeholder="Search..." aria-label="Search">
        </div>
      </div>
    </div>
  </div>
</nav>

When your nav bar is resized, you will see that the links on the right turn into a hamburger icon . Take a look at the example below to get this functionality. Add the entire sidenav-trigger line to your nav.

<nav class="navbar appbar navbar-scroll">
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo"><img class="brand-logo-image" src="images/materialize.svg" alt="" /><span>Materialize</span></a>
    <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
    <ul class="ml-auto hide-on-med-and-down">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <li><a href="collapsible.html">Javascript</a></li>
      <li><a href="mobile.html">Mobile</a></li>
    </ul>
  </div>
</nav>

<ul class="sidenav" id="mobile-demo">
  <li><a href="sass.html">Sass</a></li>
  <li><a href="badges.html">Components</a></li>
  <li><a href="collapsible.html">Javascript</a></li>
  <li><a href="mobile.html">Mobile</a></li>
</ul>

Initialization

After including the sidenav-trigger line into your navbar, all you have to do now initialize the plugin. This example below assumes you have not modified the classes in the above example. In the case that you have, just change the selector in the line below to match it.


  document.addEventListener('DOMContentLoaded', function() {
    const elems = document.querySelectorAll('.sidenav');
    const instances = Sidenav.init(elems, options);
  });

Default and Rounded
Right Aligned
Left Aligned
Center Logo
Active Items
Navbar with Tabs
Fixed Navbar
Tiny Navbar
Hide on Scroll
Dropdown Menu
Icon Links
Buttons
Search Bar
Mobile Collapse

Materialize is a modern responsive CSS framework based on Material Design by Google.

Default and rounded navbars

Default

Rounded with padding

Branded app bar with right actions

Many items: wrap or horizontal scroll

Left Aligned Links

Centering the logo

Active Items

Extended Navbar with Tabs

Fixed Navbar

Tiny navbar

Options

Hide on scroll

Optional settings

Icon Links

Buttons

Halfway FAB in Extended Navbar

Search Bar

Mobile Collapse Button

Initialization

Navbar

Materialize is a modern responsive CSS framework based on Material Design by Google.

Default and rounded navbars

Default

Rounded with padding

Branded app bar with right actions

Many items: wrap or horizontal scroll

Left Aligned Links

Centering the logo

Active Items

Extended Navbar with Tabs

Fixed Navbar

Tiny navbar

Options

Hide on scroll

Optional settings

Navbar Dropdown Menu

Trigger dropdown menu on click

Icon Links

Buttons

Halfway FAB in Extended Navbar

Search Bar

Mobile Collapse Button

Initialization