Using the component

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

<script type="module"
        src="https://lib.lumen.com/EnterpriseNav/4.21.0/dist/po-enterprise-nav/po-enterprise-nav.esm.js"
        integrity="sha384-F4OTgEqyuUkDNM+WTyL9I3e8toLX8kifH7WRclBy1cfp01jfuzi8ypq+8UQM1+eE" crossorigin="anonymous"></script>
<script nomodule
        src="https://lib.lumen.com/EnterpriseNav/4.21.0/dist/po-enterprise-nav/po-enterprise-nav.js">
        integrity="sha384-EPhcysKZsDfMF+e5FislqP0Jr+azj72F9C0CIMgH0gu1yR7Yrkctx6/HC48P5Ark" crossorigin="anonymous"></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/4.21.0/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 adding some extra CSS classes.

For the header component:

  If the header size is set as '-xl' in the customize object:
    enterprise-nav-header {
      min-height: 137px;
    }

  By default:
    enterprise-nav-header {
      min-height: 97px;
    }

For the menu component:

  If the menu component is set as horizontal in the customize object:
    // not needed any CSS class

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