Navbar

Navbar is a responsive navigation bar that adapts between a full horizontal layout on large screens and a collapsible menu on mobile. The layout is pure CSS; the toggle behavior is powered by a lightweight JavaScript engine — a single delegated listener handles all interactions on the page.

Use Navbar for:

• Site-wide primary navigation
• App header with user actions
• Dashboard top bars
• Landing page headers with CTA

All navbar interactions are powered by the FrontAlign runtime.

Quick reference

Getting started

<nav class="navbar">

  <div class="navbar-start">
    <div class="navbar-brand">
      <a class="brand-link" href="/">
        <img src="/logo.svg" alt="Logo">
        <span>MyApp</span>
      </a>
    </div>
  </div>

  <button class="navbar-toggler" fa-toggle="navbar" data-target="#main-menu">
    <span></span>
    <span></span>
    <span></span>
  </button>

  <div class="navbar-end">
    <div class="navbar-links">
    <ul class="nav">
      <li class="nav-item">
        <a href="/#pricing" class="nav-link">Pricing</a>
      </li>
      <li class="nav-item">
        <a href="/#docs" class="nav-link">Docs</a>
      </li>
      </ul>
    </div>
    <a class="button is-primary" href="/login">Sign in</a>
  </div>

  <div class="navbar-menu" id="main-menu">
    <ul class="nav">
      <li class="nav-item">
        <a href="/#pricing" class="nav-link">Pricing</a>
      </li>
      <li class="nav-item">
        <a href="/#docs" class="nav-link">Docs</a>
      </li>
      </ul>
  </div>

</nav>

The data-target attribute on the .navbar-toggler must match the id of the target .navbar-menu. If the attribute is missing or points to a non-existent element, the toggle function will not work. .navbar-menu must be added immediately after the .navbar root is closed.

Layout sections

.navbar-start

Left-aligned section with flex-shrink: 0. Typically holds the brand and primary links.

<div class="navbar-start">
  <div class="navbar-brand">
    <a class="brand-link" href="/">
      <img src="/logo.svg" alt="Logo">
      <span>SiteName</span>
    </a>
  </div>
</div>

.navbar-center

Center section with flex: 1 that fills available space and centers its content. Centering is achieved through flex layout, not absolute positioning.

<div class="navbar-center">
  <div class="navbar-links">
    <a href="/about">About</a>
    <a href="/pricing">Pricing</a>
  </div>
</div>

.navbar-end

Right-aligned section with flex-shrink: 0 and gap: 0.5rem between children.

<div class="navbar-end">
  <a class="button is-primary" href="/login">Sign in</a>
</div>

.navbar-brand

Wrapper for the site logo and name inside .navbar-start. Use .brand-link for the clickable anchor — it handles image sizing (height: 2rem), text styling (1.25rem, font-weight: 600), and prevents wrapping.

<!-- With image and text -->
<div class="navbar-brand">
  <a class="brand-link" href="/">
    <img src="/logo.svg" alt="Logo">
    <span>SiteName</span>
  </a>
</div>

<!-- Text only -->
<div class="navbar-brand">
  <a class="brand-link" href="/">
    <span>SiteName</span>
  </a>
</div>

<!-- Image only -->
<div class="navbar-brand">
  <a class="brand-link" href="/">
    <img src="/logo.svg" alt="SiteName">
  </a>
</div>

.navbar-links

A flex container with gap: 1rem for horizontal navigation links. Hidden by default and shown automatically at the active expand breakpoint.

<div class="navbar-links">
  <a href="/features">Features</a>
  <a href="/pricing">Pricing</a>
  <a href="/blog">Blog</a>
</div>

Responsive behavior

Navbar uses a built-in desktop breakpoint at 1120px. Below this width, .navbar-links stays hidden and the .navbar-toggler controls the collapsible .navbar-menu. At and above 1120px, links become visible and the toggler is hidden.

<nav class="navbar">...</nav>

Size variants

Size variants are applied to the .navbar container and scale the height, padding, font, and brand size uniformly.

<nav class="navbar is-medium">...</nav>
<nav class="navbar is-large">...</nav>

Hamburger toggler

The toggler is a <button> with three <span> children. It requires the navbar-menu-id attribute pointing to the target .navbar-menu id.

<button class="navbar-toggler" navbar-menu-id="#main-menu">
  <span></span>
  <span></span>
  <span></span>
</button>

When .is-active is added by JavaScript, the three bars animate into an × shape:

The transition uses cubic-bezier(0.4, 0, 0.2, 1) easing over 0.28s.

Mobile menu

.navbar-menu is hidden by default and revealed by JavaScript using a slideDown animation with display: flex. It renders as a vertical flex column separated from the navbar content by a subtle top border.

<div class="navbar-menu" id="main-menu">
  <a href="/features">Features</a>
  <a href="/pricing">Pricing</a>
  <a href="/login">Sign in</a>
</div>

JavaScript initialization

You don't need to write anything separately on the JavaScript side. As long as new FrontAlign() is called on the page, it will work without any problems. However, for React users, it is necessary to import the useNavbar hook to run it without calling new FrontAlign().

CSS custom properties

.navbar {
  --navbar: #1a1a2e;
  --navbar-text: #ffffff;
  --navbar-height: 4rem;
  --navbar-padding-x: 2rem;
}

Notes

• .navbar has z-index: 1030 — it sits above most content but below drawers, modals, and toasts.
• transition on .navbar covers background-color, box-shadow, and backdrop-filter over 300ms — useful for scroll-triggered style changes.
• .navbar-links must be inside a section that is visible at the desktop breakpoint; placing it directly in .navbar without a section wrapper works but is not recommended.
• For fixed or sticky navbars, apply positioning via a utility class or inline style — FrontAlign does not include a fixed modifier by default.
• The dispose function returned by navbar() removes the delegated listener from document.body. Call it when navigating away in SPA contexts to prevent memory leaks.