Mega menu

The latest iteration of the Unimelb Mega menu has been redeveloped as a web component, allowing for better compatibility with existing websites.

Great consideration was taken in the development of the new menu to have minimal changes required for adoption, so existing implementations can upgrade with minimal effort.

Documentation for the deprecated Gen4 mega menu is available here.

Usage

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

<script
  type="module"
  src="https://dds-gen3.web.unimelb.edu.au/ui-core-web-components/v0.0.5/modular/client/mega-menu.js"
></script>

<script type="application/json" id="menu-data">
  { ... }
</script>

Add the following custom element to the <body> of your document.

<uom-ds-mega-menu></uom-ds-mega-menu>

Your code should look something like this.

<html lang="en">
  <head>
    <script
  type="module"
  src="https://dds-gen3.web.unimelb.edu.au/ui-core-web-components/v0.0.5/modular/client/mega-menu.js"
></script>

    <script type="application/json" id="menu-data">
      { ... }
    </script>
  </head>
  <body>
    <uom-ds-mega-menu></uom-ds-mega-menu>

    <div class="uomcontent">
      <div class="page-inner">...</div>
    </div>
  </body>
</html>

JSON payload

The shape and layout of the mega menu is configured by providing a JSON object inside a <script type="application/json" id="menu-data"> element. Please note the id of menu-data is required.

  • If external is set to true it will use the alt and src to render the co-brand logo.
  • topNavItems is optional
  • hero Previously named asides, each menu navItem can have a single link that is displayed at the bottom of the menu

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"
    },
    {
      "title": "Main item with children",
      "href": "/main-item-with-children",
      "navItems": [
        {
          "title": "Second level",
          "href": "/second-level",
          "navItems": [
            {
              "title": "Second-level item",
              "href": "/second-level-item"
            }
          ]
        },
        {
          "title": "Second level",
          "href": "/layouts#website-sections",
          "navItems": [
            {
              "title": "Second-level item",
              "href": "/second-level-item"
            },
            {
              "title": "Second-level item",
              "href": "/second-level-item"
            }
          ]
        },
        {
          "title": "Second level",
          "href": "#"
        }
      ],
      "hero": {
        "title": "Promotion link",
        "href": "/promo-link"
      }
    }
  ],
  "topNavItems": [
    {
      "title": "Students",
      "href": "/students"
    },
    {
      "title": "Staff",
      "href": "/staff"
    }
  ]
}

The breadcrumb component displays a trail of links that represents the user’s navigation path through the site hierarchy.

As part of the latest iteration of the mega menu, breadcrumbs are no longer injected into the page.

In order to display breadcrumbs using the existing design system markup, you can now wrap the existing <ol class="page-local-history"> element in the below <nav> element.

<nav class="page-breadcrumbs" aria-label="breadcrumbs"> ... </nav>