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 %>
No notes provided.
No params configured.
app/components/primer/beta/breadcrumbs.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.breadcrumb-item { display: inline-block; /* stylelint-disable-next-line primer/spacing */ margin-left: -0.35em; list-style: none;}.breadcrumb-item::after { display: inline-block; height: 0.8em; /* stylelint-disable-next-line primer/spacing */ margin: 0 0.5em; content: ''; /* stylelint-disable-next-line primer/borders */ border-right: 0.1em solid var(--borderColor-neutral-emphasis); transform: rotate(15deg) translateY(0.0625em); }.breadcrumb-item:first-child { margin-left: 0; }:is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current='false']))::after { content: none; }/* stylelint-disable-next-line selector-max-type */.breadcrumb-item-selected a { color: var(--fgColor-default); -webkit-text-decoration: none !important; text-decoration: none !important; cursor: default !important;}