Umbraco Sections

What is it?

Documentation

• Main docs: https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/sections/section
• Section Views: https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/sections/section-view
• Section Sidebar: https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/sections/section-sidebar
• Dashboard: https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/dashboard
• Foundation: https://docs.umbraco.com/umbraco-cms/customizing/foundation
• Extension Registry: https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-registry

Reference Example

/Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/

Related Foundation Skills

• Context API: When implementing section contexts or explaining how section extensions communicate
  • Reference skill:

    umbraco-context-api

• Conditions: When implementing permissions, user group access, visibility controls, or section restrictions
  • Reference skill:

    umbraco-conditions

• Routing: When implementing pathnames, navigation patterns, URLs, or section routing
  • Reference skill:

    umbraco-routing

Workflow

1. Fetch docs - Use WebFetch on the URLs above
2. Ask questions - What will the section contain? Dashboards? Trees? Sidebar needed?
3. Generate files - Create manifest for section + related extensions based on latest docs
4. Explain - Show what was created and how to configure permissions

Minimal Examples

Basic Section (umbraco-package.json)

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

Section with Icon (manifest.ts)

export const manifests = [
  {
    type: "section",
    alias: "My.CustomSection",
    name: "Custom Section",
    meta: {
      label: "Custom",
      pathname: "custom-section"
    },
    conditions: [
      {
        alias: "Umb.Condition.SectionUserPermission",
        match: "My.CustomSection"
      }
    ]
  }
];

Section with Dashboard (manifest.ts)

export const manifests = [
  {
    type: "section",
    alias: "My.Section",
    name: "My Section",
    meta: {
      label: "My Section",
      pathname: "my-section"
    }
  },
  {
    type: "dashboard",
    alias: "My.Section.Dashboard",
    name: "My Section Dashboard",
    element: () => import('./dashboard.element.js'),
    meta: {
      label: "Welcome",
      pathname: "welcome"
    },
    conditions: [
      {
        alias: "Umb.Condition.SectionAlias",
        match: "My.Section"
      }
    ]
  }
];

Section with Sidebar (manifest.ts)

export const manifests = [
  {
    type: "section",
    alias: "My.Section",
    name: "My Section",
    meta: {
      label: "My Section",
      pathname: "my-section"
    }
  },
  {
    type: "sectionSidebarApp",
    alias: "My.Section.Sidebar",
    name: "My Section Sidebar",
    element: () => import('./sidebar.element.js'),
    conditions: [
      {
        alias: "Umb.Condition.SectionAlias",
        match: "My.Section"
      }
    ]
  }
];

Key Properties

• type: Always

  "section"

• alias: Unique identifier for the section
• name: Display name in backoffice
• meta.label: Label shown in navigation
• meta.pathname: URL route for the section
• element: Optional custom element (not recommended - use dashboards instead)
• conditions: Control visibility and access

Granting Permissions

1. Navigate to Users section in Umbraco backoffice
2. Select User Groups menu item
3. Choose the user group to configure
4. Click the Choose button under Sections
5. Select your custom section
6. Save changes

Built-in Sections

• Umb.Section.Content - Content management
• Umb.Section.Media - Media library
• Umb.Section.Settings - System settings
• Umb.Section.Packages - Package management
• Umb.Section.Users - User management
• Umb.Section.Members - Member management