Breadcrumbs consist of a list of links that help a user visualize a page's location within the hierarchical structure of a website, and allow navigation up to any of its "ancestors".
Below you can view various implementations with example markup.
Here is an example of a basic breadcrumb component.
<.breadcrumbs>
<:link href="#home">
Phoenix UI
</:link>
<:link href="#components">
Components
</:link>
<:link>
Breadcrumbs
</:link>
</.breadcrumbs>
In the following example, we are using a different heroicon name.
<.breadcrumbs separator="chevron-double-right">
<:link href="#home">
Phoenix UI
</:link>
<:link href="#components">
Components
</:link>
<:link>
Breadcrumbs
</:link>
</.breadcrumbs>
Adding heroicons is easy when using extend_class functionality.
<.breadcrumbs>
<:link
extend_class="inline-flex items-center"
href="#home"
>
<.heroicon
extend_class="mr-2"
name="home"
size="sm"
/>
Phoenix UI
</:link>
<:link
extend_class="inline-flex items-center"
href="#components"
>
<.heroicon
extend_class="mr-2"
name="collection"
size="sm"
/>
Components
</:link>
<:link>
Breadcrumbs
</:link>
</.breadcrumbs>
Below is an example of extending customization even further.
<.breadcrumbs>
<:link
extend_class="inline-flex items-center bg-slate-500/20 rounded-full py-1 px-3"
href="#home"
>
<.heroicon
extend_class="mr-2"
name="home"
size="sm"
/>
Phoenix UI
</:link>
<:link
extend_class="inline-flex items-center bg-slate-500/20 rounded-full py-1 px-3"
href="#components"
>
<.heroicon
extend_class="mr-2"
name="collection"
size="sm"
/>
Components
</:link>
<:link extend_class="inline-flex items-center bg-slate-500/20 rounded-full py-1 px-3">
Breadcrumbs
</:link>
</.breadcrumbs>
API documentation for the component. Learn about imports and available attributes.
There are multiple ways to import components.
# PhoenixUI macro which imports all components
use PhoenixUI
# Or import component individually
import PhoenixUI.Components.Backdrop
Below is a list of attributes that can be applied to the component.
| Name | Type | Default | Description |
|---|---|---|---|
| HTML attribute | any | Supports all HTML attributes. | |
| extend_class | string | Adds additional classes. | |
| link | slot | The links to use. | |
| phx-{any} | binding | Supports all Phoenix DOM element bindings. | |
| separator | string | chevron-right | Any Heroicon name. |