Breadcrumb

Overview

Show hierarchy from region to farm to entity. It preserves organization, region, farm and entity scope while the user changes location or peer view.

When to use

Use HE/Breadcrumb when you need to show hierarchy from region to farm to entity. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<nav class="he-breadcrumb" aria-label="Breadcrumb"><a href="#">Munster</a><span>/</span><a href="#">Riverside Farm</a><span>/</span><span aria-current="page">AIEdge D1</span></nav>

Anatomy

Anatomy stays identical in Pasture and Atlantic. A responsive layout may wrap or stack parts, but reading order and focus order remain equivalent.

Variants and states

Accessibility

Name the breadcrumb landmark and mark the last item as the current page.

• Maintain a visible keyboard focus indicator and a logical focus sequence.
• Never rely on colour alone for operational, freshness or severity state.
• Keep touch targets at least 44 × 44 px unless the target is an inline text link.

Cross-platform contract

Related components