Primer ViewComponents v0.34.0

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 %>

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
.breadcrumb-item {
  display: inline-block;
  margin-left: -0.35em;
  list-style: none;
}
.breadcrumb-item::after {
    display: inline-block;
    height: 0.8em;
    margin: 0 0.5em;
    content: '';
    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;
  }
.breadcrumb-item-selected a {
  color: var(--fgColor-default);
  cursor: default !important;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
}