[todo: define linking rules]
<header class="c-nav-site">
<div class="o-flex-container">
<h1 class="c-nav-site__title"><a href="#"">Site name</a></h1>
<div class=" c-nav-site__right c-menu">
<nav class="c-menu__nav" aria-expanded="false">
<ul class="c-menu__list c-menu--site">
<li class="c-menu__item"><a href="https://www.sciencemuseumgroup.org.uk/">A single link</a></li>
<li class="c-menu__item c-menu__item--has-children" aria-haspopup="true">
<a href="https://www.sciencemuseumgroup.org.uk/">Another link</a>
<button aria-expanded="false" class="c-menu__toggle">
<span class="screen-readers">Expand child
menu</span>
</button>
<ul class="c-menu__submenu" aria-expanded="false">
<li class="c-menu__item"><a href="https://www.sciencemuseumgroup.org.uk/">A child link with a long title that wraps</a></li>
<li class="c-menu__item"><a href="https://www.sciencemuseumgroup.org.uk/">Another child link</a></li>
<li class="c-menu__item"><a href="https://www.sciencemuseumgroup.org.uk/">Another child link</a></li>
</ul>
</li>
<li class="c-menu__item"><a href="https://www.sciencemuseumgroup.org.uk/">A single link</a></li>
</ul>
</nav>
<div class="c-searchmenu">
<div class="c-searchmenu__menuitem">
<a href="#js-searchmenu__panel">
<svg role="img" aria-labelledby="search1" class="u-icon" tabindex="-1" focusable="false">
<title id="search1">Open search</title>
<use xlink:href="../../assets/icons/sprite.symbol.svg#search" />
</svg>
</a>
</div>
<div class="c-searchmenu__target" id="js-searchmenu__panel"></div>
<div class="c-searchmenu__panel">
<form method="get" class="c-searchmenu__form" action="search" autocomplete="off">
<label for="js-searchmenu--input" class="u-visually-hidden">Search for:</label>
<input type="search" id="js-searchmenu--input" class="c-searchmenu__input" placeholder="Search …" value="" name="s" />
<button type="submit" class="c-searchmenu__submit">
<svg role="img" aria-labelledby="search2" class="u-icon" tabindex="-1" focusable="false">
<title id="search2">Submit search query</title>
<use xlink:href="../../assets/icons/sprite.symbol.svg#search" />
</svg>
</button>
</form>
</div>
<div class="c-searchmenu__menuitem c-searchmenu__menuitem--close">
<a href="#elsewhere">
<svg role="img" aria-labelledby="close" class="u-icon">
<title id="close">Close search</title>
<use xlink:href="../../assets/icons/sprite.symbol.svg#dismiss" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</header>
<header class="c-nav-site">
<div class="o-flex-container">
<h1 class="c-nav-site__title"><a href="#"">{{title}}</a></h1>
<div class=" c-nav-site__right c-menu">
<nav class="c-menu__nav" aria-expanded="false">
{{render '@menu--sitenav' (contextData '@sitenav') merge=true}}
</nav>
{{ render '@searchmenu' }}
</div>
</div>
</header>