Hover Navigation

<div id="docs-sidebar"></div>

<script type="module">
  import { createSidebarMenu, mountSidebar } from "nav-schema";

  const docsMenu = createSidebarMenu({
    title: "Documentation",
    sections: [
      {
        id: "guides",
        label: "Guides",
        items: [
          { id: "intro", label: "Introduction", url: "/docs", icon: "I" },
          {
            id: "components",
            label: "Components",
            url: "#",
            children: [
              { id: "sidebar", label: "Sidebar", url: "/docs/sidebar" },
              { id: "mega", label: "Mega Menu", url: "/docs/mega-menu" }
            ]
          }
        ]
      }
    ]
  });

  mountSidebar(document.querySelector("#docs-sidebar"), {
    schema: docsMenu,
    currentUrl: location.href,
    autoExpandActiveChild: true,
    expandMultiple: false,
    isFloatingIndicator: true
  });
</script>

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