Header Apps
Place single-purpose extensions in the top-level navigation bar, next to the user profile avatar.
Header App extensions appear next to the user profile and the global search icon in the top right of Umbraco’s Backoffice. Extension authors can create custom header apps to add globally accessible functionality to the Backoffice.
Button Header Apps as a link
Extension authors can create header apps that link to resource both inside and outside the backoffice. Header apps can be created using a manifest or using TypeScript.
To create a link-style header app, define a headerApp
extension in the umbraco-package.json
file. Be sure to include meta.label
and meta.icon
so that your header app appears when you reload the backoffice.
If meta.href
is defined, the header app will function as a link. Links will open in the same tab.
Header Apps can also be created using TypeScript. Examples of both approaches are shown below.
{
"$schema": "../../umbraco-package-schema.json",
"name": "My Package",
"version": "0.1.0",
"extensions": [
{
"type": "headerApp",
"alias": "My.HeaderApp",
"name": "My Header App",
"kind": "button",
"meta": {
"label": "Hello Umbraco",
"icon": "icon-hearts",
"href": "https://umbraco.com/"
}
}
]
}
Button Header Apps with deeper interactivity
Extension authors can also create header apps that have more interactivity than a link.
By creating a custom component, extension authors can control how the button renders itself and how it behaves when clicked. This allows header apps to control navigation, open modals, or perform other actions.
For example, this is how the current user header app is able to present a modal when clicked.

In order for a header app to have some functionality, extension authors will need to define behavior by creating a JavaScript or TypeScript component. Once the component has been created, it will need to be registered in the header app's element
property.
{
"$schema": "../../umbraco-package-schema.json",
"name": "My Package",
"version": "0.1.0",
"extensions": [
{
"type": "headerApp",
"alias": "My.HeaderApp.ServerServices",
"name": "My Server Services Header App",
"kind": "button",
"element": "/App_Plugins/MyPackage/server-services-header-app.js"
}
]
}
Last updated
Was this helpful?