# Folders

Folders help organize trees in Umbraco UI Builder, allowing you to structure content with nested folders and collections. A folder can exist within a tree or as a sub-folder within another folder. Folders can contain either sub-folders or [Collections](/umbraco-ui-builder/18.latest/collections/overview.md).

![Tree with Settings folder](/files/Vx1HlPyZmLzwHjUodCmY)

## Defining a Folder

To define a folder, use one of the `AddFolder` methods on a [`Tree`](/umbraco-ui-builder/18.latest/areas/trees.md) or parent `Folder` config builder instance.

### Using the `AddFolder()` Method

Adds a folder to the current tree with the specified name and a default folder icon.

#### Method Syntax

```cs
AddFolder(string name, Lambda folderConfig = null) : FolderConfigBuilder
```

#### Example

```csharp
treeConfig.AddFolder("Settings", folderConfig => {
    ...
});
```

### Using the `AddFolder()` Method with Custom Icon

Adds a folder to the current tree with a specified name and icon.

#### Method Syntax

```cs
AddFolder(string name, string icon, Lambda folderConfig = null) : FolderConfigBuilder
```

#### Example

```csharp
treeConfig.AddFolder("Settings", "icon-settings", folderConfig => {
    ...
});
```

## Changing a Folder Alias

When creating a new folder, an alias is automatically generated. However, if you need a specific alias, you can use the `SetAlias` method to override it.

### Using the `SetAlias()` Method

Sets a custom alias for a folder.

#### Method Syntax

```cs
SetAlias(string alias) : FolderConfigBuilder
```

#### Example

```csharp
folderConfig.SetAlias("settings");
```

## Changing a Folder Icon Color

### Using the `SetIconColor()` Method

Sets the folder icon color to the given color. The available colors are: `black`, `green`, `yellow`, `orange`, `blue`, or `red`.

#### Method Syntax

```cs
SetIconColor(string color) : FolderConfigBuilder
```

#### Example

```csharp
folderConfig.SetIconColor("blue");
```

## Adding a Sub-Folder To a Folder

### Using the `AddFolder()` Method for Sub-Folders

Adds a sub-folder inside the current folder with a specified name and a default folder icon.

#### Method Syntax

```cs
AddFolder (string name, Lambda folderConfig = null) : FolderConfigBuilder
```

#### Example

```csharp
folderConfig.AddFolder("Categories", subFolderConfig => {
    ...
});
```

### Using the `AddFolder()` Method for Sub-Folders with Custom Icon

Adds a sub folder to the current folder with a specified name and custom icon.

#### Method Syntax

```cs
AddFolder (string name, string icon, Lambda folderConfig = null) : FolderConfigBuilder
```

#### Example

```csharp
folderConfig.AddFolder("Categories", "icon-tags", subFolderConfig => {
    ...
});
```

## Adding a Collection to a Folder

### Using the `AddCollection<>()` Method

Adds a collection to the current folder with the given names, descriptions, and default icons. The ID property must be defined. For more details, see the [Collections](/umbraco-ui-builder/18.latest/collections/overview.md) article.

#### Method Syntax

```cs
AddCollection<TEntityType>(
    Lambda idFieldExpression, 
    string nameSingular, 
    string namePlural, 
    string description, 
    Lambda collectionConfig = null
) : CollectionConfigBuilder<TEntityType>

```

#### Example

```csharp
folderConfig.AddCollection<Person>(
    p => p.Id, 
    "Person", 
    "People", 
    "A collection of people", 
    collectionConfig => {
        ...
    }
);
```

### Using the `AddCollection<>()` Method with Custom Icons

Adds a collection to the current folder with the given names, description and icons. The ID property must be defined. For more details, see the [Collections](/umbraco-ui-builder/18.latest/collections/overview.md) article.

#### Method Syntax

```cs
AddCollection<TEntityType>(
    Lambda idFieldExpression, 
    string nameSingular, 
    string namePlural, 
    string description, 
    string iconSingular, 
    string iconPlural, 
    Lambda collectionConfig = null
) : CollectionConfigBuilder<TEntityType>

```

#### Example

```csharp
folderConfig.AddCollection<Person>(
    p => p.Id, 
    "Person", 
    "People", 
    "A collection of people", 
    "icon-umb-users", 
    "icon-umb-users", 
    collectionConfig => {
        ...
    }
);
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.umbraco.com/umbraco-ui-builder/18.latest/areas/trees/folders.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.