Primer ViewComponents v0.43.3

Previews

No matching results.

x
1
2
3
4
5
6
7
<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">Home</a></li>
    <li data-view-component="true" class="breadcrumb-item "><a target="_self" href="#1" data-view-component="true" class="Link">This is a very long breadcrumb item that would normally cause overflow issues by being much longer than expected breadcrumb text should be</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">And another extremely long breadcrumb item name that demonstrates the max-width fix working correctly to prevent page overflow</a></li>
  </ol>
</nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
<% texts = [
          "Home",
          "This is a very long breadcrumb item that would normally cause overflow issues by being much longer than expected breadcrumb text should be",
          "And another extremely long breadcrumb item name that demonstrates the max-width fix working correctly to prevent page overflow"
        ] %>
<%= render(Primer::Beta::Breadcrumbs.new) do |breadcrumbs| %>
  <% texts.each_with_index do |text, i| %>
    <% breadcrumbs.with_item(href: "##{i}") do %>
      <%= text %>
    <% 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
35
.breadcrumb-item {
  display: inline-block;
  /* stylelint-disable-next-line primer/spacing */
  margin-left: -0.35em;
  list-style: none;
  max-width: 100%;
}
.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;
}