UIKit CSS Tutorial
Introduction →

Breadcrumb Component

Breadcrumb Component: Breadcrumbs show users their current location within a website's hierarchy and provide a way to navigate back to parent pages.

Live Examples

1. Basic Breadcrumb

Example Preview
Code:
<!-- Basic Breadcrumb -->
            <ul class="uk-breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Library</a></li>
            <li><a href="#">Data</a></li>
            <li class="uk-disabled"><a>Disabled</a></li>
            <li><span>Current Page</span></li>
            </ul>

            <!-- Breadcrumb with Icons -->
            <ul class="uk-breadcrumb">
            <li><a href="#"><span uk-icon="icon: home"></span> Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Electronics</a></li>
            <li><a href="#">Smartphones</a></li>
            <li><span>iPhone 15</span></li>
            </ul>

2. Breadcrumb with Divider

Example Preview
Code:
<!-- Breadcrumb with Slash Divider -->
            <ul class="uk-breadcrumb uk-breadcrumb-divider">
            <li><a href="#">Home</a></li>
            <li><a href="#">Documents</a></li>
            <li><a href="#">Tutorials</a></li>
            <li><span>UIKit</span></li>
            </ul>

            <!-- Custom Divider Symbol -->
            <ul class="uk-breadcrumb" uk-breadcrumb="divider: >">
            <li><a href="#">Store</a></li>
            <li><a href="#">Categories</a></li>
            <li><a href="#">Clothing</a></li>
            <li><span>T-Shirts</span></li>
            </ul>

            <!-- Slash Divider with Icon -->
            <ul class="uk-breadcrumb" uk-breadcrumb="divider: /">
            <li><a href="#"><span uk-icon="icon: folder"></span> Files</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Web Design</a></li>
            <li><span>Final Draft</span></li>
            </ul>

3. Responsive Breadcrumb

Example Preview - Resize browser to see responsive behavior
Code:
<!-- Responsive Breadcrumb with Visibility Classes -->
            <ul class="uk-breadcrumb">
            <li><a href="#"><span uk-icon="icon: home"></span><span class="uk-visible@s"> Home</span></a></li>
            <li class="uk-visible@m"><a href="#">E-commerce</a></li>
            <li><a href="#">Products</a></li>
            <li class="uk-visible@m"><a href="#">Categories</a></li>
            <li><a href="#">Electronics</a></li>
            <li class="uk-visible@l"><a href="#">Mobile Phones</a></li>
            <li><a href="#">Smartphones</a></li>
            <li><span>Product Details</span></li>
            </ul>

            <!-- Breadcrumb in Navbar -->
            <nav class="uk-navbar-container" uk-navbar>
            <div class="uk-navbar-left">
                <ul class="uk-breadcrumb uk-margin-remove">
                <li><a href="#" class="uk-text-small"><span uk-icon="icon: arrow-left"></span> Back</a></li>
                <li class="uk-visible@m"><a href="#">Admin Panel</a></li>
                <li><a href="#">Users</a></li>
                <li><span>Edit Profile</span></li>
                </ul>
            </div>
            </nav>

4. Breadcrumb with Dropdown

Example Preview
Code:
<!-- Breadcrumb with Dropdown -->
            <ul class="uk-breadcrumb">
            <li><a href="#">Home</a></li>
            <li>
                <a href="#">Products</a>
                <div uk-dropdown="mode: click">
                <ul class="uk-nav uk-dropdown-nav">
                    <li class="uk-active"><a href="#">All Products</a></li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="#"><span uk-icon="icon: laptop"></span> Electronics</a></li>
                    <li><a href="#"><span uk-icon="icon: t-shirt"></span> Clothing</a></li>
                </ul>
                </div>
            </li>
            <li>
                <a href="#">Categories</a>
                <div uk-dropdown="mode: click">
                <ul class="uk-nav uk-dropdown-nav">
                    <li><a href="#">New Arrivals</a></li>
                    <li><a href="#">Best Sellers</a></li>
                </ul>
                </div>
            </li>
            <li><span>Current Product</span></li>
            </ul>

            <!-- Breadcrumb with Grid Dropdown -->
            <ul class="uk-breadcrumb">
            <li><a href="#"><span uk-icon="icon: database"></span> Data Center</a></li>
            <li>
                <a href="#">Servers</a>
                <div uk-dropdown="pos: bottom-justify">
                <div class="uk-dropdown-grid uk-child-width-1-2" uk-grid>
                    <div>
                    <ul class="uk-nav uk-dropdown-nav">
                        <li class="uk-nav-header">Server Types</li>
                        <li><a href="#"><span uk-icon="icon: server"></span> Web Servers</a></li>
                    </ul>
                    </div>
                    <div>
                    <ul class="uk-nav uk-dropdown-nav">
                        <li class="uk-nav-header">Management</li>
                        <li><a href="#"><span uk-icon="icon: settings"></span> Server Settings</a></li>
                    </ul>
                    </div>
                </div>
                </div>
            </li>
            <li><span>Server Configuration</span></li>
            </ul>

