Sidebar

Sidebar Schema

Sidebar menus are plain typed objects with sections, items, optional icons, nested children, and route-aware active state.

Schema shape

Use createSidebarMenu() as a typed identity helper, then pass the schema to mountSidebar() or renderSidebarHtml().

sidebar.ts

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

const sidebar = createSidebarMenu({
  title: "Dashboard",
  sections: [
    {
      id: "main",
      label: "Main",
      items: [
        { id: "home", label: "Home", url: "/", icon: "H" },
        {
          id: "settings",
          label: "Settings",
          url: "#",
          children: [
            { id: "profile", label: "Profile", url: "/settings/profile" },
            { id: "billing", label: "Billing", url: "/settings/billing" }
          ]
        }
      ]
    }
  ]
});

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

const megaMenu = createMegaMenu({
  id: "marketing-nav",
  items: [
    {
      id: "products",
      label: "Products",
      href: "/products",
      dropdownIcon: "v",
      megaMenu: {
        firstColumn: [
          {
            id: "platform",
            label: "Platform",
            items: [
              {
                id: "navigation",
                label: "Navigation",
                description: "Sidebar and mega menu schemas",
                items: [
                  { id: "sidebar", label: "Sidebar", href: "/docs/sidebar" },
                  { id: "mega", label: "Mega Menu", href: "/docs/mega-menu" }
                ]
              }
            ]
          }
        ],
        secondColumn: { id: "features", title: "Features" },
        thirdColumn: { id: "resources", title: "Resources" }
      }
    }
  ]
});

mountMegaMenu(document.querySelector("#app-mega-menu")!, {
  schema: megaMenu,
  trigger: "hover",
  columnTrigger: "hover",
  isAnimation: true,
  responsive: {
    enabled: true,
    breakpoint: 1024,
    submenuClosedIcon: "+",
    submenuOpenIcon: "-",
    expandMultiple: false
  }
});

Rendered classes

The renderer emits predictable class names that you can override through render options.

html

<ul>
  <li class="nav-sidebar-item">
    <a class="nav-sidebar-link current-page-active">Docs</a>
  </li>
</ul>

HTML attribute mode

If you prefer declarative markup, pass a JSON schema through the schema attribute on a prefixed sidebar host.

html

<div nav-schema-sidebar schema='{"title":"Docs","items":[]}'></div>

At runtime, your options remain normal JavaScript values:

schema.title === "Docs";
options.expandMultiple === false;