16 - customize breadcurmb

延續上篇 customize tooltips with data attribute 後，另外也來自己手刻一個麵包屑吧～

可能想說套個 bootstrap 像是這樣子：

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

不過在 rails 裡面如果每一頁都要有 breadcrumb 還有可能 li 內層的數量不同時，其實滿麻煩的，也會重複的一直寫相同的 link 等等，所以習慣會抽成 partial 來做，並把像是固定的 link，例如：首頁，寫死就不用一直重複的寫。

# user show page

<% content_for :breadcrumb do %>
  <%= render "shared/breadcrumb", items: [
    { url: users_path, title: "User show page" },
    { url: nil, title: @users.first.name }
  ] %>
<% end %>

# app > views > shared > _breadcrumb.html.erb

<div class="text-12px flex items-center">
  <li class="inline-block">
    <a href="<%= root_path %>"><span>首頁</span></a>
  </li>
  <% items.each do |item| %>
    <li class="inline-block flex items-center">
      &nbsp;&nbsp;/&nbsp;&nbsp;
      <% if item[:url] %>
        <a href="<%= item[:url] %>"><span><%= item[:title] %></span></a>
      <% else %>
        <span ><%= item[:title] %></span>
      <% end %>
    </li>
  <% end %>
</div>

這樣子可以更彈性，並且傳入 items 內的數量多寡，就會決定 li 後麵包屑的數量，並且最後一個帶入 url nil 就改為顯示 text，而顯示的內容可能會跟寬度還有些問題，這部分就看 css 怎麼做搭配，文字過長或許就可以透過 whitespace-nowrap overflow-hidden 與 flex-shrink-0 等等方式來處理。

參考來源

• Bootstrap Breadcrumb