Breadcrumb

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.

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>

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>

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>

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 base, natural, primary, secondary, success, warning, danger, dark, white, info, silver, misc, and dawn.

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

<.breadcrumb color="natural">
  <: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>

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>

The separator_icon prop in the breadcrumb component allows you to define a uniform separator, such as a hero icon, which will be applied between all breadcrumb items. You can also use the separator_icon_class prop to add custom CSS classes to the separator icon, allowing for further styling customization.

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

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

The separator_text prop in the breadcrumb component allows you to define a uniform separator, any text or even spaces which will be applied between all breadcrumb items. You can also use the separator_text_class prop to add custom CSS classes to the separator text, allowing for further styling customization.

<.breadcrumb separator_text="_" separator_text_class="">
  <:item>Mishka Chelekom</:item>
  <:item>Image</:item>
  <:item>Gallery</:item>
</.breadcrumb>