5. Breadcrumb Styles

Example Preview
Default Style:
With Background:
Centered Breadcrumb:
Right Aligned Breadcrumb:
Code:
<!-- Default Breadcrumb -->
            <ul class="uk-breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><span>Team</span></li>
            </ul>

            <!-- Breadcrumb in Card -->
            <div class="uk-card uk-card-default uk-card-body">
            <ul class="uk-breadcrumb">
                <li><a href="#">Dashboard</a></li>
                <li><a href="#">Analytics</a></li>
                <li><span>Reports</span></li>
            </ul>
            </div>

            <!-- Centered Breadcrumb -->
            <div class="uk-text-center">
            <ul class="uk-breadcrumb uk-flex-center">
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Web Development</a></li>
                <li><span>Contact</span></li>
            </ul>
            </div>

            <!-- Right Aligned Breadcrumb -->
            <ul class="uk-breadcrumb uk-flex-right">
            <li><a href="#">Admin</a></li>
            <li><a href="#">Settings</a></li>
            <li><span>Profile</span></li>
            </ul>

Breadcrumb Classes Reference

Core Classes

ClassDescriptionExample
.uk-breadcrumbMain breadcrumb container<ul class="uk-breadcrumb">
.uk-breadcrumb-dividerAdds slash divider between items<ul class="uk-breadcrumb uk-breadcrumb-divider">
.uk-disabledDisables a breadcrumb item<li class="uk-disabled">

Alignment Classes

ClassDescriptionUsage
.uk-flex-leftLeft align (default)uk-breadcrumb uk-flex-left
.uk-flex-centerCenter alignuk-breadcrumb uk-flex-center
.uk-flex-rightRight alignuk-breadcrumb uk-flex-right
.uk-flex-betweenSpace between itemsuk-breadcrumb uk-flex-between

Complete Example

