Navigation

The following example shows how the global navigation sits within the header component.

Open this Header including main navigation in a new tab

HTML:

<header class="global-header">
	<span role="status" aria-live="polite"></span>
	<div class="banner">
		<div class="banner__inner l-center">
			<p>This is a new website. <a href="https://github.com/w3c/w3c-website">Give feedback</a> to help us improve it.</p>
		</div>
	</div>
	<nav id="lang-nav" aria-label="Language options">
		<div class="l-center">
			<div class="l-cluster">
				<ul>
					<li><a href="/ja" hreflang="ja" lang="ja">日本語ホームページ<span class="visuallyhidden" lang="en"> (Japanese website)</span></a></li>
                    <li><a href="/zh" hreflang="zh-hans" lang="zh-hans">简体中文首页<span class="visuallyhidden" lang="en"> (Chinese website)</span></a></li>
				</ul>
			</div>
		</div>
	</nav>
	<nav id="global-nav" aria-label="Main">
		<div class="global-nav__inner l-center">
			<a class="logo-link" href="/">
                <span class="logo">
                    <img src="https://www.w3.org/assets/logos/w3c/w3c-no-bars.svg" alt="W3C" role="img"/>
                </span>
				<span class="visuallyhidden">Visit the W3C homepage</span>
			</a>
			<button type="button" class="button button--ghost with-icon--after with-icon--larger" data-trigger="mobile-nav" style="display: none;"></button>
			<ul data-component="nav-double-intro">
				<li class="top-nav-item has-children">
					<a href="path/to/page" class="nav-link">Standards</a>
					<div class="nav__submenu" data-nav="submenu" style="display: none;">
						<div class="l-center">
							<div class="nav__submenu__intro">
								<h2 class="nav__submenu__intro__heading">Standards</h2>
								<div class="nav__submenu__intro__text">
									<p>Understand the various specifications, their maturity levels on the Web Standards track, and their adoption.</p>
									<a href="path/to/page">Explore Web Standards</a>
								</div>
							</div>
							<ul>
								<li>
									<a href="path/to/page">Technical reports</a>
								</li>
								<li>
									<a href="path/to/page">Translations of technical reports</a>
								</li>
								<li>
									<a href="path/to/page"> Liaisons</a>
								</li>
								<li>
									<a href="path/to/page">Promote web standards</a>
								</li>
							</ul>
						</div>
					</div>
				</li>
				<li class="top-nav-item has-children">
					<a href="path/to/page" class="nav-link">Groups</a>
					<div class="nav__submenu" data-nav="submenu" style="display: none;">
						<div class="l-center">
							<div class="nav__submenu__intro">
								<h2 class="nav__submenu__intro__heading">Groups</h2>
								<div class="nav__submenu__intro__text">
									<p>A variety of groups develop Web Standards, guidelines, or supporting materials.</p>
									<a href="path/to/page">Discover W3C groups</a>
								</div>
							</div>
							<ul>
								<li>
									<a href="path/to/page">Working groups</a>
								</li>
								<li>
									<a href="path/to/page">Interest groups</a>
								</li>
								<li>
									<a href="path/to/page">Community groups</a>
								</li>
								<li>
									<a href="path/to/page">Business groups</a>
								</li>
								<li>
									<a href="path/to/page">Technical architecture group</a>
								</li>
								<li>
									<a href="path/to/page">Advisory Board</a>
								</li>
								<li>
									<a href="path/to/page">Invited experts</a>
								</li>
								<li>
									<a href="path/to/page">Participant guidebook</a>
								</li>
								<li>
									<a href="path/to/page">Mailing lists</a>
								</li>
							</ul>
						</div>
					</div>
				</li>
				<li class="top-nav-item has-children">
					<a href="path/to/page" class="nav-link">Get involved</a>
					<div class="nav__submenu" data-nav="submenu" style="display: none;">
						<div class="l-center">
							<div class="nav__submenu__intro">
								<h2 class="nav__submenu__intro__heading">Get involved</h2>
								<div class="nav__submenu__intro__text">
									<p>W3C works at the nexus of core technology, industry needs, and societal needs.</p>
									<a href="path/to/page">Find ways to get involved</a>
								</div>
							</div>
							<ul>
								<li>
									<a href="path/to/page">Working in business ecosystems</a>
								</li>
								<li>
									<a href="path/to/page">E-commerce</a>
								</li>
								<li>
									<a href="path/to/page">Media &amp; Entertainment</a>
								</li>
								<li>
									<a href="path/to/page">Network &amp; Communications</a>
								</li>
								<li>
									<a href="path/to/page">Publishing</a>
								</li>
								<li>
									<a href="path/to/page">Smart Cities</a>
								</li>
								<li>
									<a href="path/to/page">Transportation</a>
								</li>
								<li>
									<a href="path/to/page">Web Advertising</a>
								</li>
								<li class="break-after">
									<a href="path/to/page">Web of Things</a>
								</li>
								<li>
									<a href="path/to/page">W3C Membership</a>
								</li>
								<li>
									<a href="path/to/page">Donate</a>
								</li>
								<li>
									<a href="path/to/page">Sponsoring W3C</a>
								</li>
							</ul>
						</div>
					</div>
				</li>
				<li class="top-nav-item has-children">
					<a href="path/to/page" class="nav-link">Resources</a>
					<div class="nav__submenu" data-nav="submenu" style="display: none;">
						<div class="l-center">
							<div class="nav__submenu__intro">
								<h2 class="nav__submenu__intro__heading">Resources</h2>
								<div class="nav__submenu__intro__text">
									<p>Master Web technology fundamentals, use our developer tools, or contribute code.</p>
									<a href="path/to/page">Learn from W3C resources</a>
								</div>
							</div>
							<ul>
								<li>
									<a href="path/to/page">Validators and tools</a>
								</li>
								<li>
									<a href="path/to/page">Accessibility fundamentals</a>
								</li>
								<li>
									<a href="path/to/page">Internationalization</a>
								</li>
								<li>
									<a href="path/to/page">Learn CSS</a>
								</li>
							</ul>
						</div>
					</div>
				</li>
				<li class="top-nav-item has-children">
					<a href="path/to/page" class="nav-link">News and events</a>
					<div class="nav__submenu" data-nav="submenu" style="display: none;">
						<div class="l-center">
							<div class="nav__submenu__intro">
								<h2 class="nav__submenu__intro__heading">News and events</h2>
								<div class="nav__submenu__intro__text">
									<p>Recent content across news, blogs, press releases, media; upcoming events.</p>
									<a href="path/to/page">Follow news and events</a>
								</div>
							</div>
							<ul>
								<li>
									<a href="path/to/page">News</a>
								</li>
								<li>
									<a href="path/to/page">Blog</a>
								</li>
								<li>
									<a href="path/to/page">Press releases</a>
								</li>
								<li class="break-after">
									<a href="path/to/page">In the media</a>
								</li>
								<li>
									<a href="path/to/page">Events</a>
								</li>
								<li>
									<a href="path/to/page">Talks</a>
								</li>
								<li>
									<a href="path/to/page">Workshops</a>
								</li>
								<li>
									<a href="path/to/page">Meetings</a>
								</li>
								<li>
									<a href="path/to/page">Conferences</a>
								</li>
							</ul>
						</div>
					</div>
				</li>
				<li class="top-nav-item has-children">
					<a href="path/to/page" class="nav-link">About</a>
					<div class="nav__submenu" data-nav="submenu" style="display: none;">
						<div class="l-center">
							<div class="nav__submenu__intro">
								<h2 class="nav__submenu__intro__heading">About</h2>
								<div class="nav__submenu__intro__text">
									<p>Understand our values and principles, learn our history, look into our policies, meet our people.</p>
									<a href="path/to/page">Find out more about us</a>
								</div>
							</div>
							<ul>
								<li>
									<a href="path/to/page">Our mission</a>
								</li>
								<li>
									<a href="path/to/page">Sponsoring W3C</a>
								</li>
								<li>
									<a href="path/to/page">History</a>
								</li>
								<li>
									<a href="path/to/page">Leadership</a>
								</li>
								<li>
									<a href="path/to/page">Staff</a>
								</li>
								<li>
									<a href="path/to/page">Evangelists</a>
								</li>
								<li>
									<a href="path/to/page">Careers</a>
								</li>
								<li>
									<a href="path/to/page">Press and media</a>
								</li>
								<li>
									<a href="path/to/page">Contact</a>
								</li>
								<li>
									<a href="path/to/page">Policies and legal information</a>
								</li>
							</ul>
						</div>
					</div>
				</li>
				<li class="top-nav-item">
					<a href="path/to/page" class="nav-link icon-link"><img class="icon" src="/dist/assets/svg/search.svg" width="24" height="24" alt aria-hidden="true"><span class="hide-at-max-width">Search</span></a>
				</li>
				<li class="top-nav-item">
					<a href="path/to/page" class="account-login icon-link with-icon--after">My account <span class="avatar avatar--small icon"><img src="/dist/assets/svg/avatar.svg" width="32" height="32" alt aria-hidden="true" /></span></a>
				</li>
			</ul>
		</div>
	</nav>
</header>

¶Considerations

Note the use of the inline style display: none; on the button element with the data attribute data-trigger="mobile-nav". This data attribute is targeted by the JavaScript for the global navigation. In the absence of JavaScript, which is required for the off-canvas mobile navigation, the button remains hidden to users.

The inline style display: none; is also used on instances of .nav__submenu. As the sub-navigation requires JavaScript for the drop-down effect, this keeps it hidden if JavaScript is not available. It also prevents the sub-menus from flashing from visible to hidden when an uncached page first loads.

If a top level navigation item will have child links, indicated by the .has-children class on the <li>, JavaScript replaces the link with a button for toggling the display of the sub-navigation.