Breadcrumb

Examples

Default

Displays the path to the current resource using a hierarchy of links.

<%= render "ui/breadcrumb" do %>
  <%= render "ui/breadcrumb/list" do %>
    <%= render "ui/breadcrumb/item" do %>
      <%= render "ui/breadcrumb/link", href: "/" do %>Home<% end %>
    <% end %>
    <%= render "ui/breadcrumb/separator" %>
    <%= render "ui/breadcrumb/item" do %>
      <%= render "ui/breadcrumb/link", href: "/components" do %>Components<% end %>
    <% end %>
    <%= render "ui/breadcrumb/separator" %>
    <%= render "ui/breadcrumb/item" do %>
      <%= render "ui/breadcrumb/page" do %>Breadcrumb<% end %>
    <% end %>
  <% end %>
<% end %>

<%= render UI::Breadcrumb.new do %>
  <%= render UI::BreadcrumbList.new do %>
    <%= render UI::BreadcrumbItem.new do %>
      <%= render UI::BreadcrumbLink.new(href: "/") { "Home" } %>
    <% end %>
    <%= render UI::BreadcrumbSeparator.new %>
    <%= render UI::BreadcrumbItem.new do %>
      <%= render UI::BreadcrumbLink.new(href: "/components") { "Components" } %>
    <% end %>
    <%= render UI::BreadcrumbSeparator.new %>
    <%= render UI::BreadcrumbItem.new do %>
      <%= render UI::BreadcrumbPage.new { "Breadcrumb" } %>
    <% end %>
  <% end %>
<% end %>

<%= render UI::BreadcrumbComponent.new do %>
  <%= render UI::BreadcrumbListComponent.new do %>
    <%= render UI::BreadcrumbItemComponent.new do %>
      <%= render(UI::BreadcrumbLinkComponent.new(href: "/")) { "Home" } %>
    <% end %>
    <%= render UI::BreadcrumbSeparatorComponent.new %>
    <%= render UI::BreadcrumbItemComponent.new do %>
      <%= render(UI::BreadcrumbLinkComponent.new(href: "/components")) { "Components" } %>
    <% end %>
    <%= render UI::BreadcrumbSeparatorComponent.new %>
    <%= render UI::BreadcrumbItemComponent.new do %>
      <%= render(UI::BreadcrumbPageComponent.new) { "Breadcrumb" } %>
    <% end %>
  <% end %>
<% end %>

Custom Separator

Use a custom separator character.

<%= render "ui/breadcrumb" do %>
  <%= render "ui/breadcrumb/list" do %>
    <%= render "ui/breadcrumb/item" do %>
      <%= render "ui/breadcrumb/link", href: "/" do %>Home<% end %>
    <% end %>
    <%= render "ui/breadcrumb/separator" do %><span class="text-muted-foreground">/</span><% end %>
    <%= render "ui/breadcrumb/item" do %>
      <%= render "ui/breadcrumb/link", href: "/docs" do %>Docs<% end %>
    <% end %>
    <%= render "ui/breadcrumb/separator" do %><span class="text-muted-foreground">/</span><% end %>
    <%= render "ui/breadcrumb/item" do %>
      <%= render "ui/breadcrumb/page" do %>Components<% end %>
    <% end %>
  <% end %>
<% end %>

<%= render UI::Breadcrumb.new do %>
  <%= render UI::BreadcrumbList.new do %>
    <%= render UI::BreadcrumbItem.new do %>
      <%= render UI::BreadcrumbLink.new(href: "/") { "Home" } %>
    <% end %>
    <%= render UI::BreadcrumbSeparator.new do %><span class="text-muted-foreground">/</span><% end %>
    <%= render UI::BreadcrumbItem.new do %>
      <%= render UI::BreadcrumbLink.new(href: "/docs") { "Docs" } %>
    <% end %>
    <%= render UI::BreadcrumbSeparator.new do %><span class="text-muted-foreground">/</span><% end %>
    <%= render UI::BreadcrumbItem.new do %>
      <%= render UI::BreadcrumbPage.new { "Components" } %>
    <% end %>
  <% end %>
<% end %>