<!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>E-commerce Breadcrumb Demo</title>
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/css/uikit.min.css" />
                <style>
                    body { padding: 20px; background: #f8f9fa; }
                    .demo-container { max-width: 1200px; margin: 0 auto; }
                    .product-page { background: white; padding: 30px; border-radius: 10px; }
                    .breadcrumb-nav { margin-bottom: 30px; }
                </style>
            </head>
            <body>
                <div class="demo-container">
                    <!-- E-commerce Product Page -->
                    <div class="product-page">
                        <!-- Main Breadcrumb -->
                        <div class="breadcrumb-nav">
                            <ul class="uk-breadcrumb">
                                <li><a href="#"><span uk-icon="icon: home"></span> Home</a></li>
                                <li>
                                    <a href="#">Electronics</a>
                                    <div uk-dropdown="mode: click">
                                        <div class="uk-dropdown-grid uk-child-width-1-3" uk-grid>
                                            <div>
                                                <ul class="uk-nav uk-dropdown-nav">
                                                    <li class="uk-nav-header">Computers</li>
                                                    <li><a href="#"><span uk-icon="icon: laptop"></span> Laptops</a></li>
                                                    <li><a href="#"><span uk-icon="icon: desktop"></span> Desktops</a></li>
                                                    <li><a href="#"><span uk-icon="icon: tablet"></span> Tablets</a></li>
                                                </ul>
                                            </div>
                                            <div>
                                                <ul class="uk-nav uk-dropdown-nav">
                                                    <li class="uk-nav-header">Mobile</li>
                                                    <li><a href="#"><span uk-icon="icon: phone"></span> Smartphones</a></li>
                                                    <li><a href="#"><span uk-icon="icon: tablet"></span> Tablets</a></li>
                                                    <li><a href="#"><span uk-icon="icon: smartwatch"></span> Smartwatches</a></li>
                                                </ul>
                                            </div>
                                            <div>
                                                <ul class="uk-nav uk-dropdown-nav">
                                                    <li class="uk-nav-header">Home</li>
                                                    <li><a href="#"><span uk-icon="icon: tv"></span> TVs</a></li>
                                                    <li><a href="#"><span uk-icon="icon: music"></span> Audio</a></li>
                                                    <li><a href="#"><span uk-icon="icon: camera"></span> Cameras</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <a href="#">Smartphones</a>
                                    <div uk-dropdown="mode: click">
                                        <ul class="uk-nav uk-dropdown-nav">
                                            <li><a href="#"><span uk-icon="icon: apple"></span> iPhone</a></li>
                                            <li><a href="#"><span uk-icon="icon: android"></span> Android</a></li>
                                            <li><a href="#"><span uk-icon="icon: refresh"></span> Refurbished</a></li>
                                            <li class="uk-nav-divider"></li>
                                            <li><a href="#"><span uk-icon="icon: bolt"></span> 5G Phones</a></li>
                                            <li><a href="#"><span uk-icon="icon: camera"></span> Best Camera</a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li>
                                    <a href="#">Apple</a>
                                    <div uk-dropdown="mode: click">
                                        <ul class="uk-nav uk-dropdown-nav">
                                            <li class="uk-nav-header">iPhone Series</li>
                                            <li><a href="#">iPhone 15 Series</a></li>
                                            <li><a href="#">iPhone 14 Series</a></li>
                                            <li><a href="#">iPhone 13 Series</a></li>
                                            <li class="uk-nav-divider"></li>
                                            <li class="uk-nav-header">Other Products</li>
                                            <li><a href="#">iPad</a></li>
                                            <li><a href="#">MacBook</a></li>
                                            <li><a href="#">Apple Watch</a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li><span>iPhone 15 Pro Max</span></li>
                            </ul>
                        </div>

                        <!-- Product Details -->
                        <div class="uk-grid-large" uk-grid>
                            <div class="uk-width-1-2@m">
                                <div class="uk-card uk-card-default">
                                    <div class="uk-card-media-top">
                                        <img src="iphone-15-pro-max.jpg" alt="iPhone 15 Pro Max">
                                    </div>
                                    <div class="uk-card-body">
                                        <div class="uk-flex uk-flex-between uk-flex-middle">
                                            <div>
                                                <span class="uk-badge uk-badge-success">In Stock</span>
                                                <span class="uk-badge uk-badge-warning">Free Shipping</span>
                                            </div>
                                            <div>
                                                <span class="uk-badge uk-badge-danger">BEST SELLER</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="uk-width-1-2@m">
                                <h1 class="uk-heading-primary">iPhone 15 Pro Max</h1>
                                <p class="uk-text-lead">Titanium. So strong. So light. So Pro.</p>
                                
                                <!-- Product Specs Breadcrumb -->
                                <div class="uk-margin-medium">
                                    <ul class="uk-breadcrumb uk-breadcrumb-divider">
                                        <li><span class="uk-text-bold">Storage:</span></li>
                                        <li><a href="#" class="uk-button uk-button-default uk-button-small">256GB</a></li>
                                        <li><a href="#" class="uk-button uk-button-primary uk-button-small">512GB</a></li>
                                        <li><a href="#" class="uk-button uk-button-default uk-button-small">1TB</a></li>
                                    </ul>
                                </div>

                                <div class="uk-margin-medium">
                                    <ul class="uk-breadcrumb uk-breadcrumb-divider">
                                        <li><span class="uk-text-bold">Color:</span></li>
                                        <li><a href="#" class="uk-button uk-button-default uk-button-small">Black Titanium</a></li>
                                        <li><a href="#" class="uk-button uk-button-default uk-button-small">White Titanium</a></li>
                                        <li><a href="#" class="uk-button uk-button-default uk-button-small">Blue Titanium</a></li>
                                        <li><a href="#" class="uk-button uk-button-primary uk-button-small">Natural Titanium</a></li>
                                    </ul>
                                </div>

                                <div class="uk-card uk-card-secondary uk-card-body">
                                    <div class="uk-flex uk-flex-between uk-flex-middle">
                                        <div>
                                            <h3 class="uk-card-title uk-margin-remove">$1,199.00</h3>
                                            <p class="uk-text-meta uk-margin-remove">Free shipping & returns</p>
                                        </div>
                                        <div>
                                            <button class="uk-button uk-button-primary uk-button-large">
                                                <span uk-icon="icon: cart"></span> Add to Cart
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Related Categories -->
                        <div class="uk-margin-xlarge-top">
                            <h3>Related Categories</h3>
                            <div class="uk-grid-small uk-child-width-1-4@m" uk-grid>
                                <div>
                                    <div class="uk-card uk-card-default uk-card-body uk-text-center">
                                        <span uk-icon="icon: smartphone; ratio: 2"></span>
                                        <h4 class="uk-card-title">Accessories</h4>
                                        <ul class="uk-breadcrumb uk-flex-center">
                                            <li><a href="#" class="uk-text-small">Cases</a></li>
                                            <li><a href="#" class="uk-text-small">Chargers</a></li>
                                            <li><a href="#" class="uk-text-small">Headphones</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div>
                                    <div class="uk-card uk-card-default uk-card-body uk-text-center">
                                        <span uk-icon="icon: credit-card; ratio: 2"></span>
                                        <h4 class="uk-card-title">Payment</h4>
                                        <ul class="uk-breadcrumb uk-flex-center">
                                            <li><a href="#" class="uk-text-small">Monthly</a></li>
                                            <li><a href="#" class="uk-text-small">Carrier</a></li>
                                            <li><a href="#" class="uk-text-small">Trade-in</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div>
                                    <div class="uk-card uk-card-default uk-card-body uk-text-center">
                                        <span uk-icon="icon: shield; ratio: 2"></span>
                                        <h4 class="uk-card-title">Protection</h4>
                                        <ul class="uk-breadcrumb uk-flex-center">
                                            <li><a href="#" class="uk-text-small">AppleCare+</a></li>
                                            <li><a href="#" class="uk-text-small">Insurance</a></li>
                                            <li><a href="#" class="uk-text-small">Warranty</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div>
                                    <div class="uk-card uk-card-default uk-card-body uk-text-center">
                                        <span uk-icon="icon: truck; ratio: 2"></span>
                                        <h4 class="uk-card-title">Delivery</h4>
                                        <ul class="uk-breadcrumb uk-flex-center">
                                            <li><a href="#" class="uk-text-small">Same-day</a></li>
                                            <li><a href="#" class="uk-text-small">2-day</a></li>
                                            <li><a href="#" class="uk-text-small">Store Pickup</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Admin Panel Example -->
                    <div class="uk-margin-xlarge-top">
                        <h2>Admin Panel Breadcrumb</h2>
                        <div class="uk-card uk-card-default">
                            <div class="uk-card-header">
                                <div class="uk-grid-small uk-flex-middle" uk-grid>
                                    <div class="uk-width-expand">
                                        <ul class="uk-breadcrumb uk-margin-remove">
                                            <li><a href="#"><span uk-icon="icon: settings"></span> Admin Panel</a></li>
                                            <li><a href="#">Content Management</a></li>
                                            <li><a href="#">Articles</a></li>
                                            <li class="uk-visible@m"><a href="#">Edit</a></li>
                                            <li><span>Article #1234</span></li>
                                        </ul>
                                    </div>
                                    <div class="uk-width-auto">
                                        <button class="uk-button uk-button-primary uk-button-small">
                                            <span uk-icon="icon: file-edit"></span> Save Changes
                                        </button>
                                        <button class="uk-button uk-button-default uk-button-small">
                                            <span uk-icon="icon: arrow-left"></span> Back
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="uk-card-body">
                                <div class="uk-alert-primary" uk-alert>
                                    <p>You are editing: <strong>"Getting Started with UIKit"</strong></p>
                                </div>
                                <!-- Article editor would go here -->
                            </div>
                            <div class="uk-card-footer">
                                <ul class="uk-breadcrumb uk-flex-between">
                                    <li>
                                        <a href="#" class="uk-text-small">
                                            <span uk-icon="icon: history"></span> Revision History
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="uk-text-small">
                                            <span uk-icon="icon: users"></span> Collaborators
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="uk-text-small">
                                            <span uk-icon="icon: download"></span> Export
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="uk-text-small">
                                            <span uk-icon="icon: trash"></span> Move to Trash
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- File System Example -->
                    <div class="uk-margin-xlarge-top">
                        <h2>File System Navigation</h2>
                        <div class="uk-card uk-card-default">
                            <div class="uk-card-header">
                                <ul class="uk-breadcrumb" uk-breadcrumb="divider: /">
                                    <li><a href="#"><span uk-icon="icon: folder"></span> My Computer</a></li>
                                    <li><a href="#"><span uk-icon="icon: hard-drive"></span> Local Disk (C:)</a></li>
                                    <li><a href="#"><span uk-icon="icon: folder"></span> Users</a></li>
                                    <li><a href="#"><span uk-icon="icon: user"></span> JohnDoe</a></li>
                                    <li><a href="#"><span uk-icon="icon: folder"></span> Documents</a></li>
                                    <li><a href="#"><span uk-icon="icon: folder"></span> Projects</a></li>
                                    <li><a href="#"><span uk-icon="icon: folder"></span> Web Development</a></li>
                                    <li><span>UIKit Project</span></li>
                                </ul>
                            </div>
                            <div class="uk-card-body">
                                <div class="uk-grid-small uk-child-width-1-6@m" uk-grid>
                                    <div class="uk-text-center">
                                        <span uk-icon="icon: folder; ratio: 2"></span>
                                        <div class="uk-text-small">src</div>
                                    </div>
                                    <div class="uk-text-center">
                                        <span uk-icon="icon: folder; ratio: 2"></span>
                                        <div class="uk-text-small">public</div>
                                    </div>
                                    <div class="uk-text-center">
                                        <span uk-icon="icon: file-text; ratio: 2"></span>
                                        <div class="uk-text-small">README.md</div>
                                    </div>
                                    <div class="uk-text-center">
                                        <span uk-icon="icon: settings; ratio: 2"></span>
                                        <div class="uk-text-small">package.json</div>
                                    </div>
                                    <div class="uk-text-center">
                                        <span uk-icon="icon: git-branch; ratio: 2"></span>
                                        <div class="uk-text-small">.gitignore</div>
                                    </div>
                                    <div class="uk-text-center">
                                        <span uk-icon="icon: image; ratio: 2"></span>
                                        <div class="uk-text-small">assets</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- UIKit JS -->
                <script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit.min.js"></script>
                <script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit-icons.min.js"></script>
            </body>
            </html>

JavaScript API

Breadcrumb Initialization:
// Initialize breadcrumb with options
            UIkit.breadcrumb(element, {
                divider: '>',
                // Other options...
            });

            // Get breadcrumb instance
            const breadcrumb = UIkit.breadcrumb('#myBreadcrumb');

            // Update breadcrumb dynamically
            function updateBreadcrumb(items) {
                const breadcrumb = document.getElementById('myBreadcrumb');
                breadcrumb.innerHTML = '';
                
                items.forEach((item, index) => {
                    const li = document.createElement('li');
                    if (index === items.length - 1) {
                        li.innerHTML = `<span>${item.name}</span>`;
                    } else {
                        li.innerHTML = `<a href="${item.url}">${item.name}</a>`;
                    }
                    breadcrumb.appendChild(li);
                });
            }

            // Example usage
            const navItems = [
                { name: 'Home', url: '/' },
                { name: 'Products', url: '/products' },
                { name: 'Electronics', url: '/products/electronics' },
                { name: 'Current Page', url: null }
            ];

            updateBreadcrumb(navItems);
Dynamic Breadcrumb Example:
<!-- HTML -->
            <ul id="dynamicBreadcrumb" class="uk-breadcrumb"></ul>

            <button onclick="goBack()">Go Back</button>
            <button onclick="goForward()">Go Forward</button>

            <!-- JavaScript -->
            <script>
            let history = ['Home'];
            let currentIndex = 0;

            function updateBreadcrumb() {
                const breadcrumb = document.getElementById('dynamicBreadcrumb');
                breadcrumb.innerHTML = '';
                
                history.forEach((item, index) => {
                    const li = document.createElement('li');
                    if (index === currentIndex) {
                        li.innerHTML = `<span class="uk-text-bold">${item}</span>`;
                    } else {
                        li.innerHTML = `<a href="#" onclick="navigateTo(${index})">${item}</a>`;
                    }
                    breadcrumb.appendChild(li);
                });
            }

            function navigateTo(index) {
                currentIndex = index;
                updateBreadcrumb();
            }

            function goBack() {
                if (currentIndex > 0) {
                    currentIndex--;
                    updateBreadcrumb();
                }
            }

            function goForward() {
                if (currentIndex < history.length - 1) {
                    currentIndex++;
                    updateBreadcrumb();
                }
            }

            function addPage(pageName) {
                // Remove everything after current index
                history = history.slice(0, currentIndex + 1);
                history.push(pageName);
                currentIndex = history.length - 1;
                updateBreadcrumb();
            }

            // Initialize
            updateBreadcrumb();
            </script>

Custom Styling

/* Custom Breadcrumb Styles */
            .uk-breadcrumb-custom {
                background: #f8f9fa;
                padding: 15px;
                border-radius: 8px;
                border-left: 4px solid #1e87f0;
            }

            .uk-breadcrumb-custom li a {
                color: #333;
                font-weight: 500;
                transition: color 0.3s;
            }

            .uk-breadcrumb-custom li a:hover {
                color: #1e87f0;
                text-decoration: none;
            }

            .uk-breadcrumb-custom li:not(:last-child)::after {
                content: '›';
                margin: 0 10px;
                color: #999;
            }

            .uk-breadcrumb-custom li.uk-disabled a {
                color: #999;
                cursor: not-allowed;
            }

            .uk-breadcrumb-custom li:last-child span {
                color: #1e87f0;
                font-weight: bold;
            }

            /* Dark Theme Breadcrumb */
            .uk-breadcrumb-dark {
                background: #333;
                color: white;
            }

            .uk-breadcrumb-dark li a {
                color: #ccc;
            }

            .uk-breadcrumb-dark li a:hover {
                color: white;
            }

            .uk-breadcrumb-dark li:not(:last-child)::after {
                color: #666;
            }

            /* Gradient Breadcrumb */
            .uk-breadcrumb-gradient {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white;
            }

            .uk-breadcrumb-gradient li a {
                color: white;
            }

            .uk-breadcrumb-gradient li a:hover {
                color: #e3e3e3;
            }

            /* Responsive Breadcrumb with Truncation */
            @media (max-width: 768px) {
                .uk-breadcrumb-responsive li:nth-child(n+3):not(:last-child) {
                    display: none;
                }
                
                .uk-breadcrumb-responsive li:nth-child(2)::before {
                    content: '...';
                    margin-right: 10px;
                }
            }

            /* Usage in HTML */
            <ul class="uk-breadcrumb uk-breadcrumb-custom">
                <li><a href="#">Home</a></li>
                <li><a href="#">Products</a></li>
                <li><span>Current</span></li>
            </ul>
Best Practices for Breadcrumbs:
  • Use breadcrumbs for websites with deep hierarchy (3+ levels)
  • Always start with the homepage as the first item
  • The last item should represent the current page (non-clickable)
  • Use chevrons (>) or slashes (/) as separators, not both
  • Keep breadcrumb labels short but descriptive
  • Make breadcrumbs responsive - consider truncation on mobile
  • Ensure proper contrast for accessibility
  • Include breadcrumbs in your site's navigation schema
  • Test breadcrumb functionality on all device sizes
  • Consider using dropdowns for categories with many sub-items
Introduction →
Logo

HiFi Toolkit is a free online platform offering essential tools and converters for developers, designers, and everyday productivity tasks.

Follow Us

Our Tools
Our Company
Special Tools

© 2026 HiFi Toolkit. All rights reserved.

Terms & ConditionsPrivacy Policy