ONav v1.0.0

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 — no WP menu assignment, no theme dependency, no way for a theme update to break your navigation.

Getting installed

Plugin architecture

Admin interface

Two-row sticky header (brand bar + horizontal tab nav), full-width card-based content — 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. No personal data stored — 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;
});

PHPadd_filter('onav_render_item', function (string $html, array $item): string {
    if ($item['id'] === 'blog') {
        $html = str_replace('class="onav-label"', 'class="onav-label onav-label--featured"', $html);
    }
    return $html;
}, 10, 2);

PHPadd_filter('onav_mega_panel', function (string $html, array $item): string {
    return $html;
}, 10, 2);

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. Aggregate counts only — no IP addresses, user IDs, or session tokens.

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

The full onav_config 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": {
    "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