Breadcrumbs

Navigation aids that show the user's current location and path within a website hierarchy. Perfect for complex sites with multiple levels, providing context and easy navigation back to parent pages with customizable separators and styling options.

Basic Breadcrumbs

Basic breadcrumbs show only text and a separator.

Preview

Docs
Breadcrumbs
This example

Code

= daisy_breadcrumbs do |breadcrumbs|
  - # Options via keyword arguments
  - breadcrumbs.with_item(title: "Docs", href: "/")

  - # Options via positional arguments
  - breadcrumbs.with_item("Breadcrumbs", "/examples/Daisy::Navigation::BreadcrumbsComponent")

  - # Custom content
  - breadcrumbs.with_item(css: "italic selection:bg-secondary selection:text-secondary-content") do
    This example

Breadcrumbs with Icons

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

Preview

Code

- links = [ ["Home", "home"], ["Docs", "document"], ["Components", "cube"], ["Breadcrumbs", "squares-2x2"] ]

= daisy_breadcrumbs do |breadcrumbs|
  - links.each do |link|
    - breadcrumbs.with_item(title: link[0], href: "#", icon: link[1], icon_css: "size-4 mr-1 text-base-content/50", icon_options: { variant: :mini })

Custom Breadcrumbs

You can also pass any content to fully customize your breadcrumbs.

Preview

Code

- links = [ [ "🙂", "Favorites", ""], ["😃", "Super Favorites", "italic"], ["🤩", "Amazeballs Favorites", "font-bold italic"] ]

= daisy_breadcrumbs do |breadcrumbs|
  - links.each.with_index do |link, index|
    - breadcrumbs.with_item do
      = daisy_link "#", css: "no-underline! hover:text-secondary" do
        .text-3xl.-rotate-12
          = link.first

        .text-xl{ class: link.last }
          = link.second

Docs

Guides

Hero

Daisy