<nav class="ecl-menu" aria-expanded="false" data-ecl-menu="true">
<div class="ecl-menu__overlay" data-ecl-menu-overlay="true"></div>
<div class="ecl-container ecl-menu__container"><a class="ecl-link ecl-link--standalone ecl-menu__open" href="/example"
data-ecl-menu-open="true"><svg focusable="false" aria-hidden="true" class="ecl-icon ecl-icon--s">
<use xlink:href="/component-library/v2.39.0/dist/media/icons.3cf410f9.svg#general--hamburger"></use>
</svg>Menu</a>
<div class="ecl-menu__site-name">Site name</div>
<section class="ecl-menu__inner" data-ecl-menu-inner="true">
<header class="ecl-menu__inner-header"><button data-ecl-menu-close="true" type="submit"
class="ecl-menu__close ecl-button ecl-button--text"><span
class="ecl-menu__close-container ecl-button__container"><svg focusable="false" aria-hidden="true"
data-ecl-icon="true" class="ecl-button__icon ecl-button__icon--before ecl-icon ecl-icon--s">
<use xlink:href="/component-library/v2.39.0/dist/media/icons.3cf410f9.svg#ui--close-filled"></use>
</svg><span class="ecl-button__label" data-ecl-label="true">Close</span></span></button>
<div class="ecl-menu__title">Menu</div><button data-ecl-menu-back="true" type="submit"
class="ecl-menu__back ecl-button ecl-button--text"><span class="ecl-button__container"><svg focusable="false"
aria-hidden="true" data-ecl-icon="true"
class="ecl-button__icon ecl-button__icon--before ecl-icon ecl-icon--s ecl-icon--rotate-270">
<use xlink:href="/component-library/v2.39.0/dist/media/icons.3cf410f9.svg#ui--corner-arrow"></use>
</svg><span class="ecl-button__label" data-ecl-label="true">Back</span></span></button>
</header>
<ul class="ecl-menu__list">
<li class="ecl-menu__item" data-ecl-menu-item="true"><a href="/example" class="ecl-menu__link"
data-ecl-menu-link="true">Home</a></li>
<li class="ecl-menu__item ecl-menu__item--current ecl-menu__item--has-children" data-ecl-has-children="true"
data-ecl-menu-item="true"><a href="/example" class="ecl-menu__link ecl-menu__link--current"
data-ecl-menu-link="true">Item 2<span class="ecl-u-sr-only"> (has submenu)</span><svg focusable="false"
aria-hidden="true" class="ecl-menu__link-icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
<use xlink:href="/component-library/v2.39.0/dist/media/icons.3cf410f9.svg#ui--corner-arrow"></use>
</svg></a>
<div class="ecl-menu__mega" data-ecl-menu-mega="true">
<ul class="ecl-menu__sublist">
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 2.1</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 2.2</a></li>
<li class="ecl-menu__subitem ecl-menu__subitem--current" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink ecl-menu__sublink--current">Item 2.3</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 2.4</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 2.5</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 2.6</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 2.7</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 2.8</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 2.9</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 2.10</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 2.11</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 2.12</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 2.13</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 2.14</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 2.15</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 2.16</a></li>
</ul>
</div>
</li>
<li class="ecl-menu__item ecl-menu__item--has-children" data-ecl-has-children="true" data-ecl-menu-item="true">
<a href="/example" class="ecl-menu__link" data-ecl-menu-link="true">Item 3<span class="ecl-u-sr-only"> (has
submenu)</span><svg focusable="false" aria-hidden="true"
class="ecl-menu__link-icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
<use xlink:href="/component-library/v2.39.0/dist/media/icons.3cf410f9.svg#ui--corner-arrow"></use>
</svg></a>
<div class="ecl-menu__mega" data-ecl-menu-mega="true">
<ul class="ecl-menu__sublist">
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 3.1</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 3.2</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 3.3</a></li>
</ul>
</div>
</li>
<li class="ecl-menu__item ecl-menu__item--has-children" data-ecl-has-children="true" data-ecl-menu-item="true">
<a href="/example" class="ecl-menu__link" data-ecl-menu-link="true">Item 4<span class="ecl-u-sr-only"> (has
submenu)</span><svg focusable="false" aria-hidden="true"
class="ecl-menu__link-icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
<use xlink:href="/component-library/v2.39.0/dist/media/icons.3cf410f9.svg#ui--corner-arrow"></use>
</svg></a>
<div class="ecl-menu__mega" data-ecl-menu-mega="true">
<ul class="ecl-menu__sublist">
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 4.1</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 4.2</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 4.3 with a very long label going on 2 lines</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 4.4</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 4.5</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 4.6</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 4.7</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 4.8</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 4.9</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 4.10</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 4.11</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 4.12</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 4.13</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 4.14</a></li>
</ul>
</div>
</li>
<li class="ecl-menu__item ecl-menu__item--has-children" data-ecl-has-children="true" data-ecl-menu-item="true">
<a href="/example" class="ecl-menu__link" data-ecl-menu-link="true">Item 5<span class="ecl-u-sr-only"> (has
submenu)</span><svg focusable="false" aria-hidden="true"
class="ecl-menu__link-icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
<use xlink:href="/component-library/v2.39.0/dist/media/icons.3cf410f9.svg#ui--corner-arrow"></use>
</svg></a>
<div class="ecl-menu__mega" data-ecl-menu-mega="true">
<ul class="ecl-menu__sublist">
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 5.1</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 5.2</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 5.3</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 5.4</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 5.5</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 5.6</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 5.7</a></li>
</ul>
</div>
</li>
<li class="ecl-menu__item ecl-menu__item--has-children" data-ecl-has-children="true" data-ecl-menu-item="true">
<a href="/example" class="ecl-menu__link" data-ecl-menu-link="true">Item 6<span class="ecl-u-sr-only"> (has
submenu)</span><svg focusable="false" aria-hidden="true"
class="ecl-menu__link-icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
<use xlink:href="/component-library/v2.39.0/dist/media/icons.3cf410f9.svg#ui--corner-arrow"></use>
</svg></a>
<div class="ecl-menu__mega" data-ecl-menu-mega="true">
<ul class="ecl-menu__sublist">
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 6.1</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 6.2</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 6.3</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 6.4</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 6.5</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 6.6</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 6.7</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 6.8</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 6.9 with a very long label</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 6.10</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 6.11</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 6.12</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 6.13</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 6.14</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 6.15</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 6.16</a></li>
</ul>
</div>
</li>
<li class="ecl-menu__item ecl-menu__item--has-children" data-ecl-has-children="true" data-ecl-menu-item="true">
<a href="/example" class="ecl-menu__link" data-ecl-menu-link="true">Item 7 with a long label<span
class="ecl-u-sr-only"> (has submenu)</span><svg focusable="false" aria-hidden="true"
class="ecl-menu__link-icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
<use xlink:href="/component-library/v2.39.0/dist/media/icons.3cf410f9.svg#ui--corner-arrow"></use>
</svg></a>
<div class="ecl-menu__mega" data-ecl-menu-mega="true">
<ul class="ecl-menu__sublist">
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 7.1</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 7.2</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 7.3</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 7.4</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 7.5</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 7.6</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 7.7</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 7.8</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 7.9</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem="true"><a href="/example"
class="ecl-menu__sublink">Item 7.10</a></li>
</ul>
</div>
</li>
</ul>
</section>
</div>
</nav>Try it yourself on the playground
Playground