Navbar

Responsive navbar with brand, plain links, dropdown groups, full-width mega menus, and a slide-in mobile drawer. Auto-initialized on data-wf-navbar with a configurable breakpoint. Supports dark, primary, and transparent color themes, and sticky positioning.

Quick Start

The minimal structure is nav.wf-navbar[data-wf-navbar] → div.wf-navbar-inner containing a brand, a hamburger toggle, and a div.wf-navbar-menu[data-wf-navbar-menu] that holds wf-navbar-start and wf-navbar-end sections. Click the Products link below to see the dropdown.

<nav class="wf-navbar" data-wf-navbar>
  <div class="wf-navbar-inner">

    <!-- Brand -->
    <a class="wf-navbar-brand" href="/">
      <div class="wf-navbar-brand-logo"><i class="icon wojo" aria-hidden="true"></i></div>
      Wojo
    </a>

    <!-- Mobile hamburger -->
    <button class="wf-navbar-hamburger" data-wf-navbar-toggle
            aria-expanded="false" aria-label="Open menu">
      <i class="icon menu" aria-hidden="true"></i>
    </button>

    <!-- Drawer -->
    <div class="wf-navbar-menu" data-wf-navbar-menu>

      <!-- Mobile-only drawer header -->
      <div class="wf-navbar-menu-header">
        <a class="wf-navbar-brand" href="/">...</a>
        <button class="wf-navbar-hamburger" data-wf-navbar-toggle aria-expanded="false"
                aria-label="Close menu">
          <i class="icon cancel" aria-hidden="true"></i>
        </button>
      </div>

      <!-- Left items -->
      <div class="wf-navbar-start">
        <a class="wf-navbar-item" href="/" aria-current="page">Home</a>
        <a class="wf-navbar-item" href="/features">Features</a>
      </div>

      <!-- Right items -->
      <div class="wf-navbar-end">
        <a class="wf-navbar-item" href="/login">Sign in</a>
        <a class="wf-btn wf-btn-sm" href="/signup">Get started</a>
      </div>

    </div>
  </div>
</nav>

Dropdown Group

Wrap a trigger button and a div.wf-navbar-dropdown in a div.wf-navbar-group[data-wf-navbar-group] . The script toggles an is-open class on the group and sets aria-expanded on the trigger. On desktop the dropdown is absolutely positioned below the trigger; on mobile it expands inline via a max-height transition. Add wf-navbar-chevron to a chevron icon inside the trigger to rotate it when open. The script auto-flips to wf-navbar-group--end (right-aligned panel) when the default left-aligned position would overflow the viewport.

<div class="wf-navbar-group" data-wf-navbar-group>

  <!-- Trigger -->
  <button class="wf-navbar-item" aria-expanded="false">
    Company
    <i class="icon chevron down wf-navbar-chevron" aria-hidden="true"></i>
  </button>

  <!-- Panel -->
  <div class="wf-navbar-dropdown">
    <div>
      <a class="wf-navbar-dd-item" href="/about">
        <i class="icon user" aria-hidden="true"></i> About
      </a>
      <a class="wf-navbar-dd-item" href="/blog">
        <i class="icon mail" aria-hidden="true"></i> Blog
      </a>
      <hr class="wf-navbar-dd-divider">
      <a class="wf-navbar-dd-item wf-active" href="/contact">Contact</a>
    </div>
  </div>

</div>

Mega Menu

Replace wf-navbar-dropdown with wf-navbar-mega and add wf-navbar-group--mega to the group to make a full-width panel that spans the entire navbar. Inside the panel, use wf-navbar-mega-inner as a centred grid container, wf-navbar-mega-col for each column, and wf-navbar-mega-item for each link. Each item can include an icon container ( wf-navbar-mega-icon ) and a text block ( wf-navbar-mega-content ) with a title and description. Add wf-navbar-mega-col--feature to give a column a subtle highlighted background. On mobile the mega panel collapses inline like a dropdown.

