Css Zero Showcase
x
1
2
3
4
5
6
7
<nav class="breadcrumb" aria-label="Breadcrumb">
  <a href="#home">Home</a>
  <img aria-hidden="true" src="/assets/chevron-right-63c462ab.svg" width="14" height="14" />
  <a href="#components">Components</a>
  <img aria-hidden="true" src="/assets/chevron-right-63c462ab.svg" width="14" height="14" />
  <a class="text-primary" aria-disabled="true" aria-current="page" role="link" href="#breadcrumb">Breadcrumb</a>
</nav>
1
2
3
4
5
6
7
<nav class="breadcrumb" aria-label="Breadcrumb">
  <%= link_to "Home", "#home" %>
  <%= image_tag "chevron-right.svg", size: 14, aria: { hidden: true } %>
  <%= link_to "Components", "#components" %>
  <%= image_tag "chevron-right.svg", size: 14, aria: { hidden: true } %>
  <%= link_to "Breadcrumb", "#breadcrumb", class: "text-primary", aria: { disabled: true, current: "page" }, role: "link" %>
</nav>
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
.breadcrumb {
  align-items: center;
  color: var(--color-text-subtle);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  gap: var(--size-1);
  overflow-wrap: break-word;
  a {
    padding-block-end: 2px;
  }
  img {
    filter: var(--color-filter-text);
  }
  a:hover {
    color: var(--color-text);
  }
  @media (width >= 40rem) {
    gap: var(--size-2);
  }
}
Java Script is not required or multiple files are needed, check the notes.

No notes provided.