Breadcrumb Component V2 Examples

Example 1: Basic Breadcrumb Trail

Simple navigation breadcrumb with text links showing the current page hierarchy.

const config = {
    version: 2,
    layoutId: "basic-breadcrumb",
    breakpoints: { xs: 1 },
    items: [
        {
            content: {
                type: "breadcrumb",
                items: [
                    { text: "Home", url: "#home" },
                    { text: "Category", url: "#category" },
                    { text: "Subcategory", url: "#subcategory" },
                    { text: "Current Page" }
                ]
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo-basic', config);

Example 2: Breadcrumb with Icons

Add FontAwesome icons to provide visual context for each breadcrumb level.

const config = {
    version: 2,
    layoutId: "icon-breadcrumb",
    breakpoints: { xs: 1 },
    items: [
        {
            content: {
                type: "breadcrumb",
                items: [
                    { text: "Home", url: "#home", icon: "fas fa-home" },
                    { text: "Documents", url: "#docs", icon: "fas fa-folder" },
                    { text: "Projects", url: "#projects", icon: "fas fa-folder-open" },
                    { text: "README.md", icon: "fas fa-file" }
                ]
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo-icons', config);

Example 3: Icon-Only Breadcrumb

Use icons only for a more compact display. Requires ARIA labels for accessibility.

const config = {
    version: 2,
    layoutId: "icon-only-breadcrumb",
    breakpoints: { xs: 1 },
    items: [
        {
            content: {
                type: "breadcrumb",
                iconOnly: true,  // Hide text, show icons only
                items: [
                    {
                        icon: "fas fa-home",
                        url: "#home",
                        ariaLabel: "Home"
                    },
                    {
                        icon: "fas fa-cog",
                        url: "#settings",
                        ariaLabel: "Settings"
                    },
                    {
                        icon: "fas fa-user",
                        url: "#profile",
                        ariaLabel: "Profile"
                    },
                    {
                        icon: "fas fa-lock",
                        ariaLabel: "Security"
                    }
                ]
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo-icon-only', config);

Example 4: Compact Breadcrumb

Smaller, denser breadcrumb for tight spaces or long navigation trails.

const config = {
    version: 2,
    layoutId: "compact-breadcrumb",
    breakpoints: { xs: 1 },
    items: [
        {
            content: {
                type: "breadcrumb",
                compact: true,  // Use compact variant
                items: [
                    { text: "Home", url: "#" },
                    { text: "Products", url: "#" },
                    { text: "Electronics", url: "#" },
                    { text: "Computers", url: "#" },
                    { text: "Laptops" }
                ]
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo-compact', config);