Навигация и выпадающие меню

Навигация — меню со ссылками на разделы сайта, обычно в шапке. В Pico меню собирается из <nav> и списков <ul>: внутри <nav> списки теряют маркеры и выстраиваются в строку. Выпадающее меню — список, который раскрывается под кнопкой; Pico делает его на уже знакомых <details> и <summary>.

Меню в шапке

Два списка внутри <nav> Pico прижимает к разным краям: первый — влево, последний — вправо. Добавьте меню в <header> страницы Анны:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 
<header class="container">
  <nav>
    <ul>
      <li><strong>Анна Петрова</strong></li>
    </ul>
    <ul>
      <li><a href="#" aria-current="page">Блог</a></li>
      <li><a href="#">Проекты</a></li>
      <li><a href="#" role="button">Связаться</a></li>
    </ul>
  </nav>
</header>

Слева имя, справа три пункта: «Блог» выделен как текущая страница, «Связаться» — кнопка. Атрибут aria-current="page" сообщает и Pico, и программе чтения с экрана, где находится посетитель.

Выпадающее меню

Класс dropdown у <details> превращает аккордеон в выпадающий список: <summary> становится полем со стрелкой, а <ul> — всплывающим меню.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 
<div style="min-height: 220px">
  <details class="dropdown">
    <summary>Темы блога</summary>
    <ul>
      <li><a href="#">CSS</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">Доступность</a></li>
    </ul>
  </details>
</div>

Щёлкните по полю — под ним всплывёт список тем поверх содержимого. Повторный щелчок закрывает его. Блок с min-height нужен только для того, чтобы списку хватило места в превью.

Выпадающее меню внутри навигации

В <nav> тот же блок кладут в пункт <li>. Атрибут dir="rtl" у списка выравнивает его по правому краю, чтобы меню у правого края страницы не уходило за экран:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 
<div style="min-height: 200px">
  <nav>
    <ul>
      <li><strong>Анна Петрова</strong></li>
    </ul>
    <ul>
      <li><a href="#">Блог</a></li>
      <li>
        <details class="dropdown">
          <summary>Ещё</summary>
          <ul dir="rtl">
            <li><a href="#">Обо мне</a></li>
            <li><a href="#">Резюме</a></li>
          </ul>
        </details>
      </li>
    </ul>
  </nav>
</div>

Пункт «Ещё» выглядит как ссылка со стрелкой, а меню раскрывается влево от него.

Хлебные крошки

Хлебные крошки — цепочка ссылок от главной страницы до текущей. Это тоже <nav>, но с aria-label="breadcrumb":

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 
<nav aria-label="breadcrumb">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Блог</a></li>
    <li>Сетка без медиазапросов</li>
  </ul>
</nav>

Пункты разделены косыми чертами, последний — обычный текст.

Частая ошибка

Сложить ссылки меню прямо в <nav> без <ul> и <li>. Pico выстраивает в строку именно списки внутри <nav>, поэтому голые ссылки слипнутся без отступов. Каждый пункт меню — отдельный <li>.