[todo: define linking rules]
<header class="c-masthead">
<div class="o-flex-container">
<a href="" class="c-masthead__logo">
<svg viewBox="0 0 388 236" width="388" height="236" preserveAspectRatio="xMinYMid meet" class="c-logo--smg">
<use xlink:href="../../assets/logos/sprite.symbol.svg#smg" fill="#fff"></use>
</svg>
</a>
<div class="c-masthead__right c-menu">
<button class="c-menu__button" aria-controls="mobile-menu" aria-expanded="false">Site name</button>
<nav class="c-menu__nav" aria-expanded="false">
<ul class="c-menu__list c-menu--global">
<li class="c-menu__item"><a href="https://www.sciencemuseumgroup.org.uk/">About us</a></li>
<li class="c-menu__item"><a href="https://collection.sciencemuseumgroup.org.uk/" aria-current="true">Collections</a></li>
<li class="c-menu__item"><a href="https://www.sciencemuseumgroup.org.uk/">Learning</a></li>
<li class="c-menu__item c-menu__item--has-children" aria-haspopup="true">
<a href="#">Visit us</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="http://www.sciencemuseum.org.uk">Science Museum</a></li>
<li class="c-menu__item"><a href="https://www.scienceandmediamuseum.org.uk">National Science and Media Museum</a></li>
<li class="c-menu__item"><a href="https://www.scienceandindustrymuseum.org.uk">Science and Industry Museum</a></li>
<li class="c-menu__item"><a href="http://www.railwaymuseum.org.uk">National Railway Museum</a></li>
<li class="c-menu__item"><a href="https://www.locomotion.org.uk/">Locomotion</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</header>
<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-mobile" id="mobile-menu" aria-expanded="false">
<nav class="c-menu ">
<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>
<ul class="c-menu__list c-menu--global">
<li class="c-menu__item"><a href="https://www.sciencemuseumgroup.org.uk/">About us</a></li>
<li class="c-menu__item"><a href="https://collection.sciencemuseumgroup.org.uk/" aria-current="true">Collections</a></li>
<li class="c-menu__item"><a href="https://www.sciencemuseumgroup.org.uk/">Learning</a></li>
<li class="c-menu__item c-menu__item--has-children" aria-haspopup="true">
<a href="#">Visit us</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="http://www.sciencemuseum.org.uk">Science Museum</a></li>
<li class="c-menu__item"><a href="https://www.scienceandmediamuseum.org.uk">National Science and Media Museum</a></li>
<li class="c-menu__item"><a href="https://www.scienceandindustrymuseum.org.uk">Science and Industry Museum</a></li>
<li class="c-menu__item"><a href="http://www.railwaymuseum.org.uk">National Railway Museum</a></li>
<li class="c-menu__item"><a href="https://www.locomotion.org.uk/">Locomotion</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
smgwds.menu();
})
</script>
<header class="c-masthead">
<div class="o-flex-container">
<a href="{{link}}" class="c-masthead__logo">
<svg viewBox="0 0 {{width}} {{height}}" width="{{width}}" height="{{aligned-height}}"
preserveAspectRatio="xMinYMid meet" class="c-logo--{{slug}}">
<use xlink:href="{{path '/assets/logos/sprite.symbol.svg'}}#{{slug}}" fill="#fff"></use>
</svg>
</a>
<div class="c-masthead__right c-menu">
<button class="c-menu__button" aria-controls="mobile-menu" aria-expanded="false">Site name</button>
<nav class="c-menu__nav" aria-expanded="false">
{{ render '@menu' }}
</nav>
</div>
</div>
</header>
{{ render '@sitenav' }}
<header class="c-nav-mobile" id="mobile-menu" aria-expanded="false">
<nav class="c-menu {{class}}">
{{ render '@menu--sitenav' }}
{{ render '@menu' }}
</nav>
</header>
{{{ init }}}