Usage:

Injection of mc-header is done by including the header.js script in the body of your HTML page.

Local:

<script src="header.js" defer></script>

or via jsdelivr CDN.

<script src="https://cdn.jsdelivr.net/gh/materialscloud-org/mc-header@main/header.js" defer></script>

If the page has breadcrumbs, you can set them with the breadcrumbsPath variable before including the script:

<script>
  var breadcrumbsPath = [
    { name: "Work", link: "https://www.materialscloud.org/work/menu" },
    {
      name: "Tools",
      link: "https://www.materialscloud.org/work/tools/options",
    },
    {
      name: "EXAMPLE NAME",
      link: null,
    },
  ];
  </script>
  <script src="https://cdn.jsdelivr.net/gh/materialscloud-org/mc-header@main/header.js" defer></script>

Make sure to load header.js with the defer attribute so it runs after the DOM is ready.

The script will create a header with some reserved css styling; most things should be self-contained within the js but to avoid conflicts its recommended to not use .mc-header as a css classname and to not override .body: { margin: 0px}