Custom Breadcrumb Components

Breadcrumb Full Arrow

<nav class="breadcrumb" aria-label="breadcrumb"> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link"> <i data-lucide="house" class="breadcrumb-icon"></i> <span>Home</span> </a> </div> <div class="breadcrumb-separator"> <i data-lucide="chevron-right" class="breadcrumb-icon"></i> </div> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link"> <i data-lucide="settings" class="breadcrumb-icon"></i> <span>Settings</span> </a> </div> <div class="breadcrumb-separator"> <i data-lucide="chevron-right" class="breadcrumb-icon"></i> </div> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link"> <i data-lucide="user-cog" class="breadcrumb-icon"></i> <span>User Settings</span> </a> </div> <div class="breadcrumb-separator"> <i data-lucide="chevron-right" class="breadcrumb-icon"></i> </div> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link"> <i data-lucide="shield-check" class="breadcrumb-icon"></i> <span>Roles</span> </a> </div> <div class="breadcrumb-separator"> <i data-lucide="chevron-right" class="breadcrumb-icon"></i> </div> <div class="breadcrumb-item active"> <span>Role Detail</span> </div> </nav>

Breadcrumb Full Minus

<nav class="breadcrumb" aria-label="breadcrumb"> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link"> <i data-lucide="house" class="breadcrumb-icon"></i> <span>Home</span> </a> </div> <div class="breadcrumb-separator"> <i data-lucide="minus" class="breadcrumb-icon"></i> </div> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link"> <i data-lucide="settings" class="breadcrumb-icon"></i> <span>Settings</span> </a> </div> <div class="breadcrumb-separator"> <i data-lucide="minus" class="breadcrumb-icon"></i> </div> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link"> <i data-lucide="user-cog" class="breadcrumb-icon"></i> <span>User Settings</span> </a> </div> <div class="breadcrumb-separator"> <i data-lucide="minus" class="breadcrumb-icon"></i> </div> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link"> <i data-lucide="shield-check" class="breadcrumb-icon"></i> <span>Roles</span> </a> </div> <div class="breadcrumb-separator"> <i data-lucide="minus" class="breadcrumb-icon"></i> </div> <div class="breadcrumb-item active"> <span>Role Detail</span> </div> </nav>

Breadcrumb Full Dot

<nav class="breadcrumb" aria-label="breadcrumb"> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link"> <i data-lucide="house" class="breadcrumb-icon"></i> <span>Home</span> </a> </div> <div class="breadcrumb-separator"> <i data-lucide="dot" class="breadcrumb-icon"></i> </div> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link"> <i data-lucide="settings" class="breadcrumb-icon"></i> <span>Settings</span> </a> </div> <div class="breadcrumb-separator"> <i data-lucide="dot" class="breadcrumb-icon"></i> </div> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link"> <i data-lucide="user-cog" class="breadcrumb-icon"></i> <span>User Settings</span> </a> </div> <div class="breadcrumb-separator"> <i data-lucide="dot" class="breadcrumb-icon"></i> </div> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link"> <i data-lucide="shield-check" class="breadcrumb-icon"></i> <span>Roles</span> </a> </div> <div class="breadcrumb-separator"> <i data-lucide="dot" class="breadcrumb-icon"></i> </div> <div class="breadcrumb-item active"> <span>Role Detail</span> </div> </nav>

Breadcrumb Hidden

<nav class="breadcrumb" aria-label="breadcrumb"> <div class="breadcrumb-item"> <a href="#" class="breadcrumb-link"> <i data-lucide="house" class="breadcrumb-icon"></i> <span>Home</span> </a> </div> <div class="breadcrumb-separator"> <i data-lucide="chevron-right" class="breadcrumb-icon"></i> </div> <div class="breadcrumb-ellipsis">...</div> <div class="breadcrumb-separator"> <i data-lucide="chevron-right" class="breadcrumb-icon"></i> </div> <div class="breadcrumb-item active"> <span>Role Detail</span> </div> </nav>