Breadcrumb
Indicates the user's current location within a navigational hierarchy.
Usage
Example
Breadcrumb do BreadcrumbList do BreadcrumbItem do BreadcrumbLink(href: "/") { "Home" } end BreadcrumbSeparator() BreadcrumbItem do BreadcrumbLink(href: "/docs/accordion") { "Components" } end BreadcrumbSeparator() BreadcrumbItem do BreadcrumbPage { "Breadcrumb" } end end end
Copied!
Copy failed!
With custom separator
Breadcrumb do BreadcrumbList do BreadcrumbItem do BreadcrumbLink(href: "/") { "Home" } end BreadcrumbSeparator { slash_icon } BreadcrumbItem do BreadcrumbLink(href: "/docs/accordion") { "Components" } end BreadcrumbSeparator { slash_icon } BreadcrumbItem do BreadcrumbPage { "Breadcrumb" } end end end
Copied!
Copy failed!
Collapsed
Breadcrumb do BreadcrumbList do BreadcrumbItem do BreadcrumbLink(href: "/") { "Home" } end BreadcrumbSeparator() BreadcrumbItem do BreadcrumbEllipsis() end BreadcrumbSeparator() BreadcrumbItem do BreadcrumbLink(href: "/docs/accordion") { "Components" } end BreadcrumbSeparator() BreadcrumbItem do BreadcrumbPage { "Breadcrumb" } end end end
Copied!
Copy failed!
With link component
Breadcrumb do BreadcrumbList do BreadcrumbItem do BreadcrumbLink(href: "/") { "Home" } end BreadcrumbSeparator() BreadcrumbItem do Link(href: "/docs/accordion", class: "px-0") { "Components" } end BreadcrumbSeparator() BreadcrumbItem do BreadcrumbPage { "Breadcrumb" } end end end
Copied!
Copy failed!
Installation
Using RubyUI CLI
Run the install command
rails g ruby_ui:component Breadcrumb
Copied!
Copy failed!
Manual installation
1
Add RubyUI::Breadcrumb
to app/components/ruby_ui/breadcrumb.rb
# frozen_string_literal: true module RubyUI class Breadcrumb < Base def view_template(&) nav(**attrs, &) end private def default_attrs { aria: {label: "breadcrumb"} } end end end
Copied!
Copy failed!
2
Add RubyUI::BreadcrumbEllipsis
to app/components/ruby_ui/breadcrumb/breadcrumb_ellipsis.rb
# frozen_string_literal: true module RubyUI class BreadcrumbEllipsis < Base def view_template(&) span(**attrs) do icon span(class: "sr-only") { "More" } end end private def icon svg( xmlns: "http://www.w3.org/2000/svg", class: "w-4 h-4", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_linejoin: "round" ) do |s| s.circle(cx: "12", cy: "12", r: "1") s.circle(cx: "19", cy: "12", r: "1") s.circle(cx: "5", cy: "12", r: "1") end end def default_attrs { aria: {hidden: true}, class: "flex h-9 w-9 items-center justify-center", role: "presentation" } end end end
Copied!
Copy failed!
3
Add RubyUI::BreadcrumbItem
to app/components/ruby_ui/breadcrumb/breadcrumb_item.rb
# frozen_string_literal: true module RubyUI class BreadcrumbItem < Base def view_template(&) li(**attrs, &) end private def default_attrs { class: "inline-flex items-center gap-1.5" } end end end
Copied!
Copy failed!
4
Add RubyUI::BreadcrumbLink
to app/components/ruby_ui/breadcrumb/breadcrumb_link.rb
# frozen_string_literal: true module RubyUI class BreadcrumbLink < Base def initialize(href: "#", **attrs) @href = href super(**attrs) end def view_template(&) a(href: @href, **attrs, &) end private def default_attrs { class: "transition-colors hover:text-foreground" } end end end
Copied!
Copy failed!
5
Add RubyUI::BreadcrumbList
to app/components/ruby_ui/breadcrumb/breadcrumb_list.rb
# frozen_string_literal: true module RubyUI class BreadcrumbList < Base def view_template(&) ol(**attrs, &) end private def default_attrs { class: "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5" } end end end
Copied!
Copy failed!
6
Add RubyUI::BreadcrumbPage
to app/components/ruby_ui/breadcrumb/breadcrumb_page.rb
# frozen_string_literal: true module RubyUI class BreadcrumbPage < Base def view_template(&) span(**attrs, &) end private def default_attrs { aria: {disabled: true, current: "page"}, class: "font-normal text-foreground", role: "link" } end end end
Copied!
Copy failed!
7
Add RubyUI::BreadcrumbSeparator
to app/components/ruby_ui/breadcrumb/breadcrumb_separator.rb
# frozen_string_literal: true module RubyUI class BreadcrumbSeparator < Base def view_template(&block) li(**attrs) do if block block.call else icon end end end private def icon svg( xmlns: "http://www.w3.org/2000/svg", class: "w-4 h-4", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_linejoin: "round" ) { |s| s.path(d: "m9 18 6-6-6-6") } end def default_attrs { aria: {hidden: true}, class: "[&>svg]:w-3.5 [&>svg]:h-3.5", role: "presentation" } end end end
Copied!
Copy failed!
Components
Component | Built using | Source |
---|---|---|
Breadcrumb | Phlex | |
BreadcrumbEllipsis | Phlex | |
BreadcrumbItem | Phlex | |
BreadcrumbLink | Phlex | |
BreadcrumbList | Phlex | |
BreadcrumbPage | Phlex | |
BreadcrumbSeparator | Phlex |