Breadcrumb

Hierarchy navigation trails supporting plain text, rectangular panel containers, pill shaped badge groups, and custom separators.

Component Syntax

blade

<x-aura::breadcrumb :items="$items" separator="chevron" variant="plain" />

1. Separator Varieties

blade

Home
Components
Breadcrumb

Home
/
Components
/
Breadcrumb

Home
Components
Breadcrumb

Home
Components
Breadcrumb

<x-aura::breadcrumb :items="$items" separator="chevron" />
<x-aura::breadcrumb :items="$items" separator="slash" />
<x-aura::breadcrumb :items="$items" separator="dot" />
<x-aura::breadcrumb :items="$items" separator="arrow" />

2. Enclosed Panel Bar (variant=rectangle)

blade

<x-aura::breadcrumb :items="$deepItems" variant="rectangle" separator="chevron" />

3. Pill Navigation Badge Group (variant=pills)

blade

Home
Components
Breadcrumb

<x-aura::breadcrumb :items="$simpleItems" variant="pills" />

4. Home Icon and Root Trail (:homeIcon=true)

blade

<x-aura::breadcrumb :items="$deepItems" :homeIcon="true" separator="chevron" />

Component Props

Available properties and configurations for the breadcrumb component.

Prop	Default	Available Values
items	[]	Array of associative items
separator	chevron	chevron slash dot arrow
variant	plain	plain rectangle pills

Aura Wire

Component Library

Breadcrumb

Component Syntax

1. Separator Varieties

2. Enclosed Panel Bar (variant=rectangle)

3. Pill Navigation Badge Group (variant=pills)

4. Home Icon and Root Trail (:homeIcon=true)

Component Props

Spinner

Stepper

Aura Wire