Breadcrumb: Light

Ready

HTML
Notes
View
Context
Assets
Info


        
        <div class="block block-sd-general block-breadcrumb-container">
	    <div>
	        <nav class="breadcrumb -light" role="navigation" aria-labelledby="system-breadcrumb">
	            <span id="system-breadcrumb" class="visually-hidden">Breadcrumb</span>
	            <ol>
	                <li>
	                    <a href="/">Home</a>
	                </li>
	                <li>
	                    <a href="/about-us">About us</a>
	                </li>
	                <li>
	                    At a glance
	                </li>
	            </ol>
	        </nav>
	    </div>
	</div>

	<style>
	    .breadcrumb {
	        --large: 1170px;
	        max-width: var(--large);
	        margin: 0 auto;
	    }

	    @media(min-width: var(--large)) {
	        .breadcrumb {
	            padding-left: 0;
	            padding-right: 0;
	        }
	    }

	    .breadcrumb li:not(:first-child)::before {
	        content: " \BB ";
	    }

	    breadcrumb {
	        padding: 0;
	    }

	    .breadcrumb ol {
	        align-items: center;
	        display: flex;
	        flex-flow: row wrap;
	    }

	    .breadcrumb li {
	        color: #0a2239;
	        font-size: 0.875rem;
	    }

	    .breadcrumb li:not(:last-child) {
	        margin-right: 0.25rem;
	    }

	    .breadcrumb li:not(:first-child) {
	        padding-left: 0.78125rem;
	        position: relative;
	    }

	    .breadcrumb li:not(:first-child):before {
	        align-items: center;
	        background-color: transparent;
	        border-radius: 0;
	        color: #9da7b0;
	        content: "";
	        display: flex;
	        font-family: "Da-Vinci";
	        font-size: 0.625rem;
	        height: 0.625rem;
	        justify-content: center;
	        line-height: 1;
	        position: absolute;
	        width: 0.625rem;
	        left: 0;
	        top: 50%;
	        transform: translateY(-50%);
	    }

	    .breadcrumb a {
	        color: #ff0033;
	        display: block;
	    }

	    .breadcrumb a:hover {
	        color: #ff2652;
	    }

	    .site-breadcrumb {
	        background-color: white;
	        padding: 1rem;
	    }

	    .site-breadcrumb .region-breadcrumb {
	        width: 100%;
	        max-width: var(--large);
	        margin: 0 auto;
	    }

	    .breadcrumb {
	        padding: 20px 30px 10px;
	        background: none;
	    }

	    .breadcrumb a {
	        color: #555555;
	    }

	    .visually-hidden {
	        position: absolute !important;
	        overflow: hidden;
	        clip: rect(1px, 1px, 1px, 1px);
	        width: 1px;
	        height: 1px;
	        word-wrap: normal;
	    }
	</style>

No notes defined.


        {% if items|length > 0 %}
	<div class="block block-sd-general block-breadcrumb-container">
		<div>
			<nav class="breadcrumb {{ modifiers|modifiersAttr }}" role="navigation" aria-labelledby="system-breadcrumb">
				<span id="system-breadcrumb" class="visually-hidden">Breadcrumb</span>
				<ol>
					{% for item in items %}
						<li>
							{% if item.url %}
								<a href="{{ item.url }}">{{ item.text }}</a>
							{% else %}
								{{ item.text }}
							{% endif %}
						</li>
					{% endfor %}
				</ol>
			</nav>
		</div>
	</div>
{% endif %}

