CSS-Only

Navbar

Responsive navigation bar with positioning, variants, alignment, and active state support. Pure CSS, no JavaScript required.

Example

<nav class="omni-navbar">
  <a href="#" class="omni-navbar-brand">Brand</a>
  <ul class="omni-navbar-nav">
    <li><a href="#" class="omni-navbar-link" data-active="true">Home</a></li>
    <li><a href="#" class="omni-navbar-link">About</a></li>
    <li><a href="#" class="omni-navbar-link">Services</a></li>
    <li><a href="#" class="omni-navbar-link">Contact</a></li>
  </ul>
</nav>

Structure

A navbar consists of three main parts:

  • .omni-navbar - The container element (typically <nav>)
  • .omni-navbar-brand - Logo or site name (typically <a>)
  • .omni-navbar-nav - Navigation links list (typically <ul>)
  • .omni-navbar-link - Individual navigation links (typically <a>)

With Actions

Add buttons or other elements to the navigation:

<nav class="omni-navbar">
  <a href="#" class="omni-navbar-brand">Brand</a>
  <ul class="omni-navbar-nav">
    <li><a href="#" class="omni-navbar-link" data-active="true">Home</a></li>
    <li><a href="#" class="omni-navbar-link">Products</a></li>
    <li><a href="#" class="omni-navbar-link">About</a></li>
    <li><button class="omni-button" data-variant="primary" data-size="sm">Sign In</button></li>
  </ul>
</nav>

With Icons

Add icons to navigation links:

Variants

Position Variants

Control navbar positioning with data-position:

Static (default)

Normal document flow, scrolls with page content.

Sticky

Stays at top when scrolling past it:

<nav class="omni-navbar" data-position="sticky">
  <a href="#" class="omni-navbar-brand">Sticky</a>
  <ul class="omni-navbar-nav">
    <li><a href="#" class="omni-navbar-link">Link</a></li>
  </ul>
</nav>

Fixed

Always visible at top of viewport:

<nav class="omni-navbar" data-position="fixed">
  <a href="#" class="omni-navbar-brand">Fixed</a>
  <ul class="omni-navbar-nav">
    <li><a href="#" class="omni-navbar-link">Link</a></li>
  </ul>
</nav>

Style Variants

Adjust visual treatment with data-variant:

Default

Standard navbar with border and background.

Minimal

Reduced padding, no border:

Transparent

Transparent background with backdrop blur:

<nav class="omni-navbar" data-variant="transparent">
  <a href="#" class="omni-navbar-brand">Transparent</a>
  <ul class="omni-navbar-nav">
    <li><a href="#" class="omni-navbar-link" data-active="true">Active</a></li>
    <li><a href="#" class="omni-navbar-link">Link</a></li>
  </ul>
</nav>

Dark

Alternative dark surface background:

Alignment Variants

Control content alignment with data-align:

Between (default)

Brand on left, nav on right:

Start

All content aligned to start:

Center

All content centered:

End

All content aligned to end:

Container Control

Constrain navbar content width with data-container="contained":

<nav class="omni-navbar" data-container="contained">
  <a href="#" class="omni-navbar-brand">Brand</a>
  <ul class="omni-navbar-nav">
    <li><a href="#" class="omni-navbar-link">Link</a></li>
  </ul>
</nav>

Sets max-width: 1200px and centers content. Customize with --omni-container-max-width.

Active State

Mark the current page with data-active="true":

<a href="#" class="omni-navbar-link" data-active="true">Products</a>

Responsive Behavior

Navbar automatically reflows at 900px breakpoint (tablet and below):

  • Flex wrapping enabled for both navbar and nav list
  • Links naturally wrap to new lines
  • No JavaScript hamburger menu by default (CSS-only)
  • Enhance with Tier 3 JavaScript for mobile toggle if needed

This pure CSS approach works without JavaScript and degrades gracefully.

API Reference

Attribute Values Default Description
data-position sticky, fixed static Navbar positioning behavior
data-variant minimal, transparent, dark — Visual style variant
data-align start, center, end, between between Content alignment
data-container contained — Constrains content width
data-active true — Marks active link (on .omni-navbar-link)

CSS Classes

Class Element Description
.omni-navbar <nav> Main navbar container
.omni-navbar-brand <a> Brand/logo link
.omni-navbar-nav <ul> Navigation links list
.omni-navbar-link <a> Individual navigation link

Accessibility

  • Use semantic <nav> element for navbar container
  • Use <ul> and <li> for navigation lists
  • Full keyboard navigation support (Tab, Enter)
  • Focus visible indicators on all interactive elements
  • Active links use medium font weight for visual distinction
  • Color contrast meets WCAG AA standards
  • Hover states use color transitions for clarity
  • Responsive reflow works without JavaScript
  • Consider adding aria-label to <nav> if multiple navbars exist
  • Use aria-current="page" on active links for screen readers

Components Used

Other OmniUI components demonstrated on this page:

Button