<div class="wf-navbar-group wf-navbar-group--mega" data-wf-navbar-group>

  <button class="wf-navbar-item" aria-expanded="false">
    Solutions
    <i class="icon chevron down wf-navbar-chevron" aria-hidden="true"></i>
  </button>

  <div class="wf-navbar-mega">
    <div class="wf-navbar-mega-inner">

      <!-- Regular column -->
      <div class="wf-navbar-mega-col">
        <p class="wf-navbar-mega-label">Platform</p>
        <a class="wf-navbar-mega-item" href="/analytics">
          <div class="wf-navbar-mega-icon">
            <i class="icon chart bar" aria-hidden="true"></i>
          </div>
          <div class="wf-navbar-mega-content">
            <span class="wf-navbar-mega-title">Analytics</span>
            <span class="wf-navbar-mega-desc">Real-time data & insights</span>
          </div>
        </a>
        <a class="wf-navbar-mega-item" href="/reports">
          <div class="wf-navbar-mega-icon">
            <i class="icon file text" aria-hidden="true"></i>
          </div>
          <div class="wf-navbar-mega-content">
            <span class="wf-navbar-mega-title">Reports</span>
            <span class="wf-navbar-mega-desc">Scheduled & ad-hoc reports</span>
          </div>
        </a>
      </div>

      <!-- Highlighted feature column (hidden on mobile) -->
      <div class="wf-navbar-mega-col wf-navbar-mega-col--feature">
        <p class="wf-navbar-mega-label">What’s new</p>
        <a class="wf-navbar-mega-item" href="/changelog">
          <div class="wf-navbar-mega-content">
            <span class="wf-navbar-mega-title">Changelog</span>
            <span class="wf-navbar-mega-desc">Latest releases</span>
          </div>
        </a>
      </div>

    </div>
  </div>

</div>

Mobile Drawer

Below the breakpoint (default 768 px) the hamburger button appears and the wf-navbar-menu becomes a fixed, slide-in side drawer. The hamburger button carries data-wf-navbar-toggle ; place a second one inside wf-navbar-menu-header as a close button. The script appends a wf-navbar-backdrop to <body> while the drawer is open — clicking the backdrop closes the drawer. Opening the menu also swaps the hamburger icon to a cancel icon automatically.

<!-- Hamburger (inside wf-navbar-inner, hidden on desktop) -->
<button class="wf-navbar-hamburger"
        data-wf-navbar-toggle
        aria-expanded="false"
        aria-label="Open menu">
  <i class="icon menu" aria-hidden="true"></i>
</button>

<!-- Slide-in drawer -->
<div class="wf-navbar-menu" data-wf-navbar-menu>

  <!-- Sticky header inside the drawer -->
  <div class="wf-navbar-menu-header">
    <a class="wf-navbar-brand" href="#">Brand</a>
    <button class="wf-navbar-hamburger" data-wf-navbar-toggle aria-label="Close menu">
      <i class="icon cancel" aria-hidden="true"></i>
    </button>
  </div>

  <div class="wf-navbar-start">
    <!-- nav items, groups, etc. -->
  </div>
  <div class="wf-navbar-end">
    <!-- actions, sign-in, etc. -->
  </div>

</div>

<!-- Backdrop is injected by the script; no markup needed -->

Themes

Three built-in color themes are available as modifier classes on the wf-navbar root element. The default theme inherits --wf-surface as its background. All theme modifiers work by overriding the CSS custom properties on the root, so they automatically apply to all nested panels, items, and the mobile drawer.

<!-- Dark -->
<nav class="wf-navbar wf-navbar--dark" data-wf-navbar>...</nav>

<!-- Primary (brand color) -->
<nav class="wf-navbar wf-navbar--primary" data-wf-navbar>...</nav>

<!-- Transparent (no background or bottom border) -->
<nav class="wf-navbar wf-navbar--transparent" data-wf-navbar>...</nav>

Sticky

Add wf-navbar--sticky to pin the navbar to the top of the viewport using position: sticky; top: 0 . It combines with any theme modifier class.

<nav class="wf-navbar wf-navbar--sticky" data-wf-navbar>
  ...
</nav>

Data Attributes

All configuration is handled through HTML data attributes placed on the relevant elements. No JavaScript options object is required for typical usage.

CSS Properties

All token overrides are scoped to .wf-navbar so multiple navbars on the same page can have independent themes.

Programmatic API

Each initialized navbar exposes an instance on el._wfNavbar . All methods can also be called on a manually created instance.

// Auto-init instance (set during DOMContentLoaded)
const nav = document.querySelector('[data-wf-navbar]')._wfNavbar

nav.openMobile()
nav.closeMobile()
nav.closeAll()
nav.destroy()

// Manual init
import { WojoNavbar } from '/assets/js/wf-production.min.js'

const instance = new WojoNavbar(nav, { breakpoint: 1024 }).init()

Events

All events are dispatched on the navbar root element and bubble normally. Group events include the group element in event.detail .

const nav = document.querySelector('[data-wf-navbar]')

nav.addEventListener('wf:navbar-open', e => {
  console.log('Group opened:', e.detail.group)
})

nav.addEventListener('wf:navbar-mobile-open', () => {
  document.body.classList.add('no-scroll')
})

nav.addEventListener('wf:navbar-mobile-close', () => {
  document.body.classList.remove('no-scroll')
})

Class Reference

All modifier classes available on .wf-navbar