Home /Components /Digital Components /Navigation And Wayfinding /Menu

Menu

A list of navigation choices or actions grouped in a predictable order. This is a digital component: Interface parts for websites, apps, online forms, documentation sites, and Opries-style repositories.

Purpose

The Menu component gives Landcare groups a repeatable way to solve this communication problem without rebuilding the layout from scratch. It should inherit approved colour, typography, spacing, grid, accessibility, and logo guidance from the design system.

When To Use

Web Guidance

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

• Structure: use semantic HTML, predictable reading order, and responsive sizing.
• Accessibility: support keyboard access, visible focus, meaningful labels, sufficient contrast, and colour-independent meaning.
• Layout: align the component to the page grid where it is a major element; use local spacing inside the component.
• State: document default, hover, focus, active, disabled, loading, error, and success states where relevant.

Menu Pattern Guidance

Digital Examples

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

<nav class="lds-menu lds-menu-sidebar" aria-label="Section navigation">
  <ul>
    <li><a href="#overview">Overview</a></li>
    <li>
      <details open>
        <summary>Programs</summary>
        <ul>
          <li><a href="#landcare">Landcare</a></li>
          <li><a href="#coastcare">Coastcare</a></li>
          <li><a href="#junior-landcare">Junior Landcare</a></li>
        </ul>
      </details>
    </li>
    <li>
      <details>
        <summary>Resources</summary>
        <ul>
          <li><a href="#forms">Forms</a></li>
          <li><a href="#field-guides">Field guides</a></li>
        </ul>
      </details>
    </li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

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

<nav class="lds-menu lds-menu-header" aria-label="Website navigation">
  <a href="/">Home</a>
  <details>
    <summary>About</summary>
    <div>
      <a href="/about/">About the group</a>
      <a href="/projects/">Projects</a>
      <a href="/partners/">Partners</a>
    </div>
  </details>
  <a href="/events/">Events</a>
  <a href="/contact/">Contact</a>
</nav>

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

<header class="lds-site-topbar">
  <a class="lds-site-topbar-brand" href="/" aria-label="Landcare home">
    <span>Landcare</span>
  </a>
  <search class="lds-header-search">
    <form role="search">
      <label class="visually-hidden" for="site-search-example">Search documentation</label>
      <span class="lds-header-search-field">
        <input id="site-search-example" type="search" name="q" placeholder="Search documentation" autocomplete="off" aria-autocomplete="list" aria-controls="site-search-example-results" aria-expanded="false">
        <kbd data-search-shortcut-hint>Ctrl K</kbd>
      </span>
    </form>
    <ol class="lds-header-search-results" id="site-search-example-results">
      <li>
        <a href="/resources/planting-guide/">Planting guide</a>
        <p>Species selection, site preparation, and follow-up care.</p>
      </li>
      <li>
        <a href="/events/community-field-day/">Community field day</a>
        <p>Event details, registration, and accessibility notes.</p>
      </li>
    </ol>
  </search>
</header>

Print Guidance

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

• Format: size the component for the final artefact, viewing distance, paper stock, and reproduction method.
• Legibility: use Open Sans, strong contrast, and line lengths that suit the medium.
• Production: preserve margins, trim safety, logo clear space, and enough room for handwriting where required.
• Translation: when the web component becomes print, replace interaction states with clear instructions, labels, QR codes, or contact details.

States And Variants

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

Anatomy

Review Checklist

• Brand: approved colour, typography, logo clear space, and tone.
• Hierarchy: one clear first read, then supporting information.
• Grid: major edges align to the page, print, or component grid.
• Accessibility: contrast, labels, focus, reading order, and colour-independent meaning are covered.
• Output: the component survives the final medium: mobile, desktop, A4, poster, signage, social, or presentation.