Skip to main content
The breadcrumb component creates a navigation trail showing the user’s location in the site hierarchy. It helps users understand where they are and navigate back to parent pages.

Basic Usage

SELECT 'breadcrumb' AS component;
SELECT 'Home' AS title, '/' AS link;
SELECT 'Products' AS title, '/products.sql' AS link;
SELECT 'Laptop' AS title, true AS active;

Top-Level Properties

id
text
HTML identifier for the breadcrumb navigation
class
text
Custom CSS class for the breadcrumb container

Item Properties

title
text
required
Text to display for this breadcrumb item
URL to navigate to when clicked. If not provided, uses ?link={title} by default.
active
boolean
Mark this item as the current page (not clickable, styled differently)
description
text
Tooltip text shown when hovering over the breadcrumb item

Examples

Basic Breadcrumb

SELECT 'breadcrumb' AS component;
SELECT 'Home' AS title, '/' AS link;
SELECT 'Documentation' AS title, true AS active;

Multi-Level Breadcrumb

SELECT 'breadcrumb' AS component;

SELECT 'Home' AS title, '/' AS link;
SELECT 'Categories' AS title, '/categories.sql' AS link;
SELECT 'Electronics' AS title, '/categories.sql?id=1' AS link;
SELECT 'Laptops' AS title, '/products.sql?category=laptops' AS link;
SELECT 'MacBook Pro' AS title, true AS active;
SELECT 'breadcrumb' AS component;

SELECT 'Home' AS title,
       '/' AS link,
       'Go to homepage' AS description;

SELECT 'Settings' AS title,
       '/settings.sql' AS link,
       'Application settings' AS description;

SELECT 'Account' AS title,
       true AS active,
       'Your account settings' AS description;

Dynamic Breadcrumb from URL Parameters

SELECT 'breadcrumb' AS component;

SELECT 'Home' AS title, '/' AS link;

SELECT category_name AS title,
       '/products.sql?category=' || category_id AS link
FROM categories
WHERE category_id = $category;

SELECT product_name AS title,
       true AS active
FROM products
WHERE product_id = $product;
SELECT 'breadcrumb' AS component;

SELECT 'Home' AS title, '/' AS link;

-- Build breadcrumb trail from hierarchical data
WITH RECURSIVE path AS (
    SELECT id, name, parent_id, 0 as level
    FROM categories
    WHERE id = $current_category
    
    UNION ALL
    
    SELECT c.id, c.name, c.parent_id, p.level + 1
    FROM categories c
    INNER JOIN path p ON c.id = p.parent_id
)
SELECT name AS title,
       '/category.sql?id=' || id AS link,
       level = 0 AS active
FROM path
ORDER BY level DESC;

Simple Two-Level Navigation

SELECT 'breadcrumb' AS component;

SELECT 'Dashboard' AS title, '/dashboard.sql' AS link;
SELECT 'Reports' AS title, true AS active;

E-commerce Product Breadcrumb

SELECT 'breadcrumb' AS component;

SELECT 'Shop' AS title, '/shop.sql' AS link;
SELECT 'Men' AS title, '/shop.sql?gender=men' AS link;
SELECT 'Clothing' AS title, '/shop.sql?gender=men&type=clothing' AS link;
SELECT 'T-Shirts' AS title, '/products.sql?category=tshirts' AS link;
SELECT 'Blue Cotton T-Shirt' AS title, true AS active;

Documentation Breadcrumb

SELECT 'breadcrumb' AS component;

SELECT 'Docs' AS title, '/docs/' AS link;
SELECT 'Components' AS title, '/docs/components/' AS link;
SELECT 'Form' AS title, true AS active;

Admin Panel Breadcrumb

SELECT 'breadcrumb' AS component;

SELECT 'Admin' AS title, '/admin/' AS link;
SELECT 'Users' AS title, '/admin/users.sql' AS link;
SELECT 'Edit User' AS title, true AS active;

Blog Article Breadcrumb

SELECT 'breadcrumb' AS component;

SELECT 'Blog' AS title, '/blog.sql' AS link;

SELECT category AS title,
       '/blog.sql?category=' || category AS link
FROM articles
WHERE id = $article_id;

SELECT title AS title,
       true AS active
FROM articles
WHERE id = $article_id;

Use Cases

Show the user’s current location in the site hierarchy:
SELECT 'breadcrumb' AS component;
SELECT 'Home' AS title, '/' AS link;
SELECT 'About' AS title, '/about.sql' AS link;
SELECT 'Team' AS title, true AS active;

File System Navigation

Navigate through folder structures:
SELECT 'breadcrumb' AS component;
SELECT 'Files' AS title, '/files.sql' AS link;
SELECT 'Documents' AS title, '/files.sql?path=/documents' AS link;
SELECT 'Projects' AS title, '/files.sql?path=/documents/projects' AS link;
SELECT '2024' AS title, true AS active;

Multi-Step Process

Show progress through a workflow:
SELECT 'breadcrumb' AS component;
SELECT 'Cart' AS title, '/cart.sql' AS link;
SELECT 'Shipping' AS title, '/checkout.sql?step=shipping' AS link;
SELECT 'Payment' AS title, true AS active;

Styling Tips

  • Keep breadcrumb items short and descriptive
  • Use the last item as active (current page)
  • Don’t include the current page as a clickable link
  • Place breadcrumbs near the top of the page
  • Use tooltips for additional context
  • Consider mobile users - breadcrumbs can be long

Best Practices

  • Always start with a home or root link
  • Don’t duplicate the main navigation menu
  • Keep the trail focused on hierarchy, not history
  • Make links clickable except for the current page
  • Use clear, consistent naming
  • Limit depth to 4-5 levels when possible
  • Place breadcrumbs before page titles

Accessibility

  • Uses semantic HTML with <nav> and aria-label="breadcrumb"
  • The active item has aria-current="page"
  • Screen readers can understand the navigation structure
  • Keyboard navigation works automatically
  • shell - For main site navigation
  • tab - For section-level navigation
  • button - For action-based navigation

Build docs developers (and LLMs) love