Getting started

Installation

nav-schema ships TypeScript helpers for building, rendering, and mounting sidebar and mega menu schemas.

From a package manager

Pick your favourite package manager. The examples are equivalent.

npm

Then import the helpers you need:

src/main.ts

import {
  createSidebarMenu,
  mountSidebar,
  createMegaMenu,
  mountMegaMenu,
  UI,
  getPrefix
} from "nav-schema";

From a CDN

Add the browser build to a plain HTML page:

index.html

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

ES module CDN

Use the module entry when the page supports type="module".

index.html

<script type="module">
  import { createSidebarMenu, mountSidebar } from "https://unpkg.com/nav-schema/dist/index.js";

  const schema = createSidebarMenu({
    title: "Docs",
    items: [{ id: "intro", label: "Introduction", url: "/docs" }]
  });

  mountSidebar(document.querySelector("#sidebar"), { schema });
</script>

Global build

The global build exposes the package helpers on window.NavSchema.

legacy.html

<script src="https://unpkg.com/nav-schema/dist/index.global.js"></script>
<script>
  const { createSidebarMenu, mountSidebar } = window.NavSchema;
  mountSidebar(document.querySelector("#sidebar"), {
    schema: createSidebarMenu({
      title: "Docs",
      items: [{ id: "intro", label: "Introduction", url: "/docs" }]
    })
  });
</script>

What gets bundled?

The public package exports schema builders, HTML renderers, mount helpers, shared prop aliases, class-name constants, and tiny-engine-core helpers for adapter authors. Live mounts still keep app code focused on navigation data.