What technologies are used for header app development?

Implementation typically involves JSON or TypeScript manifests, Lit for custom elements, and the Umbraco UI (UUI) library for consistent styling.

Does this skill require the latest Umbraco documentation?

Yes, the skill includes a workflow step to fetch the latest official documentation to ensure implementation matches the current version of Umbraco CMS.

What is an Umbraco Header App?

Header apps are single-purpose extensions that appear in Umbraco's top navigation bar, positioned next to the user profile avatar and global search.

Can I create interactive components with this skill?

Yes, the skill supports generating both simple link-based manifests and complex interactive elements using the UmbHeaderAppButtonElement and Lit.

Umbraco Header Apps

Name: Umbraco Header Apps
Author: umbraco

byumbraco

•

Content Management

Facilitates the creation of custom header extensions for the Umbraco Backoffice to provide global tools and navigation.

This skill empowers developers to extend the Umbraco CMS Backoffice by implementing custom header apps, which are globally accessible tools located in the top navigation bar. It provides standardized patterns for creating both simple link-based apps via JSON manifests and complex, interactive components using Lit and the Umbraco UI library. By automating documentation retrieval and manifest generation, it ensures that developers follow the latest best practices for Umbraco's extension registry, Context API, and element architecture.

Key Features

01Provides standardized patterns for both simple links and custom actions

02Generates JSON and TypeScript manifests for header extensions

031 GitHub stars

04Integrates with Umbraco's Context API for global state management

05Ensures compliance with official Umbraco extension registry standards

06Scaffolds interactive header components using Lit and UUI

Use Cases

01Implementing custom global search or notification triggers

02Adding quick-access links to external documentation or internal wikis

03Creating interactive toolbars for system-wide admin utilities

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add umbraco/umbraco-cms-backoffice-skills umbraco-header-apps

For use in Claude.ai and ChatGPT

Download Skill