CSS-Only

Nav

Flexible navigation component with layout and style variants. Build navigation lists, sidebars, and menus. Works by default, enhances with data attributes.

Example

<nav aria-label="Main navigation">
  <ul class="omni-nav">
    <li><a class="omni-nav-link" href="/" aria-current="page">Home</a></li>
    <li><a class="omni-nav-link" href="/products">Products</a></li>
    <li><a class="omni-nav-link" href="/about">About</a></li>
    <li><a class="omni-nav-link" href="/contact">Contact</a></li>
  </ul>
</nav>

Layouts

Horizontal (default)

Navigation items flow horizontally by default:

<nav aria-label="Main navigation">
  <ul class="omni-nav">
    <li><a class="omni-nav-link" href="#" aria-current="page">Dashboard</a></li>
    <li><a class="omni-nav-link" href="#">Analytics</a></li>
    <li><a class="omni-nav-link" href="#">Reports</a></li>
  </ul>
</nav>

Vertical

Use data-layout="vertical" for sidebar navigation:

<nav aria-label="Sidebar navigation">
  <ul class="omni-nav" data-layout="vertical">
    <li><a class="omni-nav-link" href="#" aria-current="page">Dashboard</a></li>
    <li><a class="omni-nav-link" href="#">Analytics</a></li>
    <li><a class="omni-nav-link" href="#">Reports</a></li>
  </ul>
</nav>

Center

Use data-layout="center" to center navigation items:

Fill

Use data-layout="fill" to make nav items fill the available space equally:

<nav aria-label="Equal width navigation">
  <ul class="omni-nav" data-layout="fill">
    <li class="omni-nav-item"><a class="omni-nav-link" href="#">Overview</a></li>
    <li class="omni-nav-item"><a class="omni-nav-link" href="#">Details</a></li>
    <li class="omni-nav-item"><a class="omni-nav-link" href="#">History</a></li>
  </ul>
</nav>

Styles

Default

Default style with subtle hover states:

Pills

Use data-style="pills" for fully rounded links:

<nav aria-label="Pills navigation">
  <ul class="omni-nav" data-style="pills">
    <li><a class="omni-nav-link" href="#" aria-current="page">Home</a></li>
    <li><a class="omni-nav-link" href="#">Products</a></li>
  </ul>
</nav>

Tabs

Use data-style="tabs" for tab-style navigation with bottom borders:

<nav aria-label="Tabs navigation">
  <ul class="omni-nav" data-style="tabs">
    <li><a class="omni-nav-link" href="#" aria-current="page">Profile</a></li>
    <li><a class="omni-nav-link" href="#">Settings</a></li>
    <li><a class="omni-nav-link" href="#">Notifications</a></li>
  </ul>
</nav>

Active State

Mark the current page with aria-current="page" (recommended) or data-state="active":

<nav aria-label="Main navigation">
  <ul class="omni-nav" data-layout="vertical" data-style="pills">
    <li><a class="omni-nav-link" href="#" aria-current="page">Dashboard</a></li>
    <li><a class="omni-nav-link" href="#">Projects</a></li>
    <li><a class="omni-nav-link" href="#">Team</a></li>
  </ul>
</nav>

Combining Variants

Mix layout and style variants for different use cases:

Vertical Pills Sidebar

Centered Tabs

Multiple Navigations

When using multiple <nav> elements on the same page, always use aria-label to distinguish them for screen readers:

<nav aria-label="Main navigation">
  <ul class="omni-nav">...</ul>
</nav>

<nav aria-label="Account settings">
  <ul class="omni-nav" data-layout="vertical">...</ul>
</nav>

<nav aria-label="Footer links">
  <ul class="omni-nav" data-layout="center">...</ul>
</nav>

Responsive Behavior

On screens 48rem (768px) and below, horizontal navigation automatically becomes vertical with left-aligned text. This ensures usability on mobile devices without additional markup.

API Reference

Nav Container

Attribute Values Default Description
data-layout vertical, center, fill horizontal Navigation layout direction
data-style pills, tabs default Visual style variant

Nav Link

Attribute Values Description
aria-current page Marks the current page (recommended)
data-state active Alternative active state marker

CSS Classes

Class Element Description
.omni-nav <ul> Navigation list container
.omni-nav-item <li> List item (required for data-layout="fill")
.omni-nav-link <a> Navigation link

Accessibility

  • Use semantic <nav> landmark element
  • Always include aria-label when multiple <nav> elements exist on the page
  • Mark current page with aria-current="page" for screen readers
  • Full keyboard navigation support (Tab, Enter)
  • Focus visible indicators with proper contrast
  • Responsive design ensures mobile usability without loss of functionality
  • Respects prefers-reduced-motion for transitions

Best Practices

<!-- ✅ Good: Labeled nav with current page marked -->
<nav aria-label="Main navigation">
  <ul class="omni-nav">
    <li><a class="omni-nav-link" href="/" aria-current="page">Home</a></li>
    <li><a class="omni-nav-link" href="/about">About</a></li>
  </ul>
</nav>

<!-- ❌ Bad: No aria-label on multiple navs -->
<nav>
  <ul class="omni-nav">...</ul>
</nav>
<nav>
  <ul class="omni-nav">...</ul>
</nav>

<!-- ❌ Bad: No current page indicator -->
<nav aria-label="Main navigation">
  <ul class="omni-nav">
    <li><a class="omni-nav-link" href="/">Home</a></li>
  </ul>
</nav>

Components Used

Other OmniUI components demonstrated on this page:

Alert