{# Style coming from Drupal #}
<style>
	.breadcrumb {
		--large: 1170px;
		max-width: var(--large);
		margin: 0 auto;
	}

	@media(min-width: var(--large)) {
		.breadcrumb {
			padding-left: 0;
			padding-right: 0;
		}
	}

	.breadcrumb li:not(:first-child)::before {
		content: " \BB ";
	}

	breadcrumb {
		padding: 0;
	}

	.breadcrumb ol {
		align-items: center;
		display: flex;
		flex-flow: row wrap;
	}

	.breadcrumb li {
		color: #0a2239;
		font-size: 0.875rem;
	}

	.breadcrumb li:not(:last-child) {
		margin-right: 0.25rem;
	}

	.breadcrumb li:not(:first-child) {
		padding-left: 0.78125rem;
		position: relative;
	}

	.breadcrumb li:not(:first-child):before {
		align-items: center;
		background-color: transparent;
		border-radius: 0;
		color: #9da7b0;
		content: "";
		display: flex;
		font-family: "Da-Vinci";
		font-size: 0.625rem;
		height: 0.625rem;
		justify-content: center;
		line-height: 1;
		position: absolute;
		width: 0.625rem;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.breadcrumb a {
		color: #ff0033;
		display: block;
	}

	.breadcrumb a:hover {
		color: #ff2652;
	}

	.site-breadcrumb {
		background-color: white;
		padding: 1rem;
	}

	.site-breadcrumb .region-breadcrumb {
		width: 100%;
		max-width: var(--large);
		margin: 0 auto;
	}

	.breadcrumb {
		padding: 20px 30px 10px;
		background: none;
	}

	.breadcrumb a {
		color: #555555;
	}

	.visually-hidden {
		position: absolute !important;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		width: 1px;
		height: 1px;
		word-wrap: normal;
	}
</style>


        
            
            {
  "items": [
    {
      "text": "Home",
      "url": "/"
    },
    {
      "text": "About us",
      "url": "/about-us"
    },
    {
      "text": "At a glance"
    }
  ],
  "modifiers": [
    "light"
  ]
}

File:

Content:


                                /* Breadcrumb positioned over hero when following it */
.block-breadcrumb-container {
	position: absolute;
	top: 69px;
	left: 16px;
	right: 0;
	z-index: $z-index-breadcrumb;

	@media (min-width: $breakpoint-lg) {
		top: 83px;
		left: 32px;
	}
}

.breadcrumb {
	position: absolute;
	background: none !important;
	padding: $spacing-4 0 !important;

	@media (min-width: $breakpoint-md) {
		padding-block: $spacing-6 !important;
	}

	ol {
		display: flex !important;
		align-items: center !important;
		flex-wrap: wrap !important;
	}

	li {
		@extend %t-body-xs;
		@mixin clamp font-size, 12, 14, $breakpoint-xs, $breakpoint-xl, true;
		display: inline !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
	}

	a {
		@extend %link-underline-reversed;
		color: $color-grey-3 !important;
		display: inline !important;
	}

	li:not(:last-child)::after {
		content: ' / ';
		display: inline;
		color: $color-grey-3;
		margin-inline: $spacing-2;

		@media (min-width: $breakpoint-md) {
			margin-inline: $spacing-2-5;
		}
	}

	li:last-child {
		font-weight: 500 !important;
		color: $color-white !important;
	}

	li:not(:first-child)::before {
		display: none !important;
	}

	&.-dark {
		a,
		li:not(:last-child)::after {
			color: $color-grey-4 !important;
			opacity: 0.8;
		}
		li:last-child {
			color: $color-black-background !important;
		}
	}
	&.-light {
		a,
		li:not(:last-child)::after {
			color: $color-white !important;
			opacity: 0.8;
		}
		li:last-child {
			color: $color-white !important;
		}
	}
}

URL: /components/raw/breadcrumb/breadcrumb.css
Filesystem Path: src/components/molecules/breadcrumb/breadcrumb.css
Size: 1.5 KB

Content:


                                export class Breadcrumb {
	$element: HTMLElement;

	constructor($element: HTMLElement) {
		this.$element = $element;

		// Setup breadcrumb theme depending on the current page template or the current hero
		this.setupBreadcrumbTheme();
	}

	setupBreadcrumbTheme() {
		const singleTemplate = document.querySelector('.supt-single__header');
		const singleTeamMember = document.querySelector('.supt-single-team-member');
		if (singleTemplate) {
			this.$element.classList.add('-dark');
		} else if (singleTeamMember) {
			this.$element.classList.add('-light');
		}
	}
}

URL: /components/raw/breadcrumb/index.ts
Filesystem Path: src/components/molecules/breadcrumb/index.ts
Size: 567 Bytes

Handle: @breadcrumb--light
Variants (3): Default , Dark , Light
Preview:
- With layout
- Component only
Filesystem Path: src/components/molecules/breadcrumb/breadcrumb.twig