One thing that we didn't really take into account was breadcrumbs. This is something t

Here is a proposed method for creating breadcrumbs. <a target="_blan

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Oh, yes, that world work fine, <a class="user-mention notranslate" data-hovercard-type

Breadcrumbs about alps HOT 4 CLOSED

designerbrent commented on June 19, 2024

Breadcrumbs

from alps.

Comments (4)

designerbrent commented on June 19, 2024

Here is a proposed method for creating breadcrumbs.

This uses the same arrows as the top example that are done with the following code:

 ul.breadcrumb li a:after {
    content: '';
    display: block;
    position: absolute;
    left: -8px;
    top: .25em;
    border-left: solid 4px #989690;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

Thoughts on this @tpitre?

from alps.

tpitre commented on June 19, 2024

@designerbrent Would it be possible to add a class to each list item? Something like (untested):

.breadcrumb__item {
  margin-right: 10px;
  padding-right: 8px;
  &:after {
    content: ''; 
    display: block; 
    position: absolute; 
    right: 0; 
    top: 50%;
    transform: translateY(-50%); // Always stay centered.
    border-left: 4px solid #989690; 
    border-top: 4px solid transparent; 
    border-bottom: 4px solid transparent;
  }
  &:last-child:after {
    display: none; // Remove from last breadcrumb item.
  }
}