Side navigation

Overview

Navigate stable application destinations. It preserves organization, region, farm and entity scope while the user changes location or peer view.

When to use

Use HE/Side navigation when you need to navigate stable application destinations. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<nav class="he-sidenav" aria-label="Primary"><a class="he-sidenav__item" href="#" aria-current="page">Overview</a><a class="he-sidenav__item" href="#">Herd health</a></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

Use nav landmark, current-page semantics, labels in collapsed tooltips, and persist preference.

• 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