Section

Introducing Section extensions, a home for custom content and functionality.

Umbraco extension authors can place their extension in the top-level navigation of the backoffice using Sections. The extension will be placed among the default options such as Content, Media, Settings, etc.

Within the section, authors can add menus, section views, workspace views, or any other content or interface they desire.

Section

Creating a section

Manifests

Sections can be created by adding a definition in the extension's manifest file.

~/App_Plugins/MySection/umbraco-package.json

{
  "name": "My.Section",
  "extensions": [
    {
      "type": "section",
      "alias": "My.Section",
      "name": "My Section",
      "meta": {
        "label": "My.Section",
        "pathname": "my-section"
      }
    }
  ]
}

Group permissions

To enable custom sections for backoffice users, site administrators must first assign permissions to those users. This involves configuring the permission for a user group and assigning users to that group.

To grant access to the custom section, open the Umbraco backoffice, navigate to the Users section, and select the User groups menu item. Site administrators can create a new user group or modify an existing one.

Once the user group is open, click the Choose button under the Sections section. Select the custom section from the slide-out modal to enable access.

Enabling new Sections

After assigning permission, users may need to reload the backoffice for the changes to take effect.

Section

Extend with Sidebar, Dashboards, and more

Sections serve as blank canvases within the Umbraco backoffice. Extension authors can integrate other Umbraco extensions into sections, including custom dashboards, sidebars, and section views.

Section authors can also skip Umbraco backoffice components and build a fully custom view by creating an empty element.

Manifest with empty element

Using a manifest with only an element is not recommended if you are shipping this as a package. This approach limits the Section to a single element. Instead, use a Dashboard or Section View for your main view, which allows additional Dashboards or Section Views to be added to the Section.

manifests.ts

const section : UmbExtensionManifest = {
    type: "section",
    alias: "Empty.Section",
    name : 'Empty Section',
    element : () => import('./empty-section.element.js'),
    meta : {
        label : 'Empty Section',
        pathname : 'empty-section'
    }
}

The element file must contain an element, a default export, or specify the element name in the elementName field.