2021-12-19 09:50:55 +07:00
<!doctype html>
< html lang = "en" >
< head >
${require('./_head.html')
title="Navs"
description="The essential navbar component in pure semantic HTML."
canonical="navs.html"
}
< / head >
< body >
${require('./_nav.html')}
< main class = "container" id = "docs" >
${require('./_sidebar.html') active="navs-link"}
< div role = "document" >
< section id = "navs" >
< hgroup >
< h1 > Navs< / h1 >
< h2 > The essential navbar component in pure semantic HTML.< / h2 >
< / hgroup >
< article aria-label = "Nav example" >
< nav >
< ul >
< li > < strong > Brand< / strong > < / li >
< / ul >
< ul >
< li > < a href = "#" onclick = "event.preventDefault()" > Link< / a > < / li >
< li > < a href = "#" onclick = "event.preventDefault()" > Link< / a > < / li >
2022-03-06 16:44:29 +07:00
< li > < a href = "#" onclick = "event.preventDefault()" role = "button" > Button< / a > < / li >
2021-12-19 09:50:55 +07:00
< / ul >
< / nav >
< footer class = "code" >
< pre > < code > < < b > nav< / b > >
< < b > ul< / b > >
< < b > li< / b > > < < b > strong< / b > > Brand< /< b > strong< / b > > < /< b > li< / b > >
< /< b > ul< / b > >
< < b > ul< / b > >
< < b > li< / b > > < < b > a< / b > < i > href< / i > =< u > "#"< / u > > Link< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > > < < b > a< / b > < i > href< / i > =< u > "#"< / u > > Link< /< b > a< / b > > < /< b > li< / b > >
2022-03-06 16:44:29 +07:00
< < b > li< / b > > < < b > a< / b > < i > href< / i > =< u > "#"< / u > < i > role< / i > =< u > "button"< / u > > Button< /< b > a< / b > > < /< b > li< / b > >
2021-12-19 09:50:55 +07:00
< /< b > ul< / b > >
< /< b > nav< / b > > < / code > < / pre >
< / footer >
< / article >
< p > < code > < < b > ul< / b > > < / code > are automatically distributed horizontally.< / p >
< p > < code > < < b > li< / b > > < / code > are unstyled and inlined.< / p >
< article aria-label = "Nav example" >
< nav >
< ul >
< li >
< a href = "#" onclick = "event.preventDefault()" class = "secondary" aria-label = "Menu" >
< svg aria-hidden = "true" focusable = "false" role = "img" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" height = "16px" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" >
< line x1 = "3" y1 = "12" x2 = "21" y2 = "12" >
< / line > < line x1 = "3" y1 = "6" x2 = "21" y2 = "6" >
< / line > < line x1 = "3" y1 = "18" x2 = "21" y2 = "18" >
< / line >
< / svg >
< / a >
< / li >
< / ul >
< ul >
< li > < strong > Brand< / strong > < / li >
< / ul >
< ul >
< li >
< a href = "#" onclick = "event.preventDefault()" class = "secondary" aria-label = "Twitter" >
< svg aria-hidden = "true" focusable = "false" role = "img" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" height = "16px" fill = "currentColor" stroke = "none" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" >
< path d = "M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" > < / path >
< / svg >
< / a >
< / li >
< / ul >
< / nav >
< footer class = "code" >
< pre > < code > < < b > nav< / b > >
< < b > ul< / b > >
< < b > li< / b > > < < b > a< / b > < i > href< / i > =< u > "#"< / u > < i > class< / i > =< u > "secondary"< / u > > …< /< b > a< / b > > < /< b > li< / b > >
< /< b > ul< / b > >
< < b > ul< / b > >
< < b > li< / b > > < < b > strong< / b > > Brand< /< b > strong< / b > > < /< b > li< / b > >
< /< b > ul< / b > >
< < b > ul< / b > >
< < b > li< / b > > < < b > a< / b > < i > href< / i > =< u > "#"< / u > < i > class< / i > =< u > "secondary"< / u > > …< /< b > a< / b > > < /< b > li< / b > >
< /< b > ul< / b > >
< /< b > nav< / b > > < / code > < / pre >
< / footer >
< / article >
< p > Inside < code > < < b > aside< / b > > < / code > , navs are stacked vertically.< / p >
< article aria-label = "Vertical nav example" >
< aside >
< nav >
< ul >
< li > < a href = "#" onclick = "event.preventDefault()" > Link< / a > < / li >
< li > < a href = "#" onclick = "event.preventDefault()" > Link< / a > < / li >
< li > < a href = "#" onclick = "event.preventDefault()" > Link< / a > < / li >
< / ul >
< / nav >
< / aside >
< footer class = "code" >
< pre > < code > < < b > aside< / b > >
< < b > nav< / b > >
< < b > ul< / b > >
< < b > li< / b > > < < b > a< / b > < i > href< / i > =< u > "#"< / u > > Link< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > > < < b > a< / b > < i > href< / i > =< u > "#"< / u > > Link< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > > < < b > a< / b > < i > href< / i > =< u > "#"< / u > > Link< /< b > a< / b > > < /< b > li< / b > >
< /< b > ul< / b > >
< /< b > nav< / b > >
< /< b > aside< / b > > < / code > < / pre >
2022-01-25 21:13:14 +01:00
< / footer >
< / article >
2022-09-11 14:00:44 +07:00
< p > With < code > < i > aria-label< / i > =< u > "breadcrumb"< / u > < / code > , you can turn a nav into a breadcrumb, specifying the current page with: < code > < i > aria-current< / i > =< u > "page"< / u > < / code > .< / p >
2022-01-25 21:13:14 +01:00
2022-06-12 12:30:17 +02:00
< article aria-label = "breadcrumb nav example" >
< nav aria-label = "breadcrumb" >
2022-02-08 11:07:18 +01:00
< ul >
< li >
< a href = "#" > First link< / a >
< / li >
< li >
< a href = "#" > Second link< / a >
< / li >
< li >
< a aria-current = "page" >
Last link
< / a >
< / li >
< / ul >
2022-01-25 21:13:14 +01:00
< / nav >
< footer class = "code" >
2022-09-11 14:00:44 +07:00
< pre > < code > < < b > nav< / b > < i > aria-label< / i > =< u > "breadcrumb"< / u > >
2022-02-08 11:07:18 +01:00
< < b > ul< / b > >
< < b > li< / b > > < < b > a< / b > < i > href< / i > =< u > "#"< / u > > First link< < b > /a< / b > > < < b > /li< / b > >
< < b > li< / b > > < < b > a< / b > < i > href< / i > =< u > "#"< / u > > Second link< < b > /a< / b > > < < b > /li< / b > >
< < b > li< / b > > < < b > a< / b > < i > aria-current< / i > =< u > "page"< / u > > Last link< < b > /a< / b > > < < b > /li< / b > >
< < b > /ul< / b > >
2022-01-25 21:13:14 +01:00
< /< b > nav< / b > > < / code > < / pre >
2022-09-11 14:00:44 +07:00
2022-01-25 21:13:14 +01:00
< / footer >
< / article >
< / section >
${require('./_footer.html')}
< / div >
< / main >
< script src = "js/commons.min.js" > < / script >
< / body >
2021-12-19 09:50:55 +07:00
2022-01-25 21:13:14 +01:00
< / html >
