Components
Nav
The essential navbar component in pure semantic HTML.
<ul>
are automatically distributed horizontally.
<li>
are unstyled and inlined.
<a>
are underlined only on :hover
.
Link variants#
You can use .secondary
, .contrast
, and .outline
classes (not available in the class-less version).
Buttons#
You can use <button>
inside <li>
.
Button sizes automatically match link size and margin.
Vertical stacking#
Inside <aside>
, navs items are stacked vertically.
You can also use Dropdowns inside navs.
Breadcrumb#
With <nav aria-label="breadcrumb">
, you can turn a nav into a breadcrumb.
You can change the divider with a local CSS custom property --pico-nav-breadcrumb-divider
.