Breadcrumbs

Breadcrumbs are used to show the user's location within a website or app.

Basic Breadcrumbs

Basic breadcrumbs use only text and a separator to show the user's location.

= daisy_breadcrumbs do |breadcrumbs|
  - breadcrumbs.with_item do
    = link_to "Home", "#"
  - breadcrumbs.with_item do
    = link_to "Docs", "#"
  - breadcrumbs.with_item do
    = link_to "Components", "#"
  - breadcrumbs.with_item do
    = link_to "Breadcrumbs", "#"

Breadcrumbs with Icons

Breadcrumbs can also utilize icons to help users quickly identify different pages.

Preview

Code

- icon_options = { css: "size-4 mr-1 text-slate-600", variant: :mini }
- links = [ ["Home", "home"], ["Docs", "document"], ["Components", "cube"], ["Breadcrumbs", "squares-2x2"] ]

= daisy_breadcrumbs do |breadcrumbs|
  - links.each do |link|
    - breadcrumbs.with_item do
      = link_to "#" do
        = hero_icon(link[1], **icon_options)
        = link[0]

Made with by Profoundry .