Overview of the Phoenix and LiveView Breadcrumb Component

The Mishka Chelekom breadcrumb component is a Phoenix LiveView component that allows developers to create dynamic and customizable breadcrumbs, perfect for enhancing navigation within applications. It offers flexibility in layout, allowing for easy adjustment of size, color, and positioning, ensuring a polished and professional look.

This Phoenix LiveView component also supports adding icons and separators, making it ideal for enhancing both the visual appeal and clarity of navigation. With its responsive design and ease of use, this breadcrumb component improves navigation and user experience.

How to use item slot

The item slot in the breadcrumb component enables you to create individual breadcrumb items with customizable attributes like icon , link , title , separator , and class . The link attribute allows navigation within a Phoenix application, using LiveView routing. The title attribute can be added to provide a standard HTML tooltip that appears when hovering over the item. Additionally, each item can include an optional icon, customize the separator between items, and apply specific CSS classes for additional styling. This flexibility allows for the creation of responsive and well-structured breadcrumb navigation.

<.breadcrumb>
  <:item>item 1</:item>
  <:item>item 2</:item>
  <:item>item 3</:item>
  <:item>item 4</:item>
  <:item>item 5</:item>
</.breadcrumb>

Link Prop of Item Slot

The link prop in the item slot of the breadcrumb component allows you to define a path for the breadcrumb item. When set, it converts the breadcrumb item into a clickable link that navigates to the specified path. If the link prop is omitted, the item will be displayed as plain text. Additionally, by using the title attribute, you can add a title to the link for improved accessibility, providing context or additional information when users hover over the link.

<.breadcrumb>
  <:item title="title" link="/path">Link1</:item>
  <:item title="title" link="/path">Link2</:item>
  <:item>No link</:item>
</.breadcrumb>

Add icon to each item slot

The icon attribute in the item slot is optional and, by default, it is set to nil . This means no icon will appear unless you explicitly define one. However, when provided, the icon is displayed before the breadcrumb text, improving visual navigation. Additionally, you can add custom HTML content inside the item slot, offering flexibility to include any icon or visual element that suits your design.

<.breadcrumb>
  <:item icon="hero-cloud">Item1</:item>
  <:item icon="hero-circle-stack">Item2</:item>
  <:item icon="hero-envelope">Item3</:item>
</.breadcrumb>

Seperator of item slots

The icon attribute in the item slot is optional and, by default, it is set to nil . This means no icon will appear unless you explicitly define one. However, when provided, the icon is displayed before the breadcrumb text, improving visual navigation. Additionally, you can add custom HTML content inside the item slot, offering flexibility to include any icon or visual element that suits your design.

<.breadcrumb>
  <:item>Item 1</:item>
  <:item separator="/">Item 2</:item>
  <:item separator="-">Item 3</:item>
  <!-- You can also add a space as a separator by using " " -->
  <:item separator=" ">Item 4</:item>
  <:item separator=" ">Item 5</:item>
</.breadcrumb>

Color prop

The color prop for the breadcrumb component offers a wide range of predefined color options to customize the breadcrumb’s appearance. You can choose from a variety of colors, including natural , primary , secondary , success , warning , danger , dark , white , info , silver , misc , and dawn .

<!-- Note: The natural color is the default color for breadcrumbs -->
<.breadcrumb>
  <:item>Item 1</:item>
  <:item>Item 2</:item>
  <:item>Item 3</:item>
</.breadcrumb>

<.breadcrumb color="primary">
  <:item>Item 1</:item>
  <:item>Item 2</:item>
  <:item>Item 3</:item>
</.breadcrumb>

<.breadcrumb color="dark">
  <:item>Item 1</:item>
  <:item>Item 2</:item>
  <:item>Item 3</:item>
</.breadcrumb>

<.breadcrumb color="white">
  <:item>Item 1</:item>
  <:item>Item 2</:item>
  <:item>Item 3</:item>
</.breadcrumb>

<.breadcrumb color="secondary">
  <:item>Item 1</:item>
  <:item>Item 2</:item>
  <:item>Item 3</:item>
</.breadcrumb>

<.breadcrumb color="success">
  <:item>Item 1</:item>
  <:item>Item 2</:item>
  <:item>Item 3</:item>
</.breadcrumb>

<.breadcrumb color="warning">
  <:item>Item 1</:item>
  <:item>Item 2</:item>
  <:item>Item 3</:item>
</.breadcrumb>

<.breadcrumb color="danger">
  <:item>Item 1</:item>
  <:item>Item 2</:item>
  <:item>Item 3</:item>
</.breadcrumb>

<.breadcrumb color="info">
  <:item>Item 1</:item>
  <:item>Item 2</:item>
  <:item>Item 3</:item>
</.breadcrumb>

<.breadcrumb color="silver">
  <:item>Item 1</:item>
  <:item>Item 2</:item>
  <:item>Item 3</:item>
</.breadcrumb>

<.breadcrumb color="misc">
  <:item>Item 1</:item>
  <:item>Item 2</:item>
  <:item>Item 3</:item>
</.breadcrumb>

<.breadcrumb color="dawn">
  <:item>Item 1</:item>
  <:item>Item 2</:item>
  <:item>Item 3</:item>
</.breadcrumb>

Size Prop

The size prop in the breadcrumb component offers several size options: extra_small , small , medium , large , and extra_large . These values control the font size, spacing between breadcrumb items, and the size of icons, providing flexibility in designing breadcrumbs to match your layout preferences.

<.breadcrumb size="extra_small">
  <:item>Item 1</:item>
  <:item>Item 2</:item>
  <:item>Item 3</:item>
</.breadcrumb>

<.breadcrumb size="small">
  <:item>Item 1</:item>
  <:item>Item 2</:item>
  <:item>Item 3</:item>
</.breadcrumb>

<.breadcrumb size="medium">
  <:item>Item 1</:item>
  <:item>Item 2</:item>
  <:item>Item 3</:item>
</.breadcrumb>

<.breadcrumb size="large">
  <:item>Item 1</:item>
  <:item>Item 2</:item>
  <:item>Item 3</:item>
</.breadcrumb>

<.breadcrumb size="extra_large">
  <:item>Item 1</:item>
  <:item>Item 2</:item>
  <:item>Item 3</:item>
</.breadcrumb>

Separator Prop

The separator prop in the breadcrumb component allows you to define a uniform separator, such as a hero icon , text, or even a space, which will be applied between all breadcrumb items. When set, it ensures a consistent look across the breadcrumb. This differs from the item slot’s separator attribute, which enables defining unique separators for individual breadcrumb items, giving you flexibility in customization.

<.breadcrumb separator="hero-star">
  <:item>Item 1</:item>
  <:item>Item 2</:item>
  <:item>Item 3</:item>
</.breadcrumb>

<.breadcrumb separator="hero-x-mark">
  <:item>Item 1</:item>
  <:item>Item 2</:item>
  <:item>Item 3</:item>
</.breadcrumb>