umbraco-tree-item

Customize Umbraco backoffice tree item rendering and behavior.

Updated Mar 6, 2026
One-click install
npx skills add https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy --skill umbraco-tree-item-kraftvaerk
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: umbraco-tree-item
Source: https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy/tree/main/Kraftvaerk.Umbraco.Alchemy.Frontend/.agents/skills/umbraco-tree-item
Command: npx skills add https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy --skill umbraco-tree-item-kraftvaerk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers customize how individual items are displayed and behave within Umbraco's backoffice navigation trees, enabling richer visual information and custom interactions.

Core Features & Use Cases

  • Custom Icons: Dynamically change icons based on item properties or state.
  • Custom Labels/Badges: Add extra text or visual indicators to tree items.
  • Specialized Rendering: Implement unique behaviors for specific entity types within trees.
  • Use Case: Display a custom icon for content nodes that are currently published versus those that are only drafts, or add a badge indicating the number of unpublished changes.

Quick Start

Use the umbraco-tree-item skill to create a custom tree item for 'my-entity-type' that displays a folder icon for items with children and a document icon otherwise.

Frequently Asked Questions about umbraco-tree-item

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I customize Umbraco backoffice tree item rendering?

To customize Umbraco backoffice tree item rendering, you can modify the rendering behavior using dynamic icons, custom labels, and specialized rendering for specific entity types. This allows richer visual information and interactions within navigation trees.

Can I display custom icons for published versus draft content nodes in Umbraco?

Yes, you can display custom icons for published versus draft content nodes in Umbraco. The skill supports dynamically changing icons based on item properties or state, enabling distinct visual indicators for different content statuses.

How do I add custom labels or badges to Umbraco navigation tree items?

You can add custom labels or badges to Umbraco navigation tree items by customizing the tree item rendering. This feature allows you to append extra text or visual indicators, such as a badge showing the number of unpublished changes.

Does this approach require integrating with the Umbraco extension system?

Yes, customizing tree items integrates with the Umbraco extension system. You need to define custom tree item contexts and manifests through the extension system to implement unique behaviors for specific entity types within the backoffice.

What is the best way to implement specialized rendering for specific entity types in Umbraco trees?

The best way to implement specialized rendering for specific entity types in Umbraco trees is by defining custom tree item contexts and manifests. This allows you to assign unique behaviors, such as displaying a folder icon for items with children.