Sections are top-level navigation items in the Umbraco backoffice that appear alongside default options like Content, Media, and Settings. They serve as a home for custom content and functionality, providing a blank canvas that can be extended with dashboards, sidebars, and section views. Sections require permission configuration for user groups to access them.
This example demonstrates section sidebar menu expansion patterns. Study this for sidebar customization.
Related Foundation Skills
If you need to explain these foundational concepts when implementing sections, reference these 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
Fetch docs
- Use WebFetch on the URLs above
Ask questions
- What will the section contain? Dashboards? Trees? Sidebar needed?
Generate files
- Create manifest for section + related extensions based on latest docs
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
To enable a custom section for users:
Navigate to
Users
section in Umbraco backoffice
Select
User Groups
menu item
Choose the user group to configure
Click the
Choose
button under Sections
Select your custom section
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
That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.