diff --git a/website/modules/asset/ui/src/scss/_base.scss b/website/modules/asset/ui/src/scss/_base.scss index c12fe3a8..7eedcf33 100644 --- a/website/modules/asset/ui/src/scss/_base.scss +++ b/website/modules/asset/ui/src/scss/_base.scss @@ -116,3 +116,46 @@ line-height: 150%; } } + +.breadcrumb { + font-weight: $font-weight-medium; + font-size: $font-size-body-small-mobile; + line-height: 150%; + margin-left: 40px; + color: $black; + @include breakpoint-extra-extra-large { + margin-left: 120px; + } +} + +.breadcrumb-list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.breadcrumb-item::after { + content: '/'; + margin-left: 6px; + color: $gray-300; +} + +.breadcrumb-item:last-child::after { + content: ''; +} + +.breadcrumb-link { + color: $gray-300; + text-decoration: none; +} + +.breadcrumb-link:hover { + text-decoration: underline; +} + +.breadcrumb-home { + color: $gray-300; +} diff --git a/website/views/fragments/fragments.html b/website/views/fragments/fragments.html index 5505f267..c65dcc5b 100644 --- a/website/views/fragments/fragments.html +++ b/website/views/fragments/fragments.html @@ -21,4 +21,34 @@ +{% fragment breadcrumbs() %} + {% endfragment %} diff --git a/website/views/layout.html b/website/views/layout.html index 64953d40..56bf8d0a 100644 --- a/website/views/layout.html +++ b/website/views/layout.html @@ -5,14 +5,30 @@ override the title block in a template that does not have access to an Apostrophe page or piece.') }} {% endif %} {% endblock %} {% block beforeMain %} Skip to content -
- {% render fragments.header() %} -
+
+ {% render fragments.header() %} {% render fragments.breadcrumbs() %} +
{% endblock %} {% block main %} {# Usually, your page templates in the @apostrophecms/pages module will override this block. It is safe to assume this is where your page-specific content should go. #} {% endblock %} {% - block afterMain %} + block afterMain %}
{% render fragments.footer() %}