Polish & Launch
Add Breadcrumb Navigation
Add breadcrumb navigation to multi-level pages so visitors always know where they are and can navigate back easily — with BreadcrumbList JSON-LD structured data for search engines.
1/2 filled
Example breadcrumb paths
Options
Built something? Show it off in the Airo Builder Lab
Your Prompt
1/2 filled
Add breadcrumb navigation to my site.
Example breadcrumb paths:
• [e.g., Home > Shop > Candles > Soy Wax Candle]
• [e.g., Home > Blog > Category > Post Title]
Add BreadcrumbList JSON-LD structured data: yes
Requirements:
1. Create a reusable Breadcrumb component that accepts an array of { label: string, href?: string } items.
2. Render it as:
<nav aria-label="Breadcrumb">
<ol> — use an ordered list, not unordered
<li> for each item
</ol>
</nav>
3. The last item (current page) must NOT be a link. Add aria-current="page" to it.
4. Separator icons (e.g., ChevronRight from lucide-react) must have aria-hidden="true".
5. Use CSS variables for all colors so the breadcrumb respects the site's light/dark theme.
6. Add the Breadcrumb component to every page that is more than one level deep (based on the paths above).
7. Place the breadcrumb near the top of the page content, below the header and above the page title.
8. On each page that has breadcrumbs, also inject BreadcrumbList JSON-LD structured data:
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com/" },
{ "@type": "ListItem", "position": 2, "name": "Category", "item": "https://example.com/category/" },
{ "@type": "ListItem", "position": 3, "name": "Current Page" }
]
}
Use React 19's native document metadata to render the <script type="application/ld+json"> tag.
Do not change any other layout or styles.
Unfilled fields show as [brackets] — fill them in or leave as-is.