Navigation with new logo v1
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">
<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 class="logo logo--circle" src="/dist/assets/images/w3c-logo-full.png" alt="World Wide Web Consortium" 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 & Entertainment</a>
</li>
<li>
<a href="path/to/page">Network & 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.