<%= render UI::BreadcrumbComponent.new do %>
  <%= render UI::BreadcrumbListComponent.new do %>
    <%= render UI::BreadcrumbItemComponent.new do %>
      <%= render(UI::BreadcrumbLinkComponent.new(href: "/")) { "Home" } %>
    <% end %>
    <%= render UI::BreadcrumbSeparatorComponent.new do %><span class="text-muted-foreground">/</span><% end %>
    <%= render UI::BreadcrumbItemComponent.new do %>
      <%= render(UI::BreadcrumbLinkComponent.new(href: "/docs")) { "Docs" } %>
    <% end %>
    <%= render UI::BreadcrumbSeparatorComponent.new do %><span class="text-muted-foreground">/</span><% end %>
    <%= render UI::BreadcrumbItemComponent.new do %>
      <%= render(UI::BreadcrumbPageComponent.new) { "Components" } %>
    <% end %>
  <% end %>
<% end %>

Responsive with Dropdown

Collapse intermediate items into a dropdown menu for long breadcrumb paths.

<%= render "ui/breadcrumb" do %>
  <%= render "ui/breadcrumb/list" do %>
    <%= render "ui/breadcrumb/item" do %>
      <%= render "ui/breadcrumb/link", href: "/" do %>Home<% end %>
    <% end %>
    <%= render "ui/breadcrumb/separator" %>
    <%= render "ui/breadcrumb/item" do %>
      <%= render "ui/dropdown_menu" do %>
        <%= render "ui/dropdown_menu/trigger", classes: "flex items-center gap-1" do %>
          <%= render "ui/breadcrumb/ellipsis" %>
          <span class="sr-only">Toggle menu</span>
        <% end %>
        <%= render "ui/dropdown_menu/content", align: "start" do %>
          <%= render "ui/dropdown_menu/item" do %><a href="/docs">Documentation</a><% end %>
          <%= render "ui/dropdown_menu/item" do %><a href="/docs/themes">Themes</a><% end %>
          <%= render "ui/dropdown_menu/item" do %><a href="/docs/github">GitHub</a><% end %>
        <% end %>
      <% end %>
    <% end %>
    <%= render "ui/breadcrumb/separator" %>
    <%= render "ui/breadcrumb/item" do %>
      <%= render "ui/breadcrumb/link", href: "/components" do %>Components<% end %>
    <% end %>
    <%= render "ui/breadcrumb/separator" %>
    <%= render "ui/breadcrumb/item" do %>
      <%= render "ui/breadcrumb/page" do %>Breadcrumb<% end %>
    <% end %>
  <% end %>
<% end %>

<%= render UI::Breadcrumb.new do %>
  <%= render UI::BreadcrumbList.new do %>
    <%= render UI::BreadcrumbItem.new do %>
      <%= render UI::BreadcrumbLink.new(href: "/") { "Home" } %>
    <% end %>
    <%= render UI::BreadcrumbSeparator.new %>
    <%= render UI::BreadcrumbItem.new do %>
      <%= render UI::DropdownMenu.new do %>
        <%= render UI::DropdownMenuTrigger.new(classes: "flex items-center gap-1") do %>
          <%= render UI::BreadcrumbEllipsis.new %>
          <span class="sr-only">Toggle menu</span>
        <% end %>
        <%= render UI::DropdownMenuContent.new(align: "start") do %>
          <%= render UI::DropdownMenuItem.new do %><a href="/docs">Documentation</a><% end %>
          <%= render UI::DropdownMenuItem.new do %><a href="/docs/themes">Themes</a><% end %>
          <%= render UI::DropdownMenuItem.new do %><a href="/docs/github">GitHub</a><% end %>
        <% end %>
      <% end %>
    <% end %>
    <%= render UI::BreadcrumbSeparator.new %>
    <%= render UI::BreadcrumbItem.new do %>
      <%= render UI::BreadcrumbLink.new(href: "/components") { "Components" } %>
    <% end %>
    <%= render UI::BreadcrumbSeparator.new %>
    <%= render UI::BreadcrumbItem.new do %>
      <%= render UI::BreadcrumbPage.new { "Breadcrumb" } %>
    <% end %>
  <% end %>
<% end %>

