Previews

No matching results.

x
1
2
3
4
5
6
<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">Breadcrumb Item 1</a></li>
<li data-view-component="true" class="breadcrumb-item breadcrumb-item-selected"><a target="_self" aria-current="page" href="#1" data-view-component="true" class="Link">Breadcrumb Item 2</a></li>
</ol>
</nav>
1
2
3
4
5
render(Primer::Beta::Breadcrumbs.new) do |component|
Array.new(number_of_links&.to_i || 3) do |i|
component.with_item(href: "##{i}") { "Breadcrumb Item #{i + 1}" }
end
end
Param Description Input

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;
}