Tutorial 07 · Components

Responsive Navbar

Fixed glass navbar, hamburger wiring and theme toggle — no extra JS.

12 minBeginnerlucUI 2 · v2.1.3

Objectives

  • Use .luc-navbar + .luc-navbar-container.
  • Wire hamburger via lucUI.js (.luc-navbar-links.active).
  • Add theme toggle.

Steps

Markup

navbar.html
<nav class="luc-navbar" aria-label="Primary">
  <div class="luc-navbar-container">
    <a class="luc-navbar-brand" href="/">lucUI</a>
    <div class="luc-navbar-links" id="nav">
      <a class="luc-navbar-link" href="#">Docs</a>
    </div>
    <button class="luc-theme-toggle" data-luc-theme-toggle>…</button>
    <button class="luc-navbar-toggle" aria-controls="nav" aria-expanded="false">…</button>
  </div>
</nav>

Behavior

lucUI.js toggles active, manages aria-expanded, outside-click and Escape.

Body padding

Add body{padding-top:96px} — navbar is fixed 82px.

Live mini

lucUI
Docs

Exercise

Add a search input .luc-navbar-search and verify 320px collapse.

← Previous Next →