Navigation and dropdowns

Navigation is a menu of links to the site sections, usually in the header. In Pico a menu is built from <nav> and <ul> lists: inside <nav> lists lose their bullets and line up in a row. A dropdown is a list that opens under a button; Pico builds it on the familiar <details> and <summary>.

A header menu

Pico pushes two lists inside <nav> to opposite edges: the first to the left, the last to the right. Add a menu to the <header> of Anna's page:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 
<header class="container">
  <nav>
    <ul>
      <li><strong>Anna Petrova</strong></li>
    </ul>
    <ul>
      <li><a href="#" aria-current="page">Blog</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#" role="button">Contact</a></li>
    </ul>
  </nav>
</header>

The name is on the left and three items on the right: "Blog" is highlighted as the current page and "Contact" is a button. The aria-current="page" attribute tells both Pico and a screen reader where the visitor is.

A dropdown

The dropdown class on <details> turns the accordion into a dropdown: <summary> becomes a field with an arrow and <ul> a popup menu.

<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>Blog topics</summary>
    <ul>
      <li><a href="#">CSS</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">Accessibility</a></li>
    </ul>
  </details>
</div>

Click the field — a list of topics pops up below it over the content. Another click closes it. The min-height block only gives the list room in the preview.

A dropdown inside navigation

In <nav> the same block goes into an <li> item. The dir="rtl" attribute on the list aligns it to the right edge so a menu at the right edge of the page does not run off screen:

<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>Anna Petrova</strong></li>
    </ul>
    <ul>
      <li><a href="#">Blog</a></li>
      <li>
        <details class="dropdown">
          <summary>More</summary>
          <ul dir="rtl">
            <li><a href="#">About me</a></li>
            <li><a href="#">Resume</a></li>
          </ul>
        </details>
      </li>
    </ul>
  </nav>
</div>

The "More" item looks like a link with an arrow, and the menu opens to the left of it.

Breadcrumbs

Breadcrumbs are a chain of links from the home page to the current one. This is also a <nav>, but with 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="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li>A grid without media queries</li>
  </ul>
</nav>

The items are separated by slashes, and the last one is plain text.

Common mistake

Putting menu links straight into <nav> without <ul> and <li>. Pico lines up the lists inside <nav>, so bare links stick together with no spacing. Every menu item is its own <li>.