<nav class="ecl-menu ecl-menu--group1" data-ecl-menu="" data-ecl-auto-init="Menu" aria-expanded="false">
<div class="ecl-menu__overlay" data-ecl-menu-overlay=""></div>
<div class="ecl-container ecl-menu__container"><a class="ecl-link ecl-link--standalone ecl-menu__open" href="/example"
data-ecl-menu-open=""><svg class="ecl-icon ecl-icon--s" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.96a6ea95.svg#hamburger"></use>
</svg>Menu</a>
<section class="ecl-menu__inner" data-ecl-menu-inner="">
<header class="ecl-menu__inner-header"><button class="ecl-menu__close ecl-button ecl-button--text" type="submit"
data-ecl-menu-close=""><span class="ecl-menu__close-container ecl-button__container"><svg
class="ecl-icon ecl-icon--s ecl-button__icon ecl-button__icon--before" focusable="false"
aria-hidden="true" data-ecl-icon="">
<use xlink:href="/dist/media/icons.96a6ea95.svg#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="" type="submit"
class="ecl-menu__back ecl-button ecl-button--text"><span class="ecl-button__container"><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-270 ecl-button__icon ecl-button__icon--before"
focusable="false" aria-hidden="true" data-ecl-icon="">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg><span class="ecl-button__label" data-ecl-label="">Back</span></span></button>
</header>
<ul class="ecl-menu__list">
<li class="ecl-menu__item" data-ecl-menu-item=""><a href="/example" class="ecl-menu__link"
data-ecl-menu-link="">Home</a></li>
<li class="ecl-menu__item ecl-menu__item--current ecl-menu__item--has-children" data-ecl-menu-item=""
data-ecl-has-children="" aria-haspopup="" aria-expanded="false"><a href="/example"
class="ecl-menu__link ecl-menu__link--current" data-ecl-menu-link="">Item 2 label</a><button
class="ecl-button ecl-button--primary ecl-menu__button-caret" type="button" data-ecl-menu-caret=""
aria-label="Access item's children"><span class="ecl-button__container"><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-180 ecl-button__icon ecl-button__icon--after"
focusable="false" aria-hidden="true" data-ecl-icon="">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></span></button>
<div class="ecl-menu__mega" data-ecl-menu-mega="">
<ul class="ecl-menu__sublist">
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
2.1</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><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=""><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=""><a href="/example" class="ecl-menu__sublink">Item
2.4</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
2.5</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
2.6</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example"
class="ecl-menu__sublink ecl-link--icon-after">Item 2.7<svg
class="ecl-icon ecl-icon--2xs ecl-menu__sublink-icon ecl-link__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.96a6ea95.svg#external"></use>
</svg></a></li>
</ul>
</div>
</li>
<li class="ecl-menu__item ecl-menu__item--has-children" data-ecl-menu-item="" data-ecl-has-children=""
aria-haspopup="" aria-expanded="false"><a href="/example" class="ecl-menu__link" data-ecl-menu-link="">Item 3
with a very long label</a><button class="ecl-button ecl-button--primary ecl-menu__button-caret"
type="button" data-ecl-menu-caret="" aria-label="Access item's children"><span
class="ecl-button__container"><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-180 ecl-button__icon ecl-button__icon--after"
focusable="false" aria-hidden="true" data-ecl-icon="">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></span></button>
<div class="ecl-menu__mega" data-ecl-menu-mega="">
<ul class="ecl-menu__sublist">
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
3.1</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
3.2</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
3.3</a></li>
</ul>
</div>
</li>
<li class="ecl-menu__item" data-ecl-menu-item=""><a href="/example" class="ecl-menu__link"
data-ecl-menu-link="">Item 4 label</a></li>
<li class="ecl-menu__item ecl-menu__item--has-children" data-ecl-menu-item="" data-ecl-has-children=""
aria-haspopup="" aria-expanded="false"><a href="/example" class="ecl-menu__link" data-ecl-menu-link="">Item 5
label</a><button class="ecl-button ecl-button--primary ecl-menu__button-caret" type="button"
data-ecl-menu-caret="" aria-label="Access item's children"><span class="ecl-button__container"><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-180 ecl-button__icon ecl-button__icon--after"
focusable="false" aria-hidden="true" data-ecl-icon="">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></span></button>
<div class="ecl-menu__mega" data-ecl-menu-mega="">
<ul class="ecl-menu__sublist">
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
5.1</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
5.2</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
5.3</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
5.4</a></li>
</ul>
</div>
</li>
<li class="ecl-menu__item ecl-menu__item--has-children" data-ecl-menu-item="" data-ecl-has-children=""
aria-haspopup="" aria-expanded="false"><a href="/example" class="ecl-menu__link" data-ecl-menu-link="">Item 6
label</a><button class="ecl-button ecl-button--primary ecl-menu__button-caret" type="button"
data-ecl-menu-caret="" aria-label="Access item's children"><span class="ecl-button__container"><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-180 ecl-button__icon ecl-button__icon--after"
focusable="false" aria-hidden="true" data-ecl-icon="">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></span></button>
<div class="ecl-menu__mega" data-ecl-menu-mega="">
<ul class="ecl-menu__sublist">
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
6.1</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
6.2</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
6.3</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
6.4</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
6.5</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
6.6</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
6.7</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
6.8</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><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=""><a href="/example" class="ecl-menu__sublink">Item
6.10</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
6.11</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
6.12</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
6.13</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
6.14</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
6.15</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
6.16</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
6.17</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
6.18</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
6.19</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
6.20</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
6.21</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
6.22</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
6.23</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
6.24</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
6.25</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
6.26</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
6.27</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
6.28</a></li>
</ul>
</div>
</li>
<li class="ecl-menu__item ecl-menu__item--has-children" data-ecl-menu-item="" data-ecl-has-children=""
aria-haspopup="" aria-expanded="false"><a href="/example" class="ecl-menu__link" data-ecl-menu-link="">Item 7
label</a><button class="ecl-button ecl-button--primary ecl-menu__button-caret" type="button"
data-ecl-menu-caret="" aria-label="Access item's children"><span class="ecl-button__container"><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-180 ecl-button__icon ecl-button__icon--after"
focusable="false" aria-hidden="true" data-ecl-icon="">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></span></button>
<div class="ecl-menu__mega" data-ecl-menu-mega="">
<ul class="ecl-menu__sublist">
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
7.1</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
7.2</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
7.3</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
7.4</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
7.5</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
7.6</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
7.7</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
7.8</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
7.9</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><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