<%= render UI::BreadcrumbComponent.new do %>
  <%= render UI::BreadcrumbListComponent.new do %>
    <%= render UI::BreadcrumbItemComponent.new do %>
      <%= render(UI::BreadcrumbLinkComponent.new(href: "/")) { "Home" } %>
    <% end %>
    <%= render UI::BreadcrumbSeparatorComponent.new %>
    <%= render UI::BreadcrumbItemComponent.new do %>
      <%= render UI::DropdownMenuComponent.new do %>
        <%= render UI::DropdownMenuTriggerComponent.new(classes: "flex items-center gap-1") do %>
          <%= render UI::BreadcrumbEllipsisComponent.new %>
          <span class="sr-only">Toggle menu</span>
        <% end %>
        <%= render UI::DropdownMenuContentComponent.new(align: "start") do %>
          <%= render(UI::DropdownMenuItemComponent.new) do %><a href="/docs">Documentation</a><% end %>
          <%= render(UI::DropdownMenuItemComponent.new) do %><a href="/docs/themes">Themes</a><% end %>
          <%= render(UI::DropdownMenuItemComponent.new) do %><a href="/docs/github">GitHub</a><% end %>
        <% end %>
      <% end %>
    <% end %>
    <%= render UI::BreadcrumbSeparatorComponent.new %>
    <%= render UI::BreadcrumbItemComponent.new do %>
      <%= render(UI::BreadcrumbLinkComponent.new(href: "/components")) { "Components" } %>
    <% end %>
    <%= render UI::BreadcrumbSeparatorComponent.new %>
    <%= render UI::BreadcrumbItemComponent.new do %>
      <%= render(UI::BreadcrumbPageComponent.new) { "Breadcrumb" } %>
    <% end %>
  <% end %>
<% end %>

Collapsed

Show an ellipsis when the breadcrumb path is too long.

<%= render "ui/breadcrumb" do %>
  <%= render "ui/breadcrumb/list" do %>
    <%= render "ui/breadcrumb/item" do %>
      <%= render "ui/breadcrumb/link", href: "/" do %>Home<% end %>
    <% end %>
    <%= render "ui/breadcrumb/separator" %>
    <%= render "ui/breadcrumb/item" do %>
      <%= render "ui/breadcrumb/ellipsis" %>
    <% end %>
    <%= render "ui/breadcrumb/separator" %>
    <%= render "ui/breadcrumb/item" do %>
      <%= render "ui/breadcrumb/link", href: "/docs/components" do %>Components<% end %>
    <% end %>
    <%= render "ui/breadcrumb/separator" %>
    <%= render "ui/breadcrumb/item" do %>
      <%= render "ui/breadcrumb/page" do %>Breadcrumb<% end %>
    <% end %>
  <% end %>
<% end %>

<%= render UI::Breadcrumb.new do %>
  <%= render UI::BreadcrumbList.new do %>
    <%= render UI::BreadcrumbItem.new do %>
      <%= render UI::BreadcrumbLink.new(href: "/") { "Home" } %>
    <% end %>
    <%= render UI::BreadcrumbSeparator.new %>
    <%= render UI::BreadcrumbItem.new do %>
      <%= render UI::BreadcrumbEllipsis.new %>
    <% end %>
    <%= render UI::BreadcrumbSeparator.new %>
    <%= render UI::BreadcrumbItem.new do %>
      <%= render UI::BreadcrumbLink.new(href: "/docs/components") { "Components" } %>
    <% end %>
    <%= render UI::BreadcrumbSeparator.new %>
    <%= render UI::BreadcrumbItem.new do %>
      <%= render UI::BreadcrumbPage.new { "Breadcrumb" } %>
    <% end %>
  <% end %>
<% end %>

<%= render UI::BreadcrumbComponent.new do %>
  <%= render UI::BreadcrumbListComponent.new do %>
    <%= render UI::BreadcrumbItemComponent.new do %>
      <%= render(UI::BreadcrumbLinkComponent.new(href: "/")) { "Home" } %>
    <% end %>
    <%= render UI::BreadcrumbSeparatorComponent.new %>
    <%= render UI::BreadcrumbItemComponent.new do %>
      <%= render UI::BreadcrumbEllipsisComponent.new %>
    <% end %>
    <%= render UI::BreadcrumbSeparatorComponent.new %>
    <%= render UI::BreadcrumbItemComponent.new do %>
      <%= render(UI::BreadcrumbLinkComponent.new(href: "/docs/components")) { "Components" } %>
    <% end %>
    <%= render UI::BreadcrumbSeparatorComponent.new %>
    <%= render UI::BreadcrumbItemComponent.new do %>
      <%= render(UI::BreadcrumbPageComponent.new) { "Breadcrumb" } %>
    <% end %>
  <% end %>
<% end %>