Navigation markup

no-ul.html

<!-- wp:navigation -->
<nav class="wp-block-navigation">
	<div role="list">
		<!-- wp:link -->
		<div class="wp-block-link" role="listitem">
			<a href="/">Home</a>
			<div class="wp-block-link__submenu" role="list">
				<!-- wp:link -->
				<div class="wp-block-link" role="listitem">
					<a href="/contact-us">Contact Us</a>
				</div>
				<!-- /wp:link -->
			</div>
		</div>
		<!-- /wp:link -->
		<!-- wp:link -->
		<div class="wp-block-link" role="listitem">
			<a href="/">About</a>
			<div class="wp-block-link__submenu" role="list">
				<!-- This would be a dynamic block that renders a <div class="wp-block-pages"> with links in it. The wrapper div would have display: contents. -->
				<!-- wp:pages { "parent": 123 } /-->
			</div>
		</div>
		<!-- /wp:link -->
		<!-- wp:link { "submenuWidth": "wide" } -->
		<div class="wp-block-link" role="listitem">
			<span>Services</span>
			<div class="wp-block-link__submenu is-wide" role="list">
				<!-- wp:columns -->
				<div class="wp-block-columns">
					<!-- wp:column -->
						<div class="wp-block-column">
							<!-- wp:link -->
							<div class="wp-block-link" role="listitem">
								<a href="/services/executive-team">Executive Team</a>
							</div>
							<!-- /wp:link -->
							<!-- wp:link -->
							<div class="wp-block-link" role="listitem">
								<a href="/services/creative-and-marketing">Creative and Marketing</a>
							</div>
							<!-- /wp:link -->
							<!-- wp:link -->
							<div class="wp-block-link" role="listitem">
								<a href="/services/location-and-hours">Location and Hours</a>
							</div>
							<!-- /wp:link -->
							<!-- wp:link -->
							<div class="wp-block-link" role="listitem">
								<a href="/services/careers">Careers</a>
							</div>
							<!-- /wp:link -->
						</div>
					<!-- /wp:column -->
					<!-- wp:column -->
						<div class="wp-block-column">
							<!-- wp:image -->
								<figure class="wp-block-image">...</figure>
							<!-- /wp:image -->
						</div>
					<!-- /wp:column -->
				</div>
				<!-- /wp:columns -->
			</div>
		</div>
		<!-- /wp:link -->
		<!-- wp:search -->
		<form class="wp-block-search">...</form>
		<!-- /wp:search -->
	</div>
</nav>
<!-- /wp:navigation -->

ul.html

<!-- wp:navigation -->
<nav class="wp-block-navigation">
	<!-- wp:links -->
	<ul class="wp-block-links">
		<li>
			<!-- wp:link -->
			<div class="wp-block-link">
				<a href="/">Home</a>
				<div class="wp-block-link__submenu">
					<!-- wp:links -->
					<ul class="wp-block-links">
						<li>
							<!-- wp:link -->
							<div class="wp-block-link">
								<a href="/contact-us">Contact Us</a>
							</div>
							<!-- /wp:link -->
						</li>
					</ul>
					<!-- /wp:links -->
				</div>
			</div>
			<!-- /wp:link -->
		</li>
		<li>
			<!-- wp:link -->
			<div class="wp-block-link">
				<a href="/">About</a>
				<div class="wp-block-link__submenu">
					<!-- This would be a dynamic block that renders a <ul class="wp-block-pages"> with links in it. -->
					<!-- wp:pages { "parent": 123 } /-->
				</div>
			</div>
			<!-- /wp:link -->
		</li>
		<li>
			<!-- wp:link { "submenuWidth": "wide" } -->
			<div class="wp-block-link">
				<span>Services</span>
				<div class="wp-block-link__submenu is-wide">
					<!-- wp:columns -->
					<div class="wp-block-columns">
						<!-- wp:column -->
							<div class="wp-block-column">
								<!-- wp:links -->
								<ul class="wp-block-links">
									<li>
										<!-- wp:link -->
										<div class="wp-block-link">
											<a href="/services/executive-team">Executive Team</a>
										</div>
										<!-- /wp:link -->
									</li>
									<li>
										<!-- wp:link -->
										<div class="wp-block-link">
											<a href="/services/creative-and-marketing">Creative and Marketing</a>
										</div>
										<!-- /wp:link -->
									</li>
									<li>
										<!-- wp:link -->
										<div class="wp-block-link">
											<a href="/services/location-and-hours">Location and Hours</a>
										</div>
										<!-- /wp:link -->
									</li>
									<li>
										<!-- wp:link -->
										<div class="wp-block-link">
											<a href="/services/careers">Careers</a>
										</div>
										<!-- /wp:link -->
									</li>
								</ul>
								<!-- /wp:links -->
							</div>
						<!-- /wp:column -->
						<!-- wp:column -->
							<div class="wp-block-column">
								<!-- wp:image -->
									<figure class="wp-block-image">...</figure>
								<!-- /wp:image -->
							</div>
						<!-- /wp:column -->
					</div>
					<!-- /wp:columns -->
				</div>
			</div>
			<!-- /wp:link -->
		</li>
	</ul>
	<!-- /wp:links -->
	<!-- wp:search -->
	<form class="wp-block-search">...</form>
	<!-- /wp:search -->
</nav>
<!-- /wp:navigation -->