Breadcrumb

A location trail that helps people understand where they are in a site or document structure.

When To Use

Use	Avoid
A location trail that helps people understand where they are in a site or document structure.	Avoid using this component when the content has a different job or needs a simpler plain-text treatment.
Use navigation to show location, choices, progression, or related sections without making people remember where they are.	Avoid changing approved colours, typography, logo artwork, or class names to create a local style guide.
Use the starter markup as a copy/paste baseline for websites, Ghost HTML blocks, generated pages, or print previews.	Avoid copying placeholder IDs, links, contact details, or image paths without replacing them.

Example

Code

CSS Imports

@import "@landcare-design-system/css/dist/landcare.css";
@import "@landcare-design-system/css/dist/components.css";

Starter Markup

<nav class="lds-breadcrumb" aria-label="Breadcrumb">
  <a href="/">Home</a>
  <span aria-hidden="true">/</span>
  <a href="/events/">Events</a>
  <span aria-hidden="true">/</span>
  <span>Planting day</span>
</nav>

Class Reference

Class	Use
`.lds-breadcrumb`	Styles breadcrumb trails as eyebrow/metadata wayfinding text.

Review Notes

Web

Use navigation to show location, choices, progression, or related sections without making people remember where they are.

Print

Use contents, section numbers, running headers, page references, and wayfinding strips to orient readers across pages or sites.

States And Variants

Document current, hover, focus, expanded, collapsed, unavailable, and visited states.

Checklist

Brand colours, typography, and logo use are inherited from the approved master brand.
The first-read message or action is clear.
Labels, headings, links, and alternative text are meaningful.
Keyboard focus, colour contrast, and reading order are covered where the component is interactive.
The component survives its final output: mobile, desktop, Ghost CMS, A4 print, poster, signage, or email.