Side Navigation

A vertical section menu for documentation, resource libraries, long pages, portals, or nested content.

When To Use

Use	Avoid
A vertical section menu for documentation, resource libraries, long pages, portals, or nested content.	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-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>

Class Reference

Class	Use
`.lds-menu`	Styles compact navigation lists. Use `--lds-menu-item-gap`, `--lds-menu-divider-colour`, `--lds-menu-link-padding-block`, `--lds-menu-link-padding-start`, `--lds-menu-link-font-size`, and `--lds-menu-link-font-weight` to tune rhythm.
`.lds-menu-sidebar`	Use for left navigation, section navigation, documentation menus, and nested page structures. Top-level sections stay strongest; nested groups and links step down in weight so deep sidebars remain scannable.

Wayfinding Notes

Navigation type	Use	Avoid
Top navigation	Use for the main website sections in a header or topbar: Home, About, Events, Resources, Contact, and a small number of short dropdowns.	Avoid large, multi-column dropdown systems unless the information architecture has been tested.
Side navigation	Use for documentation, resource libraries, long pages, portals, dashboards, and nested information structures. Keep rhythm compact and section labels predictable.	Avoid using a sidebar menu for a short site where top navigation is enough.
Footer navigation	Use for persistent closing links: contact, privacy, accessibility, governance, resources, acknowledgements, social or directory links, and secondary site destinations.	Avoid repeating the entire website tree or turning the footer into a second homepage.
Other wayfinding still to document	Likely future components include mobile navigation, skip links, site search, utility navigation, previous/next links, sitemap, anchor jump lists, and contextual related-links blocks.	Avoid hiding critical paths inside only one navigation pattern.

Side Navigation Hierarchy

Level	Visual treatment	Reason
Top-level sections	Strongest weight with section dividers.	Helps people scan the main documentation areas quickly.
Streams and categories	Medium weight with compact nesting.	Shows structure without making every nested heading compete with the main sections.
Page links	Regular weight by default.	Keeps long component lists calm and readable.
Current page	Highlighted background, left accent rule, and stronger weight.	Makes the reader's current location clear without over-boldening every sibling item.

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.