Mega menu

The Mega menu has been designed as a replacement for the aging Classic Header. When it is inserted into the markup it will dynamically inject itself and replace the Classic Header.

Usage

Add the following code to the <head> of your document.

<link
  href="https://dds-gen4.web.unimelb.edu.au/2.0.0/integration/client.css"
  rel="stylesheet"
/>
<script
  src="https://dds-gen4.web.unimelb.edu.au/2.0.0/integration/client.js"
  async=""
></script>

Add the following code to the <body> of your document where ... is a JSON object. Refer to the JSON payload section below on how to structure it properly.

<div data-um-mega-menu="..."></div>

Your code should look something like this.

<html lang="en">
  <head>
    <link
  href="https://dds-gen4.web.unimelb.edu.au/2.0.0/integration/client.css"
  rel="stylesheet"
/>
<script
  src="https://dds-gen4.web.unimelb.edu.au/2.0.0/integration/client.js"
  async=""
></script>

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

JSON payload

The shape and layout of the mega menu is configured by passing a JSON-stringified object as the data-um-mega-menu attribute.

If external is set to true it will use the alt and src to render the co-brand logo.
The selected attribute can be set on a major nav item to indicate that it's the relevant navigation tree
topNavItems is optional
asides is optional

Example:

{
  "facultyName": "Faculty Name",
  "facultyHref": "https://faculty.unimelb.edu.au",
  "external": false,
  "alt": "alt text goes here",
  "src": "/link/to/logo.svg",
  "navItems": [
    {
      "title": "Main item",
      "href": "/main-item",
      "selected": true
    },
    {
      "title": "Main item with children",
      "href": "/main-item-with-children",
      "navItems": [
        {
          "title": "Website sections",
          "href": "/layouts#website-sections",
          "navItems": [
            {
              "title": "Second-level item",
              "href": "/second-level-item"
            },
            {
              "title": "Second-level item with children",
              "href": "/second-level-item-with-children",
              "navItems": [
                {
                  "title": "Third-level item-1",
                  "href": "/third-level-item-1"
                }
              ]
            }
          ]
        }
      ],
      "asides": [
        {
          "title": "Aside 1",
          "color": "purple",
          "imageUrl": "/link/to/img.jpg",
          "content": "Lorem ipsum dolor sit amet."
        },
        {
          "title": "Aside 2",
          "imageUrl": "/link/to/img.jpg"
        }
      ]
    }
  ],
  "topNavItems": [
    {
      "title": "Students",
      "href": "/students"
    },
    {
      "title": "Staff",
      "href": "/staff"
    }
  ]
}