Usage:

Include main.css, bundle.js and the assets/ folder in your html file. Create HTML container element to append the header.

Header with Main Navigation

          <header>
            <div id="mindsphere-header"></div>
          </header>
      

Complete Header, with Main and Subnavigation

          <header>
            <div id="mindsphere-header"></div>
            <div class="mindsphere-subnavigation">
              <div class="mindsphere-subnavigation-container">
                <nav class="">
                  <div class="">
                    <a href="">Sub Nav Item</a>
                    <a href="">Sub Nav Item</a>
                    <a href="">Sub Nav Item</a>
                    <a href="">Sub Nav Item</a>
                    <a href="">Sub Nav Item</a>
                  </div>
                </nav>
              </div>
            </div>
          </header>
      

Header Javascript

        var structure = {
          "navItems": [
            {
              "href": "/content/mindsphere/en/how-it-works.html",
              "target": "_self",
              "text": "How It Works"
            },
            {
              "href": "/content/mindsphere/en/live-demo.html",
              "target": "_self",
              "text": "Demo"
            },
            {
              "href": "/content/mindsphere/en/partner.html",
              "target": "_self",
              "text": "Partner Portal"
            },
            {
              "href": "https://www.mindsphere.io/developer",
              "target": "_blank",
              "text": "Developer"
            },
            {
              "href": "https://siemens.mindsphere.io/access",
              "text": "Request Access"
            }
          ]
        };

      var header = new MindsphereHeader(document.getElementById('mindsphere-header'));
      header.render(structure);
      

Footer

        <footer id="mindsphere-footer"></footer>
      

Footer Javascript

        var structure = {
            "signupTeaser": {
                "headline": "Request Access",
                "subHeadline": "Become part of the MindSphere community and help shape the fourth industrial revolution.",
                "signupButton": {
                    "text": "Sign Up",
                    "href": "https://siemens.mindsphere.io/access"
                }
            },
            "learnMore": {
                "shareLinks": [
                    {
                        "icon": "twitter",
                        "href": "http://sie.ag/MindSphereIO-twitter"
                    },
                    {
                        "icon": "linkedin",
                        "href": "http://sie.ag/MindSphereIO-linkedin"
                    },
                    {
                        "icon": "facebook",
                        "href": "http://sie.ag/MindSphereIO-facebook"
                    },
                    {
                        "icon": "youtube",
                        "href": "http://sie.ag/MindSphereIO-youtube"
                    }
                ],
                "metaLinks": [
                    {
                        "text": "Careers",
                        "href": "https://www.siemens.de/jobs/mindsphere-en/Seiten/MindSphere.aspx?sitc=wwdfi10013"
                    }, {
                        "text": "Community",
                        "href": "https://community.plm.automation.siemens.com/t5/MindSphere/ct-p/MindSphere?sitc=wwdfi10013"
                    }, {
                        "text": "Mindapps",
                        "href": "https://www.plm.automation.siemens.com/store/en-de/mindsphere/apps/index.html?sitc=wwdfi10013"
                    }, {
                        "text": "Mindsphere Store",
                        "href": "https://www.plm.automation.siemens.com/store/en-de/mindsphere/index.html?sitc=wwdfi10013"
                    }, {
                        "text": "Terms",
                        "href": "https://siemens.mindsphere.io/terms"
                    }, {
                        "text": "Documentation",
                        "href": "http://www.mindsphere.io/docs"
                    }
                ]
            },
            "legal": {
                "copyright": "Siemens MindSphere © Siemens AG, 1996 – 2017",
                "links": [
                    {
                        "text": "Privacy Policy",
                        "href": "https://siemens.mindsphere.io/legal-info#privacy-policy"
                    }, {
                        "text": "Cookie Policy",
                        "href": "https://siemens.mindsphere.io/legal-info#cookie-policy"
                    }, {
                        "text": "Terms of Use",
                        "href": "https://siemens.mindsphere.io/legal-info#terms-of-use"
                    }, {
                        "text": "Imprint",
                        "href": "https://www.siemens.com/corp/en/index/corporate_info.htm?sitc=wwdfi10013"
                    }
                ]
            }
        };

        var footer = new MindsphereFooter(document.getElementById('mindsphere-footer'));
        footer.render(structure);
      

Use JSONP API

        const header = new MindsphereHeader(document.getElementById('mindsphere-header'));
        header.loadJsonData('http://staging.mindsphere-staging.io/api/header.json');

        const footer = new MindsphereFooter(document.getElementById('mindsphere-footer'));
        footer.loadJsonData('http://staging.mindsphere-staging.io/api/footer.json');