---
title: Sections
---

# Sections

<div class="documentation__toc"></div>

## Introduction

The control panel displays module's structure based on the information found in the module's class.

### Defining Sections

Sections can be defined on the `sections` property of the module or as a handler like `ExampleModuleSections`.

```php
protected $sections = [
    'products' => [
        'buttons' => [
            'create',
        ],
    ],
    'categories' => [
        'buttons' => [
            'create',
        ],
    ],
];
```

### The Module Segment

Modules are the primary building block of the control panel and must be routed by their `slug` first.

```bash
admin/products // Products module
admin/settings // Settings module
```

### The Section Segment

The third slug is reserved for sections. Module's define their own sections. The first section, known as the `default` section does not require a URI segment.

```bash
admin/products              // default section of products module
admin/products/categories   // "categories" section of products module
admin/products/brands       // "brands" section of products module
```

### Additional Segments

Aside from nesting sections the control panel no longer has any interest in your URI pattern after the section segment.

### Section Buttons

Each section can define buttons that display when that section is active. Buttons can be used for anything! Very often they are used for displaying create a new entry buttons for example.

[Control Panel Buttons](../components/buttons){.link}


### Definition

|Key|Required|Type|Default|Description|
|--- |--- |--- |--- |--- |
|$slug|true|string|The section array key.|The slug will become the URI segment and must be unique.|
|$title|false|string|{vendor}.module.{module}::section.{slug}.title|The section title or translation key.|
|$description|false|string|{vendor}.module.{module}::section.{slug}.description|The section description or translation key.|
|$buttons|false|array|null|An array of button definitions.|
|$icon|false|string|null|A registered icon string or icon class.|
|$class|false|string|null|A CSS class to append to the section.|
|$matcher|false|string|The section's URL|A string pattern to test against a request path to determine if the section is active or not. Example: admin/products/*/variants|
|$parent|false|string|null|The slug of the parent section if any. Sub-sections will not display in the navigation. Sub-sections highlight their parent when active but display their own buttons.|
|$sections|false|array|null|An array of child section definitions. These are placed in the base array and parent set on them automatically.|
|$attributes|false|array|null|An array of `key => value` HTML attributes. Any base level definition keys starting with `data-` will be pushed into attributes automatically.|
|$href|false|string|admin/{module}/{slug}|The HREF to the section. This gets pushed into `attributes` automatically.|
|$breadcrumb|false|string|false|The section title.|The breadcrumb text for the section.|
|$view|false|string|null|The view to delegate the section to.|
|$html|false|string|null|The HTML to display as the section.|
|$permission|false|string|{vendor}.module.{module}::{slug}.*|The permission string required to access the section. Note that builders within the section usually automate permissions so this may not be required if using said builders.|
|$permalink|false|string|The section URL.|The actual permalink for the section in the case that the HREF is used for something different. This is helpful when the HREF used for the section link needs to be different than the actual HREF for the section. Like a section link that opens a modal as in the above example to take you into the section.|

