Breadcrumb partials

These partials follow the shared rules in Server templates. The tabs remember your framework, and a link can choose it with ?server-framework=laravel.

The partial takes the trail as a list of label and URL pairs, ending with the current page, which gets aria-current="page". The element names the landmark "Breadcrumb" unless you pass a name.

Rails

app/views/rc/_breadcrumbs.html.erb

<%# locals: (items:, label: nil) -%>
<rc-breadcrumbs>
  <nav <%= tag.attributes(aria: { label: label }) %>>
    <ol>
<% items.each_with_index do |(text, path), index| -%>
      <li><a <%= tag.attributes(href: path, aria: { current: ("page" if index == items.size - 1) }) %>><%= text %></a></li>
<% end -%>
    </ol>
  </nav>
</rc-breadcrumbs>

<%= render "rc/breadcrumbs", items: [
  ["Home", root_path],
  ["Settings", settings_path],
  ["Members", settings_members_path],
] %>

Laravel

resources/views/components/rc/breadcrumbs.blade.php

@props(['items', 'label' => null])
<rc-breadcrumbs>
  <nav @if ($label) aria-label="{{ $label }}" @endif>
    <ol>
      @foreach ($items as [$text, $url])
      <li><a href="{{ $url }}" @if ($loop->last) aria-current="page" @endif>{{ $text }}</a></li>
      @endforeach
    </ol>
  </nav>
</rc-breadcrumbs>

<x-rc.breadcrumbs
  :items="[
  ['Home', route('home')],
  ['Settings', route('settings')],
  ['Members', route('settings.members')],
]"
/>

Razor

Components/Rc/RcBreadcrumbs.razor

<rc-breadcrumbs>
    <nav aria-label="@Label">
        <ol>
            @for (var index = 0; index < Items.Count; index++)
            {
                var (text, href) = Items[index];

                <li><a href="@href" aria-current="@(index == Items.Count - 1 ? "page" : null)">@text</a></li>
            }
        </ol>
    </nav>
</rc-breadcrumbs>

@code {
    [Parameter, EditorRequired] public IReadOnlyList<(string Text, string Href)> Items { get; set; } = [];
    [Parameter] public string? Label { get; set; }
}

<RcBreadcrumbs Items="@([("Home", "/"), ("Settings", "/settings"), ("Members", "/settings/members")])" />