Class: Flowbite::Breadcrumb

Inherits:
ViewComponent::Base
  • Object
show all
Defined in:
app/components/flowbite/breadcrumb.rb,
app/components/flowbite/breadcrumb/item.rb,
app/components/flowbite/breadcrumb/home_icon.rb,
app/components/flowbite/breadcrumb/item/first.rb,
app/components/flowbite/breadcrumb/item/current.rb,
app/components/flowbite/breadcrumb/separator_icon.rb

Overview

Renders a breadcrumb navigation component.

Use Breadcrumb and the child Item components to create and indicate a series of page structure and URLs to help the user navigate through the website.

Breadcrumbs consist of the following components:

  • Breadcrumb: Container for breadcrumb items.

  • HomeIcon: Home icon for the first breadcrumb item.

  • SeparatorIcon: Separator between breadcrumb items.

  • Item: An individual breadcrumb item.

  • Item::Current: An individual breadcrumb item without a link, usually used for the current page in the breadcrumb trail.

  • Item::First: An individual breadcrumb item with a home icon on it.

Examples:

Usage

<%= render(Flowbite::Breadcrumb.new) do |breadcrumb| %>
  <% breadcrumb.with_item do %>
    <%= render(Flowbite::Breadcrumb::Item::First.new(href: "/")) { "Root page" } %>
  <% end %>
  <% breadcrumb.with_item do %>
    <%= render(Flowbite::Breadcrumb::Item.new(href: "/projects")) { "Parent page" } %>
  <% end %>
  <% breadcrumb.with_item do %>
    <%= render(Flowbite::Breadcrumb::Item::Current.new) { "Current Page" } %>
  <% end %>
<% end %>

See Also:

Defined Under Namespace

Classes: HomeIcon, Item, SeparatorIcon

Instance Method Summary collapse

Instance Method Details

#call ⇒ Object 



44
45
46
47
48
49
50
51
52
 
# File 'app/components/flowbite/breadcrumb.rb', line 44

def call
  content_tag(:nav, class: "flex", "aria-label": "Breadcrumb") do
    content_tag(:ol, class: "inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse") do
      items.each do |item|
        concat(item)
      end
    end
  end
end