diff options
Diffstat (limited to 'devdocs/html/element%2Fnav.html')
| -rw-r--r-- | devdocs/html/element%2Fnav.html | 105 |
1 files changed, 105 insertions, 0 deletions
diff --git a/devdocs/html/element%2Fnav.html b/devdocs/html/element%2Fnav.html new file mode 100644 index 00000000..d8d5d024 --- /dev/null +++ b/devdocs/html/element%2Fnav.html @@ -0,0 +1,105 @@ +<header><h1><nav>: The Navigation Section element</h1></header><div class="section-content"><p>The <code><nav></code> <a href="../index">HTML</a> 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.</p></div> +<h2 id="try_it">Try it</h2> +<div class="section-content"> +<iframe class="interactive is-tabbed-standard-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/nav.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#sectioning_content">sectioning content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#flow_content">Flow content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role">navigation</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"><ul> <li>It's not necessary for all links to be contained in a <code><nav></code> element. <code><nav></code> is intended only for a major block of navigation links; typically the <a href="footer"><code><footer></code></a> element often has a list of links that don't need to be in a <a href="nav" aria-current="page"><code><nav></code></a> element.</li> <li>A document may have several <a href="nav" aria-current="page"><code><nav></code></a> elements, for example, one for site navigation and one for intra-page navigation. <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby"><code>aria-labelledby</code></a> can be used in such case to promote accessibility, see <a href="heading_elements#labeling_section_content">example</a>.</li> <li>User agents, such as screen readers targeting disabled users, can use this element to determine whether to omit the initial rendering of navigation-only content.</li> </ul></div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>In this example, a <code><nav></code> block is used to contain an unordered list (<a href="ul"><code><ul></code></a>) of links. With appropriate CSS, this can be presented as a sidebar, navigation bar, or drop-down menu.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="lvHiSO1FEwp248bp4D6V4uLSBWnonuH9Q1bJkeF/9DY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Contact<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> +</pre> +</div> <p>The semantics of the <code>nav</code> element is that of providing links. However a <code>nav</code> element doesn't have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="NpWeQ3PZnVei0X8e1Ma+f4F87L9r2flLHqsYdUdbvbM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Navigation<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + You are on my home page. To the north lies <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/blog<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>my blog<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>, from + whence the sounds of battle can be heard. To the east you can see a large + mountain, upon which many <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/school<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>school papers<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> are littered. + Far up this mountain you can spy a little figure who appears to be me, + desperately scribbling a <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/school/thesis<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>thesis<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + To the west are several exits. One fun-looking exit is labeled + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://games.example.com/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>"games"<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>. Another more + boring-looking exit is labeled <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://isp.example.net/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>ISP™<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + To the south lies a dark and dank <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/about<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>contacts page<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>. + Cobwebs cover its disused entrance, and at one point you see a rat run + quickly out of the page. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/nav/runner.html?id=examples" loading="lazy"></iframe> +</div></div> +<h2 id="specifications">Specifications</h2> +<div class="_table"><table class="standard-table"> +<thead><tr><th scope="col">Specification</th></tr></thead> +<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/sections.html#the-nav-element">HTML Standard <br><small># the-nav-element</small></a></td></tr></tbody> +</table></div> +<h2 id="browser_compatibility">Browser compatibility</h2> +<div class="_table"><table> +<thead> +<tr id="bct-browser-type"> +<th></th> +<th colspan="6">Desktop</th> +<th colspan="6">Mobile</th> +</tr> +<tr id="bct-browsers"> +<th></th> +<th>Chrome</th> +<th>Edge</th> +<th>Firefox</th> +<th>Internet Explorer</th> +<th>Opera</th> +<th>Safari</th> +<th>WebView Android</th> +<th>Chrome Android</th> +<th>Firefox for Android</th> +<th>Opera Android</th> +<th>Safari on IOS</th> +<th>Samsung Internet</th> +</tr> +</thead> +<tbody><tr> +<th><code>nav</code></th> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">11.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">11.1</td> +<td class="bc-supports-yes">4.2</td> +<td class="bc-supports-yes">1.0</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>Other section-related elements: <a href="body"><code><body></code></a>, <a href="article"><code><article></code></a>, <a href="section"><code><section></code></a>, <a href="aside"><code><aside></code></a>, <a href="heading_elements">h1</a>, <a href="heading_elements">h2</a>, <a href="heading_elements">h3</a>, <a href="heading_elements">h4</a>, <a href="heading_elements">h5</a>, <a href="heading_elements">h6</a>, <a href="hgroup"><code><hgroup></code></a>, <a href="header"><code><header></code></a>, <a href="footer"><code><footer></code></a>, <a href="address"><code><address></code></a>;</li> <li> +<a href="heading_elements">Sections and outlines of an HTML document</a>.</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role">ARIA: Navigation role</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br> + <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav</a> + </p> +</div> |