> For the complete documentation index, see [llms.txt](https://aptitude.gitbook.io/zaubercms/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aptitude.gitbook.io/zaubercms/extending-zaubercms/custom-admin-sections.md).

# Custom Admin Sections

### Sections

Sections are created using the `ISection` interface. Just create a new Blazor component and implement the `ISection` interface like below. This component will become your section index/default page and also add a nav item in the top admin navigation. The example below would add a new section called 'My Custom Section'.

```csharp
@attribute [Route(Url)]
@attribute [Authorize(Roles = Constants.Roles.AdminRoleName)]
@layout SectionLayout
@implements ZauberCMS.Core.Sections.Interfaces.ISection

@* This will show any dashboard set to this sections alias *@
<SectionDashboards SectionAlias="@(Alias)"/>

@code {
    // Save the url as a const, so we can reuse it
    // this is the main page of your section
    private const string Url = "/admin/mycustomsection";
    
    // The name displayed in the nav at the top
    public string Name => "My Custom Section";
    
    // The alias you will use throughout for this section
    public string Alias => "MyCustomSection";
    
    // The url of the main page of your section
    public string IndexUrl => Url;
    
    // The sort across the admin nav where you want this section to appear
    public int SortOrder => 1;
    
    [CascadingParameter] protected SectionLayout? Layout { get; set; }

    protected override void OnInitialized()
    {
        // Set your section as normal
        Layout?.SetSection(Alias);
    }
}
```

### Section Nav Group

In the left hand navigation panel on sections, the navigation is split into groups, and each group has a heading and many section navs (See next section below). Creating a Section Group Nav is simple, just create a class and implement `ISectionNavGroup`

```csharp
public class ContentNavGroup : ISectionNavGroup
{
    public string Heading => "Content";
    public string Alias => Constants.Sections.SectionNavGroups.ContentNavGroup;
    public int SortOrder => 0;
    public string SectionAlias => Constants.Sections.ContentSection;
}
```

Heading = The heading you want to appear\
Alias = This is the alias the ISectionNav will use so\
SortOrder = Self explanatory\
SectionAlias = What section you want the nav group to show in

Below shows two Section Nav Groups, Structure and Advanced.

<figure><img src="/files/VhC6sFA7EjWbfkNqQHKv" alt=""><figcaption></figcaption></figure>

### Section Nav

To show trees or navigation links under your section nav groups, you just need to create a blazor component and implement ISectionNav like below.

`ISectionNav` does implement `IDisposable` so you can optionally make [use of the AppState events](/zaubercms/extending-zaubercms/using-appstate-events.md) and refresh things like Trees when something is changed. The source code in ZauberCMS has lots of examples of using Trees in ISectionNavs.

```csharp
@implements ZauberCMS.Core.Sections.Interfaces.ISectionNav

<NavLink href="/mycustompage" />

@code {
    public void Dispose()
    {
        // Not needed in this example
    }
    
    // The sort order on the section nav
    public int SortOrder => 2;
    
    // Which section nav group this nav should appear in
    public string SectionNavGroupAlias => "MyCustomNavGroupAlias";
}
```

### Section Dashboards

Finally, you can add Dashboards to any section. These appear on the main/default section page in tabs. Each main section has a default dashboard. The example below adds a dashboard tab to the media section (Changing the alias adds it into any section you wish)

```csharp
@implements ZauberCMS.Core.Sections.Interfaces.ISectionDashboard

<p>Dashboard code here</p>

@code {
    // Name of the tab
    public string TabName => "Custom Tab Name";
    
    // The order of the tabs to appear
    public int SortOrder => 2;
    
    // The section I want this to appear
    public string SectionAlias => Constants.Sections.MediaSection;
}
```

### Adding A Page To Existing Sections

Adding a page to an existing section is easy, you just need to make sure you use the `SectionLayout` for your layout and then set the section you are in. Example below would be a page that would show in the media section

```csharp
@page "/admin/media/mypagename"
@attribute [Authorize(Roles = Constants.Roles.AdminRoleName)]
@layout SectionLayout

<p>My content here</p>

@code {
    // Pass in the Layout via a CascadingParameter so we can use it below
    [CascadingParameter] protected SectionLayout? Layout { get; set; }
    
    protected override void OnInitialized()
    {
        // Set the section we want this page to be in via the section alias
        // all our sections are stored in the constants to save manually using the string
        Layout?.SetSection(Constants.Sections.MediaSection);
    }
}
```

### Authentication

Remember. If you are creating an admin page, make sure you restrict the access to admins only by using the X attribute on your pages

```csharp
@attribute [Authorize(Roles = Constants.Roles.AdminRoleName)]
```