# Section

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.

<figure><img src="https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-a525f169bf70217e304779c64374ec76b9a64726%2Fsection.svg?alt=media" alt=""><figcaption><p>Section</p></figcaption></figure>

## **Creating a section**

### **Manifests**

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

{% code title="umbraco-package.json" %}

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

{% endcode %}

### **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.

<figure><img src="https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-bad7898e2ac835b2bb12b19c1b109ceda80ba9cd%2Fsections-assigning.png?alt=media" alt=""><figcaption><p>Enabling new Sections</p></figcaption></figure>

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

<figure><img src="https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-62299525623c4735504b91352d048ec2148b5ce9%2Fsection-empty.png?alt=media" alt=""><figcaption><p>Section</p></figcaption></figure>

## **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](https://docs.umbraco.com/umbraco-cms/tutorials/creating-a-custom-dashboard), [sidebars](https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/sections/section-sidebar), and [section views](https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/sections/section-view).

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.

{% code title="manifests.ts" %}

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

{% endcode %}

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