createSidebarMenu()mountMegaMenu()current-page-activeresponsive: trueexpandMultiple: falsesubmenuClosedIcon: +renderSidebarHtml()UIgetPrefix()

v1.5.2 - responsive menus and adapter-ready APIs

Build navigation systems from typed schema data.

nav-schema gives you sidebar and mega menu data models, server-safe render helpers, live DOM mounts, active route sync, event handlers, animated responsive mega menus, and framework-friendly adapter types.

Get started Quick searchCtrl K

navigation.ts

import { createSidebarMenu, mountSidebar } from "nav-schema";

const menu = createSidebarMenu({
  title: "Workspace",
  sections: [
    {
      id: "manage",
      label: "Manage",
      items: [
        { id: "overview", label: "Overview", url: "/dashboard" },
        {
          id: "content",
          label: "Content",
          url: "#",
          children: [
            { id: "pages", label: "Pages", url: "/dashboard/pages" },
            { id: "media", label: "Media", url: "/dashboard/media" }
          ]
        }
      ]
    }
  ]
});

mountSidebar(document.querySelector("#sidebar")!, {
  schema: menu,
  currentUrl: location.href,
  expandMultiple: false,
  autoExpandActiveChild: true,
  isFloatingIndicator: true
});

how it works

Ship navigation faster, keep the structure smaller.

The core idea is direct composition: navigation is readable data, rendered exactly where your product needs it.

Describe

Write typed sidebar and mega menu schemas as normal data.

Render

Generate static HTML or mount live menus into existing containers.

Navigate

Sync active routes, expansion state, responsive menus, triggers, and handlers.

what it ships with

The pieces you expect from a navigation library.

Sidebar and mega menu primitives that stay data-first, route-aware, and ready for plain HTML or framework apps.

Sidebar schema

Describe nested sidebar items, sections, icons, active URL matching, and expansion behavior from one typed object.

Mega menu schema

Build multi-column navigation panels with first, second, and third column relationships.

TypeScript first

SidebarMenu, MegaMenuSchema, mount options, event contexts, and render options are exported from the package.

DOM renderer included

Render server-safe HTML strings for static output or mount live navigation with cleanup functions.

Interaction options

Choose hover or click triggers, animated mega-menu panels, and mobile accordion behavior from the same schema.

Framework helpers

Use shared prop aliases plus HTML, React, Vue, and Angular helpers from the same menu object.

Route aware

Current-page classes update on load, hash changes, history navigation, pushState, and replaceState.

Packaged for every runtime

Use ESM, CommonJS, browser global, declaration builds, and tiny-engine-core runtime re-exports.

ready when you are

Install nav-schema and wire navigation with data.

Use it in plain HTML, static sites, dashboards, and framework apps. The same schema can render a sidebar, hydrate on the client, or feed a multi-column mega menu.

Install npm package

Terminal

pnpm add nav-schema

Exports

createSidebarMenu

mountSidebar

renderSidebarHtml

createMegaMenu

mountMegaMenu

renderMegaMenuHtml

getPrefix