mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-24 02:16:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add a semantic way for creating a breadcrumb

Browse source
This commit is contained in:
JelmerVeen 2022-01-25 21:13:14 +01:00
parent a018211b14
commit 8049be9ffa
3 changed files with 50 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

41
docs/src/navs.html
View file

@ -114,14 +114,35 @@
&lt;/<b>nav</b>&gt;
&lt;/<b>aside</b>&gt;</code></pre>
</footer>
</article>
</section>
</footer>
</article>
${require('./_footer.html')}
</div>
</main>
<script src="js/commons.min.js"></script>
</body>
</html>
<p>With <code><b>role="breadcrumb"</b></code>, you can turn a nav into a breadcrumb.</p>
<article aria-label="Breadcrumb nav example">
<nav role="breadcrumb">
<a href="#">First link</a>
<a href="#">Second link</a>
Last link
</nav>
<footer class="code">
<pre><code>&lt;<b>nav</b> <i>role</i>=<u>"breadcrumb"</u>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;First link&lt;<b>/a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Second link&lt;<b>/a</b>&gt;
Last link
&lt;/<b>nav</b>&gt;</code></pre>
</footer>
</article>
</section>
${require('./_footer.html')}
</div>
</main>
<script src="js/commons.min.js"></script>
</body>
</html>