Fluxtor

#Introduction

The Breadcrumbs component is a navigation aid that shows users their current location within a website's hierarchy. It provides a clear path back to previous pages and helps users understand the site structure, making it easier to navigate complex applications and websites.

#Installation

Use the fluxtor artisan command to install the breadcrumbs component easily:

php artisan fluxtor:install breadcrumbs

Once installed, you can use the <x-ui.breadcrumbs /> and <x-ui.breadcrumbs.item /> components in any Blade view.

#Usage

#Basic Breadcrumbs

<x-ui.breadcrumbs>
    <x-ui.breadcrumbs.item href="#">Home</x-ui.breadcrumbs.item>
    <x-ui.breadcrumbs.item href="#">Products</x-ui.breadcrumbs.item>
    <x-ui.breadcrumbs.item href="#">Electronics</x-ui.breadcrumbs.item>
    <x-ui.breadcrumbs.item>Smartphones</x-ui.breadcrumbs.item>
</x-ui.breadcrumbs>

#Slash Separators

Use slash separators for a more compact, file-path-like appearance.

<x-ui.breadcrumbs>
    <x-ui.breadcrumbs.item href="#" separator="slash">Dashboard</x-ui.breadcrumbs.item>
    <x-ui.breadcrumbs.item href="#" separator="slash">Settings</x-ui.breadcrumbs.item>
    <x-ui.breadcrumbs.item href="#" separator="slash">User Management</x-ui.breadcrumbs.item>
    <x-ui.breadcrumbs.item>Edit Profile</x-ui.breadcrumbs.item>
</x-ui.breadcrumbs>

#With Icons

Enhance breadcrumbs with icons to provide visual context and improve recognition.

<x-ui.breadcrumbs>
    <x-ui.breadcrumbs.item href="#" icon="home" separator="slash">Home</x-ui.breadcrumbs.item>
    <x-ui.breadcrumbs.item href="#" icon="folder" separator="slash">Documents</x-ui.breadcrumbs.item>
    <x-ui.breadcrumbs.item href="#" icon="document-text" separator="slash">Reports</x-ui.breadcrumbs.item>
    <x-ui.breadcrumbs.item icon="chart-bar">Analytics</x-ui.breadcrumbs.item>
</x-ui.breadcrumbs>

#Icon-Only Breadcrumbs

Create compact breadcrumbs using only icons, perfect for mobile interfaces or when space is limited.

<x-ui.breadcrumbs>
    <x-ui.breadcrumbs.item href="#" icon="home" separator="slash" />
    <x-ui.breadcrumbs.item href="#" icon="building-office" separator="slash" />
    <x-ui.breadcrumbs.item href="#" icon="users" separator="slash" />
    <x-ui.breadcrumbs.item icon="user-circle" />
</x-ui.breadcrumbs>

#Collapsed Navigation with Dropdown

Use dropdowns to handle long breadcrumb paths by collapsing intermediate items.

<x-ui.breadcrumbs>
    <x-ui.breadcrumbs.item href="#" icon="home" separator="slash" />
    
    <x-ui.breadcrumbs.item separator="slash">
        <x-ui.dropdown>
            <x-slot:button class="justify-center dark:hover:bg-white/10 hover:bg-gray-100 rounded p-1 cursor-pointer">
                <x-ui.icon name="ellipsis-horizontal" variant="mini" />
            </x-slot:button>
            <x-slot:menu>
                <x-ui.dropdown.item href="#">Projects</x-ui.dropdown.item>
                <x-ui.dropdown.item href="#">Templates</x-ui.dropdown.item>
                <x-ui.dropdown.item href="#">Archive</x-ui.dropdown.item>
            </x-slot:menu>
        </x-ui.dropdown>
    </x-ui.breadcrumbs.item>
    
    <x-ui.breadcrumbs.item href="#" separator="slash">Website Redesign</x-ui.breadcrumbs.item>
    <x-ui.breadcrumbs.item>Design Assets</x-ui.breadcrumbs.item>
</x-ui.breadcrumbs>

#Custom Separators

Use custom icons as separators to match your design system or brand aesthetic.

<!-- Arrow separators -->
<x-ui.breadcrumbs>
    <x-ui.breadcrumbs.item href="#" separator="arrow-right">E-commerce</x-ui.breadcrumbs.item>
    <x-ui.breadcrumbs.item href="#" separator="arrow-right">Categories</x-ui.breadcrumbs.item>
    <x-ui.breadcrumbs.item href="#" separator="arrow-right">Clothing</x-ui.breadcrumbs.item>
    <x-ui.breadcrumbs.item>Men's Shirts</x-ui.breadcrumbs.item>
</x-ui.breadcrumbs>

#E-commerce Breadcrumbs

A practical example showing breadcrumbs in an e-commerce context with mixed content types.

<x-ui.breadcrumbs>
    <x-ui.breadcrumbs.item href="#" icon="home" separator="slash" />
    <x-ui.breadcrumbs.item href="#" separator="slash">Electronics</x-ui.breadcrumbs.item>
    <x-ui.breadcrumbs.item href="#" separator="slash">Computers & Tablets</x-ui.breadcrumbs.item>
    <x-ui.breadcrumbs.item href="#" separator="slash">Laptops</x-ui.breadcrumbs.item>
    <x-ui.breadcrumbs.item>MacBook Pro 16"</x-ui.breadcrumbs.item>
</x-ui.breadcrumbs>

#Component Props Reference

#Breadcrumbs Props

The main breadcrumbs container accepts standard HTML attributes and merges them with default styling classes.

#Breadcrumbs Item Props

#Separator Options

The breadcrumbs component supports multiple separator styles: