Schema.org Breadcrumb Markup

<nav aria-label="Breadcrumb" class="breadcrumb-nav">
  <ol class="breadcrumb"
      style="list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0.25rem;font-size:0.875rem;"
      itemscope itemtype="https://schema.org/BreadcrumbList">

    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a href="/" itemprop="item" style="color:#3b82f6;text-decoration:none;">
        <span itemprop="name">Home</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>

    <li aria-hidden="true" style="color:#94a3b8;">/</li>

    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a href="/blog/" itemprop="item" style="color:#3b82f6;text-decoration:none;">
        <span itemprop="name">Blog</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>

    <li aria-hidden="true" style="color:#94a3b8;">/</li>

    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name" aria-current="page" style="color:#64748b;">
        Article Title
      </span>
      <meta itemprop="position" content="3" />
    </li>

  </ol>
</nav>