This handles tree item rendering in Umbraco's backoffice navigation. You'll use it when building custom entity types that need to appear in sidebar trees, though most of the time you can stick with `kind: 'default'` and skip writing custom contexts entirely. Only bother with a custom context if you need dynamic icons, badges, or special click behaviors. The skill emphasizes fetching fresh docs first (trees in Umbraco 14+ work differently than older versions) and provides minimal working examples for both basic manifests and custom contexts extending UmbDefaultTreeItemContext. Keep tree items lightweight since they can multiply quickly in large content trees.

skills.sh installs
387
GitHub stars
27
last updated
Aug 21, 2026

Install

$ npx -y skills add umbraco/umbraco-cms-backoffice-skills --skill umbraco-tree-item --agent claude-code

Installs into .claude/skills of the current project.

Files

Umbraco Tree Item

What is it?

Tree Items define how entities are rendered in tree structures throughout the Umbraco backoffice. They control the visual representation and behavior of items in sidebars and navigation trees. Tree items are associated with entity types and can be customized to display additional information, icons, or custom rendering for specific entity types.

Documentation

Always fetch the latest docs before implementing:

When to Use Custom Tree Item Contexts

Most tree items use kind: 'default' and don't need a custom context. Only create a custom context for:

  • Custom icon logic - Dynamic icons based on item state
  • Custom labels or badges - Additional visual information

Sponsors

Details

Repository
github.com/umbraco/umbraco-cms-backoffice-skills
Categories
Documentation, .NET & C#
First seen
Jun 3, 2026

More from umbraco/umbraco-cms-backoffice-skills

All 76
1zzci avatarpmazzci/skillsProject development lifecycle management with a strict three-phase workflow (investigate, proposal, implement), file-based plan tracking in docs/plan/, task tra387skills.sh installs
2gohypergiant avataraccelint-nextjs-best-practicesgohypergiant/agent-skillsNext.js performance optimization and best practices. Use when writing Next.js code (App Router or Pages Router); implementing Server Components, Server Actions,386skills.sh installs
3mims-harvard avatardevtu-optimize-descriptionsmims-harvard/tooluniverseOptimize tool descriptions in ToolUniverse JSON configs for clarity and usability. Reviews descriptions for missing prerequisites, unexpanded abbreviations, unc385skills.sh installs
4pedronauck avatartanstackpedronauck/skillsTanStack Query, Router, and Form patterns for React. Use when writing useQuery/queryOptions, mutations, caching, file-based routes, search params, loaders, or T380skills.sh installs
5hummingbot avatarslides-generatorhummingbot/skillsCreate Hummingbot-branded PDF slides from markdown with Mermaid diagram support. Use for presentations, decks, and technical documentation with professional dia378skills.sh installs
6jwynia avatarscraper-builderjwynia/agent-skillsGuide AI agents to generate complete PageObject pattern web scraper projects using Playwright and TypeScript with Docker deployment. Supports agent-browser site377skills.sh installs