Navigation
The <nav> element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
<nav> by Mozilla Contributors is licensed under CC-BY-SA 2.5.
According to the A11Y Style Guide, all navigation elements should be inside a <nav> tag. Furthermore, menus should be labeled according to their individual function. The Delta Design System features a <nav> in the <header> and <footer> and uses aria-labelledby="header-navigation" and aria-labelledby="footer-navigation" to provide context and improve accessibility.
Navigation Structure
In both the <header> and <footer> the <navigation> is a simple <ul>. However, the <header> also includes a button for mobile to open and close the header navigation.
Note that we also have a Search molecule that can be added to your navigation.
Header Navigation
<nav aria-labelledby="header-navigation">
<button class="menu-toggle" aria-expanded="false" aria-controls="header-navigation">
<svg class="menu-toggle-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/></svg>
<svg class="menu-toggle-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
</button>
<ul id="header-navigation">
<li><a href="#">About</a></li>
<li><a href="#">Atoms</a></li>
<li><a href="#">Molecules</a></li>
<li><a href="#">Organisms</a></li>
<li><a href="#">Style</a></li>
<li><a href="#">Downloads</a></li>
</ul>
</nav>Header Navigation with Search
<nav aria-labelledby="header-navigation">
<button class="menu-toggle" aria-expanded="false" aria-controls="header-navigation">
<svg class="menu-toggle-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/></svg>
<svg class="menu-toggle-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
</button>
<ul id="header-navigation">
<li><a href="#">About</a></li>
<li><a href="#">Atoms</a></li>
<li><a href="#">Molecules</a></li>
<li><a href="#">Organisms</a></li>
<li><a href="#">Style</a></li>
<li><a href="#">Downloads</a></li>
</ul>
<button class="search-toggle" aria-expanded="false">
<svg class="search-toggle-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11 2c4.968 0 9 4.032 9 9s-4.032 9-9 9-9-4.032-9-9 4.032-9 9-9zm0 16c3.867 0 7-3.133 7-7 0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7zm8.485.071l2.829 2.828-1.415 1.415-2.828-2.829 1.414-1.414z"/></svg>
<svg class="search-toggle-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
</button>
<form class="search" role="search" aria-hidden="true">
<fieldset>
<input type="search" name="q" id="search-input" placeholder="Search" aria-label="Search site content">
<label for="search-input">Search</label>
</fieldset>
<button type="submit">Search</button>
</form>
</nav>Footer Navigation
<nav aria-labelledby="footer-navigation">
<ul id="footer-navigation">
<li><a href="#">About</a></li>
<li><a href="#">Atoms</a></li>
<li><a href="#">Molecules</a></li>
<li><a href="#">Organisms</a></li>
<li><a href="#">Style</a></li>
<li><a href="#">Downloads</a></li>
</ul>
</nav>