Nav/Schema

Getting started

Quick start

Five minutes from install to a working sidebar and mega menu.

1 - Markup

nav-schema mounts into empty containers. You keep ownership of layout and CSS, while the library renders the navigation structure inside each container.

index.html
<aside id="app-sidebar"></aside>
<header id="app-mega-menu"></header>

2 - Create schemas and mount

Use createSidebarMenu() and createMegaMenu() for typed schema authoring, then mount them with the corresponding helpers.

navigation.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
  }
});

3 - Add event handlers when needed

Sidebar items can define their own handlers, or you can provide global event handlers through mount options.

sidebar-events.ts
mountSidebar(container, {
  schema,
  events: {
    onClick({ item, element, originalEvent }) {
      console.log("clicked", item.id, element.href);
    },
    onFocus({ item }) {
      console.log("focused", item.label);
    }
  },
  prefix: "nav-schema"
});

Where to next?