Getting started

What is Nav Schema?

nav-schema turns sidebar and mega menu navigation into typed data. Create a schema once, render HTML for static output, or mount it as an interactive tiny-engine-core powered navigation widget.

From a CDN

Include nav-schema through unpkg when you want a no-build demo:

html

<script src="https://unpkg.com/nav-schema/dist/index.global.js"></script>

Why schema-first navigation?

Navigation grows quickly: sections, nested sidebar children, current-page state, expansion rules, mega menu columns, icons, and framework adapters. nav-schema keeps those details in structured TypeScript objects instead of scattering them across templates and event handlers.

The package exports render helpers for static markup and mount helpers for live DOM behavior. That means the same schema can support a server-rendered docs sidebar, a dashboard nav, and a marketing mega menu.

Hello, sidebar

The smallest useful program is a route-aware sidebar:

hello.html

<div id="docs-sidebar"></div>

<script type="module">
  import { createSidebarMenu, mountSidebar } from "nav-schema";

  const docsMenu = createSidebarMenu({
    title: "Documentation",
    sections: [
      {
        id: "guides",
        label: "Guides",
        items: [
          { id: "intro", label: "Introduction", url: "/docs", icon: "I" },
          {
            id: "components",
            label: "Components",
            url: "#",
            children: [
              { id: "sidebar", label: "Sidebar", url: "/docs/sidebar" },
              { id: "mega", label: "Mega Menu", url: "/docs/mega-menu" }
            ]
          }
        ]
      }
    ]
  });

  mountSidebar(document.querySelector("#docs-sidebar"), {
    schema: docsMenu,
    currentUrl: location.href,
    autoExpandActiveChild: true,
    expandMultiple: false,
    isFloatingIndicator: true
  });
</script>

Concepts at a glance

Sidebar Schema

Sections, items, nested children, active URL matching, and expansion behavior.

Rendering Lifecycle

Render static markup, mount live capsules, sync options, and dispose cleanly.

Prefix System

Use nav-schema by default or provide your own tiny-engine attribute namespace.

Mega Menu Schema

Define top-level links and multi-column dropdown data from a single typed tree.

Events & Runtime

Use item-level handlers, global handlers, hover/click triggers, and active indicators.

Browser support

nav-schema targets evergreen browsers and modern WebViews. Static render helpers can run wherever your JavaScript build runs; live mounts rely on standard DOM APIs.