Breadcrumb Navigation (with Schema)

<nav aria-label="Breadcrumb">
    <ol class="breadcrumb">
        <li><a href="/">Home</a></li>
        <li><a href="/docs">Docs</a></li>
        <li><a href="/docs/api">API</a></li>
        <li aria-current="page">Authentication</li>
    </ol>
</nav>

<style>
.breadcrumb {
    display: flex; gap: 8px;
    list-style: none; padding: 0; margin: 16px 0;
    font-size: 0.9rem; color: #6b7280;
}
.breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: 0.4; }
.breadcrumb a { color: inherit; }
.breadcrumb [aria-current] { color: #111; font-weight: 600; }
</style>

<!-- Schema.org JSON-LD — shows under URL in Google search results -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type":    "BreadcrumbList",
  "itemListElement": [
    {"@type":"ListItem","position":1,"name":"Home", "item":"https://example.com/"},
    {"@type":"ListItem","position":2,"name":"Docs", "item":"https://example.com/docs"},
    {"@type":"ListItem","position":3,"name":"API",  "item":"https://example.com/docs/api"},
    {"@type":"ListItem","position":4,"name":"Authentication"}
  ]
}
</script>