UI - Breadcrumb

Card Puncher Data Processing


A breadcrumb trail on a page indicates the page's position in the site hierarchy.

It permits to categorize the information.


A Resource (Web Page) - Type (Structured Data | Metadata )

Example in Web Page Metadata - Json-Ld syntax

<script type="application/ld+json">
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Books",
    "item": "https://example.com/books"
    "@type": "ListItem",
    "position": 2,
    "name": "Authors",
    "item": "https://example.com/books/authors"
    "@type": "ListItem",
    "position": 3,
    "name": "Ann Leckie",
    "item": "https://example.com/books/authors/annleckie"
    "@type": "ListItem",
    "position": 4,
    "name": "Ancillary Justice",
    "item": "https://example.com/books/authors/ancillaryjustice"

More … https://developers.google.com/search/docs/data-types/breadcrumb

Example of appearance on Google Search

Google Search Breadcrumb


Breadcrumd with:

  <h2>You are here:</h2>
  <ul id="navlist">
    <li><a href="/">Main</a> →</li>
    <li><a href="/products/">Products</a> →</li>
    <li><a href="/products/dishwashers/">Dishwashers</a> →</li>
    <li><a>Second hand</a></li>


Discover More
Card Puncher Data Processing
UI - Navigation

A navigation is just a sequence of actions that a user (or programmatic client) can perform. navigationpage’s URLPuppeteer definition...

Share this page:
Follow us:
Task Runner