UI Components

Breadcrumb

Cyber Week Mega Offer!

Huge discounts on all Hostinger plans

Use our referral link for an extra 20% off!

# Basic usage

Home
Button
Input
icon

Home
Button
Input
icon

<x-breadcrumb>
    <x-breadcrumb-item label="Home" :href="route('home')" icon-none />
    <x-breadcrumb-item label="Button" :href="route('docs.components.button')" />
    <x-breadcrumb-item label="Input" :href="route('docs.components.input')" />
    <x-breadcrumb-item label="icon" />
</x-breadcrumb>
 
<x-breadcrumb>
    <x-breadcrumb-item label="Home" :href="route('home')" icon="home" />
    <x-breadcrumb-item label="Button" :href="route('docs.components.button')" />
    <x-breadcrumb-item label="Input" :href="route('docs.components.input')" />
    <x-breadcrumb-item label="icon" />
</x-breadcrumb>

# Custom icon

Icon
Input
Button
Home

Icon
Input
Button
Home

Home
Button
Input
icon

Home
Button
Input
icon

<x-breadcrumb>
    <x-breadcrumb-item label="Icon" icon-none />
    <x-breadcrumb-item label="Input" :href="route('docs.components.input')" icon="chevron-left" />
    <x-breadcrumb-item label="Button" :href="route('docs.components.button')" icon="chevron-left" />
    <x-breadcrumb-item label="Home" :href="route('home')" icon="chevron-left" />
</x-breadcrumb>
 
<x-breadcrumb>
    <x-breadcrumb-item label="Icon" icon-none />
    <x-breadcrumb-item label="Input" :href="route('docs.components.input')" icon="chevron-left" />
    <x-breadcrumb-item label="Button" :href="route('docs.components.button')" icon="chevron-left" />
    <x-breadcrumb-item label="Home" :href="route('home')" icon="chevron-left" icon-right="home" />
</x-breadcrumb>
 
<x-breadcrumb>
    <x-breadcrumb-item label="Home" :href="route('home')" icon-none />
    <x-breadcrumb-item label="Button" :href="route('docs.components.button')" icon="slash" />
    <x-breadcrumb-item label="Input" :href="route('docs.components.input')" icon="slash" />
    <x-breadcrumb-item label="icon" icon="slash" />
</x-breadcrumb>
 
<x-breadcrumb>
    <x-breadcrumb-item label="Home" :href="route('home')" icon="home" />
    <x-breadcrumb-item label="Button" :href="route('docs.components.button')" icon="slash" />
    <x-breadcrumb-item label="Input" :href="route('docs.components.input')" icon="slash" />
    <x-breadcrumb-item label="icon" icon="slash" />
</x-breadcrumb>