ONav v2.0.4

What ONav does

ONav operates completely independently of WordPress's built-in menu system. Every nav item, mega panel, CTA button, and mobile menu is defined inside ONav, so your navigation lives entirely outside the WP menu system and theme layer, and remains unaffected by theme updates.

Getting installed

Plugin architecture

Admin interface

Two-row sticky header (brand bar + horizontal tab nav) with full-width card-based content, following the Orravo Plugin Design System. No WP admin sidebar. Light/dark toggle persisted to localStorage under key onav_theme.

Primary nav editor

The main editor for your site's header navigation. Split into a sortable item list on the left, an item editor panel on the right, and a live preview iframe below.

Topbar tab

Configures the thin utility bar that sits above the primary nav.

Footer tab

Configures the footer navigation rendered by do_action('onav_footer').

Mobile drawer tab

When Mirror primary nav is off, define a completely separate set of items for mobile only using the Custom Mobile Items card.

Scroll behavior

Appearance customizer

Color and dimension customizer. No CSS editing required; all values become CSS custom properties on :root.

All values accept #rrggbb, rgba(r,g,b,a), or CSS var() references.

Analytics tab

Lightweight, opt-in click tracking. Off by default. Stores aggregate counts only.

Settings tab

Nav item types

Mega panel builder

Accessible via the Panel button on any mega type item. Build multi-column panels with up to 6 different block types per column.

JSON · link-list / icon-grid{
  "column": 0,
  "type": "link-list",
  "heading": "Section Title",
  "links": [
    { "label": "Item One", "url": "/path/", "desc": "Short description", "icon": "" }
  ]
}

JSON · featured{
  "column": 1,
  "type": "featured",
  "image": "https://example.com/image.jpg",
  "title": "Featured Title",
  "body": "Description text.",
  "cta": "Learn more",
  "cta_url": "/learn-more/"
}

JSON · recent-posts{
  "column": 2,
  "type": "recent-posts",
  "heading": "Latest",
  "count": 3,
  "category": 0
}

Four menu slots

ONav manages four independent menu slots, each rendered via a PHP action hook or direct renderer call.

Frontend usage

ONav does not auto-inject into any theme location. Call it from your theme templates.

PHP · header.php<?php do_action('onav_primary'); ?>

PHP · footer.php<?php do_action('onav_footer'); ?>

PHP · direct rendererONAV_Renderer::render_primary();
ONAV_Renderer::render_footer();

CSS custom properties

ONav injects a <style id="onav-vars"> block into wp_head with all color and dimension values as CSS custom properties on :root. Use them freely in your own theme CSS.

CSS · example usage.my-hero {
  /* Push content below both topbar + nav */
  padding-top: calc(var(--onav-h) + var(--onav-topbar-h));
}

/* Dark mode override */
@media (prefers-color-scheme: light) {
  :root {
    --onav-nav-bg: #ffffff;
    --onav-link:   #1a1814;
  }
}

Filters

PHPadd_filter('onav_primary_items', function (array $items): array {
    // Add a conditional item for logged-in users
    if (is_user_logged_in()) {
        $items[] = [
            'id'    => 'my-account',
            'type'  => 'link',
            'label' => 'My Account',
            'url'   => '/my-account/',
        ];
    }
    return $items;
});

Action hooks

PHP// Fires before the primary nav HTML is output
add_action('onav_before_render', function (): void {
    // e.g. set up a nonce or output custom data
});

// Fires after the primary nav HTML is output
add_action('onav_after_render', function (): void {
    // e.g. output additional markup
});

Helper functions

PHP// Get nav items for any slot
$primary_items = onav_get_items('primary');    // onav_primary_items filter applied
$footer_cols   = onav_get_items('footer');     // returns columns array
$topbar_items  = onav_get_items('topbar');

// Get the full merged config
$cfg      = ONAV_Config::get();
$behavior = $cfg['primary']['behavior'];

// Get a single slot's config
$primary = ONAV_Config::get_slot('primary');
$mobile  = ONAV_Config::get_slot('mobile');

// Resolve a relative URL
$url = ONAV_Config::resolve_url('/about/');
// → https://example.com/about/

JavaScript events

ONav dispatches custom DOM events on document for all major interaction states.

JS// Dropdown or mega panel opened
document.addEventListener('onav:open', function (e) {
    console.log('Opened item:', e.detail.item);
});

// Dropdown or mega panel closed
document.addEventListener('onav:close', function (e) {
    console.log('Closed item:', e.detail.item);
});

// Mobile drawer opened
document.addEventListener('onav:mobile:open', function () {});

// Mobile drawer closed
document.addEventListener('onav:mobile:close', function () {});

Accessibility (WCAG 2.1 AA)

Click analytics

Opt-in and off by default. Stores aggregate counts only.

Import & export

WP menus sync

Already have a WordPress menu? Import it into ONav in one click.

Multisite support

ONav stores its configuration per-site in wp_options. No network-wide shared config by default.

Config schema reference

Each slot's onav_slot_* option stores a JSON object with this structure.

JSON{
  "primary": {
    "items": [
      {
        "id": "string",
        "type": "link|dropdown|mega|button|search|separator|cart|user|html",
        "label": "string",
        "url": "string",
        "new_tab": false,
        "children": [],
        "mega_panel": {},
        "button_style": "primary|secondary|outline|ghost",
        "html_content": "string"
      }
    ],
    "behavior": {
      "sticky": true,
      "transparent": false,
      "smart_hide": false,
      "shadow_scroll": true,
      "bg_type": "solid|blur|gradient",
      "blur_amount": 12
    },
    "appearance": {
      "nav_bg": "#0b0b0c",
      "nav_bg_scroll": "#0b0b0c",
      "link_color": "rgba(255,255,255,0.65)",
      "link_hover": "#ffffff",
      "link_active": "#ff6a2b",
      "cta_bg": "#ff6a2b",
      "cta_text": "#ffffff",
      "cta_hover_bg": "#ff7a42",
      "mega_bg": "#121214",
      "mega_border": "#1f1f23",
      "dropdown_bg": "#121214",
      "font_size": 14,
      "height": 64
    }
  },
  "topbar_v2": {
    "enabled": true,
    "items": [],
    "height": 36,
    "bg": "#0b0b0c",
    "text_color": "rgba(255,255,255,0.6)",
    "link_color": "rgba(255,255,255,0.85)",
    "descriptor": "",
    "hide_mobile": true
  },
  "footer": {
    "enabled": true,
    "columns": [
      {
        "heading": "string",
        "links": [ { "label": "string", "url": "string" } ]
      }
    ],
    "copyright": "© 2025 Your Brand",
    "copyright_url": ""
  },
  "mobile": {
    "items": [],
    "use_primary": true,
    "style": "accordion|slide-left|slide-right|fullscreen",
    "breakpoint": 768,
    "bg": "#0b0b0c",
    "cta_label": "Get Started",
    "cta_url": "/get-started/"
  },
  "analytics": {
    "enabled": false,
    "clicks": {}
  }
}

What's shipped

Frequently asked questions