<nav> Tag Examples
Examples of the nav
tag in HTML 5
Example of <nav> tag with breadcrumb trail
(see breadcrumb trail navigation section demo above)
<nav> <a rel="up up" href="../../index.html">HTML 5</a> >  <a rel="up" href="../index.html">HTML Tags</a> >  <b>HTML <nav> tag</b> </nav>
As shown in the example above, the value up
may be specified more than once in the <a rel> attribute: rel="up"
points to the parent document, rel="up up"
points to the grandparent, and so forth.
Search Engine Friendly Navigation Section with Breadcrumb Trail
Some search engines, particularly Google, may include a breadcrumb trail in their search engine results if the links include microdata properties for a breadcrumb trail.
Search Engine Results
HTML <a href> Tag
Description, syntax, usage, attributes and examples of the HTML <a href> tag.
www.html-5.com › HTML Tags › HTML <a href> Tag › ExamplesTo code the breadcrumb trail microdata the breadcrumb trail list of links must include some microdata properties:
- elements with
itemscope="itemscope"
(a boolean attribute) anditemtype="http://data-vocabulary.org/Breadcrumb"
identifying each link in the breadcrumb trail - an a href element with
itemprop="url"
indicating the target URL of each breadcrumb link - an element with
itemprop="title"
that provides the text for each breadcrumb link
<nav class="breadcrumb-trail"> <ul> <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"> <a itemprop="url" rel="up up up" href="/"> <span itemprop="title">HTML 5</span> </a> </li> <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"> <a class="nobr" itemprop="url" rel="up up" href="/tags/"> <span itemprop="title">HTML Tags</span> </a> </li> <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"> <a itemprop="url" rel="up" href="./"> <span itemprop="title">HTML <a href> Tag</span> </a> </li> <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"> <a itemprop="url" href="#examples#"> <span itemprop="title">Examples</span> </a> </li> </ul> </nav>
Drop-Down Menu
(see toolbar with drop-down menu demo above)
<nav style="height: 1.5em"> <style scoped="scoped"> menu[type="toolbar"], menu[type="toolbar"] * { margin: 0; padding: 0: } menu[type="toolbar"] > li { display: inline-block; vertical-align: top; border: 2px solid #000000; } menu[type="toolbar"] > li > menu { float: left; width: 8em; background-color: #cccccc; text-align: center; } menu[type="toolbar"] > li > menu:before { content: attr(label); color: #333333; } menu[type="toolbar"] > li > menu > li { position: relative; z-index: 1; background-color: #cccccc; text-align: left; display: none; -moz-transition: background-color 0.3s; -webkit-transition: background-color 0.3s } menu[type="toolbar"] > li > menu:hover > li { display: block; } menu[type="toolbar"] > li > menu:hover > li:first-child { border-top: 2px solid #000000; } menu[type="toolbar"] > li > menu > li > a { padding: 0 1em; color: #333333; text-decoration: none; } menu[type="toolbar"] > li > menu:hover, menu[type="toolbar"] > li > menu:hover:before, menu[type="toolbar"] > li > menu > li:hover, menu[type="toolbar"] > li > menu > li:hover > a { background-color: #999999; color: #000000; } </style> <menu type="toolbar"> <li> <menu label="Sections"> <li><a href="../../tutorials/">Tutorials</a></li> <li><a href="../../examples/">Examples</a></li> </menu> </li> <li> <menu label="<menu>"> <li><a href="#description">Description</a></li> <li><a href="#syntax">Syntax</a></li> <li><a href="#attributes">Attributes</a></li> <li><a href="#examples">Examples</a></li> <li><a href="#whats-new">Changes</a></li> </menu> </li> </menu> </nav>