Using the component

From Vanilla JS, just add those script in your index.html header:

<script type="module"
        src="https://lib.lumen.com/EnterpriseNav/{version}/dist/po-enterprise-nav/po-enterprise-nav.esm.js"></script>
<script nomodule
        src="https://lib.lumen.com/EnterpriseNav/{version}/dist/po-enterprise-nav/po-enterprise-nav.js"></script>

From other frameworks: we strongly recommend to visit https://stenciljs.com/docs/overview.

For every version, there is NPM package is available in the url: https://lib.lumen.com/EnterpriseNav/{version}/po-enterprise-nav.tgz.

Reserving space for the component

In order to avoid flicker behavour using Enterprise Navigation Component, it's recommend to reserve some space for the component before loading it. For that, some CSS classes are needed on the page where the component is used.

  enterprise-nav-header {
    min-height: 97px;  
  }
  @media only screen and (min-width: 992px) {
    enterprise-nav-menu {
      min-width: 96px;
    }
  }