Class Names

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

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