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
HTML identifier for the breadcrumb navigation
Custom CSS class for the breadcrumb container
Item Properties
Text to display for this breadcrumb item
URL to navigate to when clicked. If not provided, uses ?link={title} by default.
Mark this item as the current page (not clickable, styled differently)
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;
Breadcrumb from Database Path
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
Site Navigation
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