Breadcrumbs

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

Basic Breadcrumbs

Basic breadcrumbs show only text and a separator.

Preview
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 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
Made with by Profoundry .
Copyright © 2023-2025 Profoundry LLC.
All rights reserved.