Mega-menu

Overview

The Mega Menu component allows you to ...

You can see it in use above. When the mega menu is present it will replace the standard headers that are injected.

Usage

The Mega Menu component is initialized as a “view component” that’s automatically activated by the presence of a data attribute in the DOM.

<body>
  <div data-um-mega-menu=""></div>
  <div class="uomcontent">
    <div class="page-inner">
      ...
    </div>
  </div>
</body>

The shape and layout of the mega menu is configured by passing a JSON-stringified object as the data-um-mega-menu attribute (following the pattern from the defo view-binding library).

That object should take the following shape:

{
  // Main title in header (and its link location)
  facultyName: "Faculty Name",
  facultyHref: "https://faculty.unimelb.edu.au",
  // Major nav items
  navItems: [
    {
      href: "/main-item",
      title: "Main item"
    },
    {
      href: "/main-item-with-children"
      title: "Main item with children",
      // A selected attribute can be set on a major nav item to indicate
      // that it’s the relevant navigation tree
      selected: true,
      // Major nav items can have children
      navItems: [
        {
          href: "/second-level-item",
          title: "Second-level item"
        },
        {
          href: "/second-level-item-with-children",
          title: "Second-level item with children",
          // ... and so can their children (three levels are all that’s supported)
          navItems: [
            {
              href: "/third-level-item-1",
              title: "Third-level item-1"
            },
            {
              href: "/third-level-item-2",
              title: "Third-level item-3"
            }
          ]
        },
      ],
      // Major nav items can have featured "asides" which will display
      asides: [
        {
          // Asides can specify a color from the allowed palette:
          //   blue, teal, purple, pink, orange
          color: "purple",
          imageUrl: "https://via.placeholder.com/400x300",
          title: "Aside 1",
          content: "Lorem ipsum dolor sit amet."
        },
        {
          // Aside without a color will be assigned one automatically
          imageUrl: "https://via.placeholder.com/400x300",
          title: "Aside 2"
        }
      ]
    }
  ],
  // Options top-nav items — these are intended for providing quick access
  // to "global" navigation options.
  //
  // Top-nav items can also be separated into groups by separating them
  // into nested arrays
  topNavItems: [
    {
      title: "Students",
      href: "/students"
    },
    {
      title: "Staff",
      href: "/staff"
    },
    {
      title: "Alumni",
      href: "/alumni"
    }
  ]
}