Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
<nav aria-label="Breadcrumb" data-view-component="true">
<ol>
<li data-view-component="true" class="breadcrumb-item "><a target="_self" href="#0" data-view-component="true" class="Link"><span data-view-component="true" class="Truncate">
<span style="max-width: 135px;" data-view-component="true" class="Truncate-text">Breadcrumb Item 1</span>
</span></a></li>
<li data-view-component="true" class="breadcrumb-item "><a target="_self" href="#1" data-view-component="true" class="Link"><span data-view-component="true" class="Truncate">
<span style="max-width: 135px;" data-view-component="true" class="Truncate-text">Breadcrumb Item 2 with a really long, long, long name</span>
</span></a></li>
<li data-view-component="true" class="breadcrumb-item breadcrumb-item-selected"><a target="_self" aria-current="page" href="#2" data-view-component="true" class="Link"><span data-view-component="true" class="Truncate">
<span style="max-width: 135px;" data-view-component="true" class="Truncate-text">Breadcrumb Item 3 with an extremely long, long, long name</span>
</span></a></li>
</ol>
</nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<% texts = [
"Breadcrumb Item 1",
"Breadcrumb Item 2 with a really long, long, long name",
"Breadcrumb Item 3 with an extremely long, long, long name"
] %>
<%= render(Primer::Beta::Breadcrumbs.new) do |breadcrumbs| %>
<% texts.each_with_index do |text, i| %>
<% breadcrumbs.with_item(href: "##{i}") do %>
<%= render(Primer::Beta::Truncate.new) do |truncate| %>
<% truncate.with_item(max_width: 135) { text } %>
<% end %>
<% end %>
<% end %>
<% end %>