Pico styles nav lists for horizontal menus and breadcrumbs with minimal markup—unordered lists inside nav are the default pattern, not custom flex utility stacks.
Navigation patterns
- Site nav —
header→nav→ul/li/a - In-page toc —
nav aria-label="Table of contents"linking to section ids - Footer links — secondary
navinfooter, often smaller copy viasmall
Unlike Bootstrap navbar, there is no bundled JavaScript burger component—you keep markup simple and add your own toggle if mobile collapse is required.
Important interview questions and answers
- Q: Why use
navinstead of a styleddiv?
A: Landmarks let assistive tech list navigation regions; Pico targetsnav ulwith sensible defaults. - Q: How does Pico differ from Tailwind for menus?
A: Tailwind composes flex/spacing utilities per link; Pico expects semantic list markup and styles it holistically.
Self-check
- What is the simplest semantic structure for a horizontal menu?
- When would you add
aria-labelonnav?
Challenge
Landmark map
- Add
header,nav,main, andfooter. - Run a mental screen-reader pass: one
mainonly.
Done when: landmarks are unique and navigation is inside nav.