D.School Component Library

Breadcrumbs 

<nav role="navigation" class="c-breadcrumbs">
	    <span class="c-breadcrumbs__item">

	        <a class="o-link c-breadcrumbs__link" href="/" target="_self">
	            <span class="o-link__label">
	                §Page Title
	            </span>
	        </a>
	        <div class="c-breadcrumbs__divider">
	            |
	        </div>
	    </span>
	    <span class="c-breadcrumbs__item">

	        <a class="o-link c-breadcrumbs__link" href="/" target="_self">
	            <span class="o-link__label">
	                §Page Title
	            </span>
	        </a>
	        <div class="c-breadcrumbs__divider">
	            |
	        </div>
	    </span>
	    <span class="c-breadcrumbs__item">

	        <a class="o-link c-breadcrumbs__link" href="/" target="_self">
	            <span class="o-link__label">
	                §Page Title
	            </span>
	        </a>
	        <div class="c-breadcrumbs__divider">
	            |
	        </div>
	    </span>
	    <span class="c-breadcrumbs__item">

	        <a class="o-link c-breadcrumbs__link" href="/" target="_self">
	            <span class="o-link__label">
	                §Page Title
	            </span>
	        </a>
	        <div class="c-breadcrumbs__divider">
	            |
	        </div>
	    </span>
	    <span class="c-breadcrumbs__item">

	        <a class="o-link c-breadcrumbs__link" href="/" target="_self">
	            <span class="o-link__label">
	                §Page Title
	            </span>
	        </a>
	    </span>
	</nav>
 
{% set base_class = breadcrumbs.base_class|default('c-breadcrumbs') %}
{% if breadcrumbs.items %}
	<nav role="navigation" class="{{ bem(base_class, breadcrumbs.element, breadcrumbs.modifiers, breadcrumbs.extra) }}" {{ attributes(breadcrumbs.attributes) }}>
		{% for item in breadcrumbs.items %}
			<span class="{{ bem(base_class, 'item') }}">
				{% include "@link" with {
        "link": {
          "text": item.text,
          "url": item.url,
          "target": item.target,
          "extra": bem(base_class, 'link')
        }
      } %}
				{% if not loop.last %}
          <div class="{{ bem(base_class, 'divider') }}">
					  |
					</div>
          {% endif%}
				</span>
			{% endfor %}
		</nav>
	{% endif %}
 
{
  "breadcrumbs": {
    "items": [
      {
        "text": "§Page Title",
        "url": "/"
      },
      {
        "text": "§Page Title",
        "url": "/"
      },
      {
        "text": "§Page Title",
        "url": "/"
      },
      {
        "text": "§Page Title",
        "url": "/"
      },
      {
        "text": "§Page Title",
        "url": "/"
      }
    ]
  }
}
  • Content: 
    /* ------------------------------------*\
  $BREADCRUMBS
\*------------------------------------ */

.c-breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--ds-space-xs);

  &__item {
    display: flex;
    align-items: center;
    gap: var(--ds-space-xs);

    &:last-of-type {
      position: relative;
      pointer-events: none;

      > span::after,
      .o-link > span::after {
        display: none;
      }

      &::after {
        content: "";
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 6px;
        background-color: var(--ds-color-content-secondary);
        position: relative;
      }
    }
  }

  &__link.o-link {
    @include o-typography-body--ui-detail-5();
    text-transform: uppercase;

    > span::after {
      height: 1px;
    }
  }
}
  • URL: /components/raw/breadcrumbs/_breadscrumbs.scss
  • Filesystem Path: components/02-molecules/navigation/breadcrumbs/_breadscrumbs.scss
  • Size: 867 Bytes

No notes defined.