> For the complete documentation index, see [llms.txt](https://docs.umbraco.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.umbraco.com/umbraco-ui-builder/17.latest/areas/trees/folders.md). # Folders Configuring folders to organise trees in Umbraco UI Builder. 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/17.latest/collections/overview.md). ![Tree with Settings folder](https://2099605805-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXdAOUcqxoBqXe5oCQF8z%2Fuploads%2Fgit-blob-c9956e07e081b5a9d1371ba7b93faba00bf0588d%2Ftree.png?alt=media) ## Defining a Folder To define a folder, use one of the `AddFolder` methods on a [`Tree`](/umbraco-ui-builder/17.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/17.latest/collections/overview.md) article. #### Method Syntax ```cs AddCollection( Lambda idFieldExpression, string nameSingular, string namePlural, string description, Lambda collectionConfig = null ) : CollectionConfigBuilder ``` #### Example ```csharp folderConfig.AddCollection( 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/17.latest/collections/overview.md) article. #### Method Syntax ```cs AddCollection( Lambda idFieldExpression, string nameSingular, string namePlural, string description, string iconSingular, string iconPlural, Lambda collectionConfig = null ) : CollectionConfigBuilder ``` #### Example ```csharp folderConfig.AddCollection( p => p.Id, "Person", "People", "A collection of people", "icon-umb-users", "icon-umb-users", collectionConfig => { ... } ); ``` --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.umbraco.com/umbraco-ui-builder/17.latest/areas/trees/folders.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.