skills.rest
umbraco
umbracoOFFICIAL
Explore all skills by this author →
WebsiteGitHub

umbraco-header-apps

Implement custom header apps in the Umbraco backoffice top navigation bar.

26|13|Updated Nov 30, 2025
Search Tags:#ui#customization#extension#umbraco#backoffice#header app
One-click install
npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-header-apps
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-header-apps
Source: https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills/tree/main/plugins/umbraco-backoffice-skills/skills/umbraco-header-apps
Command: npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-header-apps

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables the creation of custom header apps, allowing for globally accessible functionality and quick links directly within the Umbraco backoffice's top navigation bar.

Core Features & Use Cases

  • Global Access: Implement single-purpose extensions like quick links, tools, or custom features in the header.
  • Interactive Components: Develop header apps that can be simple links or interactive elements opening modals or performing actions.
  • Use Case: Add a "Documentation" header app that links directly to the latest Umbraco API docs, or a "Quick Tools" app that opens a modal with common developer utilities.

Quick Start

Implement a simple link header app that points to the Umbraco documentation.

Frequently Asked Questions about umbraco-header-apps

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

FAQPage Schema
How do I add custom links to the Umbraco backoffice header?▼

You can use custom header apps to add globally accessible links and interactive features directly within the Umbraco backoffice top navigation bar.

Can I build interactive elements in the Umbraco top navigation bar?▼

Yes, custom header apps in Umbraco support developing both simple button links and complex custom elements, allowing you to create interactive components that open modals or perform actions directly from the header.

What is a header app in Umbraco used for?▼

A Umbraco header app is used to implement single-purpose extensions like quick links, tools, or custom features globally accessible from the backoffice top navigation bar, enhancing user interaction.

Does this approach support adding a quick tools modal to the Umbraco backoffice?▼

Yes, you can develop a header app that acts as a quick tools button, which opens a modal containing common developer utilities directly within the Umbraco backoffice interface.

How do I create a documentation header app in Umbraco?▼

To create a documentation header app in Umbraco, implement a simple link header app that points directly to the latest Umbraco API docs, making it globally accessible from the top navigation bar.

Are Umbraco header apps limited to simple link buttons?▼

No, Umbraco header apps are not limited to simple links; they support complex custom elements that enable enhanced user interaction, such as opening modals or performing specific actions globally.

Related Skills

Explore More Software Engineering Skills→
kraftvaerkkraftvaerk

umbraco-header-apps

Create custom header applications in the Umbraco backoffice using extension points and LitElement.

Official
Intermediate
albanistrefialbanistrefi
4

umbraco-header-apps

Implement Umbraco Backoffice header apps with manifest-driven integration.

Community
Intermediate
albanistalbanist
4

umbraco-property-editor-schema

Implement custom property editor schemas in the Umbraco backoffice with C#.

Community
Intermediate
albanistalbanist
4

umbraco-entry-point

Implement custom initialization logic and UI extensions in the Umbraco backoffice.

Community
Intermediate