<div id="" class="MobileMenu " style="">
<button class="button js-dropdown-control " aria-controls="some-menu">
<span class="DropdownTrigram ">
<svg class="DropdownTrigram-open" xmlns="http://www.w3.org/2000/svg" width="22" height="18" viewBox="0 0 22 18" fill="currentColor" focusable="false" aria-labelledby="TrigramOpen-title">
<title id="TrigramOpen-title">Open Menu</title>
<path d="M0 0h22v4H0zM0 7h22v4H0zM0 14h22v4H0z"></path>
</svg>
<svg class="DropdownTrigram-close" xmlns="http://www.w3.org/2000/svg" width="22" height="18" viewBox="0 0 22 18" fill="currentColor" focusable="false" aria-labelledby="TrigramClose-title">
<title id="TrigramClose-title">Close Menu</title>
<path d="M20 7h-7V0H9v7H2v4h7v7h4v-7h7z"/>
</svg>
</span>
</button>
<ul id="some-menu" class="hide list" hidden>
<li class="" style="">
<a class="db pa400" href="#">
Link
</a>
</li>
<li class="" style="">
<a class="db pa400" href="#">
Link
</a>
</li>
<li class="" style="">
<a class="db pa400" href="#">
Link
</a>
</li>
</ul>
</div>
<div id="{{id}}" class="MobileMenu {{modifier}}" style="{{style}}">
{{> @children}}
</div>
{
"modifier": null,
"style": null,
"children": [
{
"component": "button",
"context": {
"ariacontrols": "some-menu",
"modifier": "js-dropdown-control",
"text": null,
"children": [
{
"component": "dropdowntrigram"
}
]
}
},
{
"component": "dropdown",
"context": {
"list": true,
"hidden": true,
"modifier": "list",
"id": "some-menu",
"children": [
{
"component": "li",
"context": {
"children": [
{
"component": "link",
"context": {
"modifier": "db pa400",
"text": "Link",
"href": "#"
}
}
]
}
},
{
"component": "li",
"context": {
"children": [
{
"component": "link",
"context": {
"modifier": "db pa400",
"text": "Link",
"href": "#"
}
}
]
}
},
{
"component": "li",
"context": {
"children": [
{
"component": "link",
"context": {
"modifier": "db pa400",
"text": "Link",
"href": "#"
}
}
]
}
}
]
}
}
]
}