Materialize CSS Navbar: Responsive Menus Made Simple

Quick answer: A Materialize navbar has two parts — a nav wrapper holding a nav-wrapper (logo left, links right) and a separate hamburger trigger with data-target that opens a sidenav on mobile. The responsive behavior is built in: links inside hide-on-med-and-down disappear below 992px while the hamburger appears, so the same markup serves desktop and phone. The complete working navbar — with dropdown menus, mobile drawer and initialization — is below in copy-paste form; the usual failure (dead hamburger) is a missing JS init, fixed in the last section.

The complete working navbar

<nav>
  <div class="nav-wrapper light-blue darken-2">
    <a href="#" class="brand-logo left">MySite</a>
    <ul class="right hide-on-med-and-down">
      <li><a href="#">Home</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">About</a></li>
    </ul>
    <a href="#" data-target="mobile-demo" class="sidenav-trigger right">
      <i class="material-icons">menu</i>
    </a>
  </div>
</nav>

<ul class="sidenav" id="mobile-demo">
  <li><a href="#">Home</a></li>
  <li><a href="#">Courses</a></li>
  <li><a href="#">About</a></li>
</ul>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    M.Sidenav.init(document.querySelectorAll('.sidenav'));
    M.Dropdown.init(document.querySelectorAll('.dropdown-trigger'));
  });
</script>

Read the structure once and every Materialize navbar variation becomes a tweak: the nav-wrapper is the inner content bar (the nav element itself carries the background through its child), brand-logo positions the site name, and the two lists — desktop links with hide-on-med-and-down, mobile sidenav with matching data-target — cover every screen. If this is your first Materialize component, the Materialize CSS tutorial builds the base page this navbar sits on.

Position and height options

Goal	How	Notes
Fixed top (default)	Nothing — nav is fixed automatically	Body gets padding-top from the framework
Sticky only after scroll	nav-wrapper + scrollspy class	Nav starts in flow, sticks later
Transparent over a hero	add transparent + box-shadow-none	Add shadow back on scroll via JS toggle
Taller nav	Override nav height line-height and padding	Full recipe in the height guide below
Bottom nav (mobile apps)	Tab demo pattern: fixed bottom ul	Icon + label rows, 5 items max

Height is the most-requested tweak: Materialize’s nav is tuned to 64px desktop / 56px mobile, and changing it means adjusting the line-height on the wrapper together with the body padding offset — the complete before-and-after is in the increase navbar height post. The default placement behavior and logo alignment rules are covered in the navbar guide that opens this series’ navigation pair.

One accessibility habit worth building now: give the hamburger trigger an aria-label describing what it opens, and keep every nav link a real anchor with an href — Materialize does not add these for you. The framework handles focus trapping inside the open sidenav, but the labels and destinations are yours to provide.

Dropdown menus inside the navbar

Dropdowns are an anchor with a dropdown-trigger class, an id, and a sibling ul.dropdown-content — hover on desktop, tap on mobile:

<a class="dropdown-trigger btn-flat" href="#" data-target="courses-dd">
  Courses <i class="material-icons right">arrow_drop_down</i>
</a>
<ul id="courses-dd" class="dropdown-content">
  <li><a href="#">Materialize</a></li>
  <li><a href="#">Bootstrap</a></li>
  <li class="divider"></li>
  <li><a href="#">All courses</a></li>
</ul>

Then init it: M.Dropdown.init(document.querySelectorAll('.dropdown-trigger')). If dropdowns must open on click instead of hover (the common mobile-usability fix), pass { constrainWidth: false, hover: false } as options. For nested sub-menus inside the mobile drawer rather than the top bar, use the accordion submenu pattern — it keeps deep trees scrollable on small screens.

Troubleshooting the dead hamburger

• No init call. M.Sidenav.init() must run after the DOM exists — 1.0.0 does not wire the trigger automatically.
• data-target mismatch. Trigger’s data-target and the sidenav ul id must be identical strings.
• Old jQuery tutorial code. $('.button-collapse').sideNav() is 0.97.x syntax and throws on 1.0.0 — replace with the M-API call above.
• Z-index war. Nav sits at 1000, sidenav at 500 — if a hero slider overlays everything, raise the slider or check your CSS did not reset nav z-index.

Those same four culprits cover the standalone sidenav, which has its own complete sidenav guide — read that one if your drawer fails outside a navbar.

Building a real site header and want it reviewed — logo scale, breakpoints, dropdown accessibility? Ampersand Academy teaches Materialize front-end one-to-one, on your own project.

Frequently asked questions