# `LineaUI.Components.Breadcrumb`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/breadcrumb.ex#L1)

LineOne's breadcrumb: the links to the pages above the current one, then the current page.

    <.breadcrumb>
      <:item navigate={~p"/"}>Home</:item>
      <:item navigate={~p"/elements"}>Elements</:item>
      <:item>Breadcrumb</:item>
    </.breadcrumb>

An item with `href`, `navigate` or `patch` is a link; one with `phx-click` is a button that
looks like a link, so a crumb can navigate through a server event; the others are plain text
(the current page is the last one). Any other attribute of the item (`phx-target`,
`phx-value-*`, `id`, `data-*`, `aria-*`) is passed on to the link or button.

    <.breadcrumb>
      <:item :for={folder <- @path} phx-click="open_folder" phx-value-id={folder.id}>
        {folder.name}
      </:item>
    </.breadcrumb>

The separator is LineOne's chevron unless a `:separator` is given:

    <.breadcrumb variant="bordered">
      <:separator><span class="text-xs font-light">/</span></:separator>
      <:item href="/"><svg>…</svg></:item>
      <:item>Calendar</:item>
    </.breadcrumb>

# `breadcrumb`

Renders a breadcrumb trail; the last `:item` is the current page.

    <.breadcrumb>
      <:item navigate={~p"/"}>Home</:item>
      <:item>Settings</:item>
    </.breadcrumb>

## Attributes

* `variant` (`:string`) - `bordered` draws a rounded border around each link. Defaults to `"plain"`. Must be one of `"plain"`, or `"bordered"`.
* `label` (`:string`) - The `aria-label` of the navigation. Defaults to `"Breadcrumb"`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `item` (required) - A step of the trail. Accepts attributes:

  * `href` (`:string`)
  * `navigate` (`:string`)
  * `patch` (`:string`)
  * `class` (`:any`)
  * `phx-click` (`:any`) - Makes the item a button that sends this event or runs this `JS`.
  * `phx-target` (`:any`)
  * `phx-value-id` (`:any`)
  * `id` (`:string`)
* `separator` - What goes between two steps, LineOne's chevron by default.

---

*Consult [api-reference.md](api-reference.md) for complete listing*