Breadcrumbs are used to show the user's location within a website or app.
Basic breadcrumbs show only text and a separator.
= 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.
- 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 })
You can also pass any content to fully customize your breadcrumbs.
- 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
Create virtual credit / debit cards to keep your real info safe.
Get $5 when you sign up — free to start!
Everything you need to grow your business with confidence!
CRM, Lead Generation, Project Management, Contracts, Online Payments, and more!
The ads above are affiliate links to products I regularly use and highly
recommend.
I may receive a commission if you decide to purchase.