<%# Dynamic breadcrumb navigation component %> <%# Usage: render 'components/breadcrumb', crumbs: [ %> <%# { name: 'Home', path: root_path }, %> <%# { name: 'Events', path: events_path }, %> <%# { name: 'Current Event', path: nil } %> <%# ] %>

<% crumbs.each_with_index do |crumb, index| %> <% if crumb[:path].present? %> <%# Crumb with link %> <%= link_to crumb[:path], class: "inline-flex items-center text-xs sm:text-sm font-medium text-gray-700 hover:text-primary-600 transition-colors duration-200 flex-shrink-0" do %> <% if index == 0 %> <% end %> <%= crumb[:name] %> <% end %> <% else %> <%# Current page (no link) %> <%= crumb[:name] %> <% end %> <%# Separator (except for the last item) %> <% if index < crumbs.length - 1 %> <% if index == 0 || index >= crumbs.length - 2 %> <% else %> <% end %> <% end %> <% end %> <%# Show ellipsis on mobile when there are more than 3 items %> <% if crumbs.length > 3 %> ... <% end %>