---
title: "Outline Group | Explore SwiftUI"
description: "A structure that computes views and disclosure groups on demand from an underlying collection of tree-structured, identified data"
canonical_url: "https://exploreswiftui.com/library/list/outline-group"
meta:
  author: "Explore SwiftUI"
  "og:description": "A structure that computes views and disclosure groups on demand from an underlying collection of tree-structured, identified data"
  "og:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_Outline%2BGroup%2Cdescription_~QSBzdHJ1Y3R1cmUgdGhhdCBjb21wdXRlcyB2aWV3cyBhbmQgZGlzY2xvc3VyZSBncm91cHMgb24gZGVtYW5kIGZyb20gYW4gdW5kZXJseWluZyBjb2xsZWN0aW9uIG9mIHRyZWUtc3RydWN0dXJlZCwgaWRlbnRpZmllZCBkYXRhLg%2Ccategory_List%2Cimage_~L2FwaS9pbWFnZXMvMTMyL3ZhcmlhbnRzLzM3MT92PTE3OTAwNzM0Nzg4NDImcj0yJnc9MTI4MCZxPTg1JmY9anBlZw%2CimageMode_crop%2CimagePosition_top%2CimageFrame_~cG9zaXRpb246IGFic29sdXRlOyByaWdodDogMDsgd2lkdGg6IDY0MHB4OyBoZWlnaHQ6IDQ4MHB4OyBkaXNwbGF5OiBmbGV4OyBvdmVyZmxvdzogaGlkZGVuOyBiYWNrZ3JvdW5kOiAjRkZGRkZGOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7IGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm90dG9tOiAwOyBib3JkZXItdG9wOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLXRvcC1sZWZ0LXJhZGl1czogNzRweDs%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ2aXNpb25PUyJdfQ%2Cp_Ii9saWJyYXJ5L2xpc3Qvb3V0bGluZS1ncm91cCI%2Cs_8Mz6_JprxnPSz0Q0.png"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "Outline Group | Explore SwiftUI"
  "twitter:description": "A structure that computes views and disclosure groups on demand from an underlying collection of tree-structured, identified data"
  "twitter:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_Outline%2BGroup%2Cdescription_~QSBzdHJ1Y3R1cmUgdGhhdCBjb21wdXRlcyB2aWV3cyBhbmQgZGlzY2xvc3VyZSBncm91cHMgb24gZGVtYW5kIGZyb20gYW4gdW5kZXJseWluZyBjb2xsZWN0aW9uIG9mIHRyZWUtc3RydWN0dXJlZCwgaWRlbnRpZmllZCBkYXRhLg%2Ccategory_List%2Cimage_~L2FwaS9pbWFnZXMvMTMyL3ZhcmlhbnRzLzM3MT92PTE3OTAwNzM0Nzg4NDImcj0yJnc9MTI4MCZxPTg1JmY9anBlZw%2CimageMode_crop%2CimagePosition_top%2CimageFrame_~cG9zaXRpb246IGFic29sdXRlOyByaWdodDogMDsgd2lkdGg6IDY0MHB4OyBoZWlnaHQ6IDQ4MHB4OyBkaXNwbGF5OiBmbGV4OyBvdmVyZmxvdzogaGlkZGVuOyBiYWNrZ3JvdW5kOiAjRkZGRkZGOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7IGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm90dG9tOiAwOyBib3JkZXItdG9wOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLXRvcC1sZWZ0LXJhZGl1czogNzRweDs%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ2aXNpb25PUyJdfQ%2Cp_Ii9saWJyYXJ5L2xpc3Qvb3V0bGluZS1ncm91cCI%2Cs_8Mz6_JprxnPSz0Q0.png"
  "twitter:title": "Outline Group | Explore SwiftUI"
---

> Index of every page on this site: [llms.txt](https://exploreswiftui.com/llms.txt)

**Interactive previews**[ iPhone](https://exploreswiftui.com/iphone?element=132)

# **Outline Group**

A structure that computes views and disclosure groups on demand from an underlying collection of tree-structured, identified data.

![Outline Group - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/132/variants/371?v=1790073478842&r=2&w=800&q=80&f=webp)

### **Platform Compatibility**

iOS 14.0+ iPadOS 14.0+ macOS 11.0+ visionOS 1.0+

### **Tags**

### **SwiftUI Code**

[ Docs](https://developer.apple.com/documentation/swiftui/outlinegroup)

```
struct TreeItem: Identifiable {
  let id = UUID()
  let name: String
  let children: [TreeItem]?

  init(_ name: String, children: [TreeItem]? = nil) {
    self.name = name
    self.children = children
  }
}

let data = [
TreeItem("Header", children: [
TreeItem("Foo", children: [
TreeItem("Foo 1"),
TreeItem("Foo 2")
]),
TreeItem("Bar", children: [
TreeItem("Bar 1"),
TreeItem("Bar 2")
])
])
]

var body: some View {
  List {
    OutlineGroup(data, children: \.children) { item in
    Text(item.name)
  }
}
}
```

### **Found an issue or have a suggestion?**

Created: August 11, 2025Updated: August 11, 2025

![Connect Wizard](https://exploreswiftui.com/_ipx/f_webp&q_80&s_48x48/images/connect-wizard-icon.png)

**Connect Wizard**

**Unlock insights App Store Connect doesn’t show you.**

[** Get Started **](https://apps.apple.com/app/apple-store/id6747314580?pt=121213751&ct=Explore%20SwiftUI%20Banner&mt=8)

### **More List Components **

[**View all **](https://exploreswiftui.com/library/list)

![Disclosure Group - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/131/variants/363?v=1790073478842&r=2&w=412&q=75&f=webp)

### **Disclosure Group**

A view that shows or hides another content view, based on the state of a disclosure control.

![Edit Button - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/130/variants/367?v=1790073478842&r=2&w=412&q=75&f=webp)

### **Edit Button**

A button that toggles the edit mode environment value.

![Section Index Label and Visibility - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/129/variants/369?v=1790073478842&r=2&w=412&q=75&f=webp)

### **Section Index Label and Visibility**

Sets the label that is used in a section index to point to this section, typically only a single character long. Changes the visibility of the list section index.

![Move Disabled - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/128/variants/361?v=1790073478842&r=2&w=412&q=75&f=webp)

### **Move Disabled**

Adds a condition for whether the view’s view hierarchy is movable.

![Delete Disabled - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/127/variants/351?v=1790073478842&r=2&w=412&q=75&f=webp)

### **Delete Disabled**

Adds a condition for whether the view’s view hierarchy is deletable.

![Refreshable List - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/126/variants/359?v=1790073478842&r=2&w=412&q=75&f=webp)

### **Refreshable List**

Marks this view as refreshable.

![Swipe Action - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/125/variants/357?v=1790073478842&r=2&w=412&q=75&f=webp)

### **Swipe Action**

Adds custom swipe actions to a row in a list.

![List Badge Prominence - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/124/variants/353?v=1790073478842&r=2&w=412&q=75&f=webp)

### **List Badge Prominence**

Specifies the prominence of badges created by this view.

### **Explore Other Components **

[**Browse all **](https://exploreswiftui.com/)

![RenameButton - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/37/variants/213?v=1790073478842&r=2&w=412&q=75&f=webp)

### **RenameButton**

A button that triggers a standard rename action

![AccessoryCircularGaugeStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/41/variants/219?v=1790073478842&r=2&w=412&q=75&f=webp)

### **AccessoryCircularGaugeStyle**

A gauge style that displays an open ring with a marker that appears at a point along the ring to indicate the gauge’s current value

![UIKit Fill Colors - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/11/variants/43?v=1790073478842&r=2&w=412&q=75&f=webp)

### **UIKit Fill Colors**

![CircularGaugeStyle - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/47/variants/263?v=1790073478842&r=2&w=412&q=75&f=webp)

### **CircularGaugeStyle**

A gauge style that displays an open ring with a marker that appears at a point along the ring to indicate the gauge’s current value

![ViewThatFits - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/5/variants/1?v=1790073478842&r=2&w=412&q=75&f=webp)

### **ViewThatFits**

A view that adapts to the available space by providing the first child view that fits.

![Single Subscription Store View - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/226/variants/456?v=1790073478842&r=2&w=412&q=75&f=webp)

### **Single Subscription Store View**

Creates a view that loads subscriptions based on a collection of product identifiers, and merchandises them with automatic marketing content.

![Menu Section - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/19/variants/416?v=1790073478842&r=2&w=412&q=75&f=webp)

### **Menu Section**

A Section inside a Menu

![PaletteControlGroupStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/57/variants/49?v=1790073478842&r=2&w=412&q=75&f=webp)

### **PaletteControlGroupStyle**

A control group style that presents its content as a palette.

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://exploreswiftui.com/#website","@type":"WebSite","description":"A visual library for SwiftUI APIs, components, and modifiers","inLanguage":"en-US","name":"Explore SwiftUI","url":"https://exploreswiftui.com/","publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/list/outline-group#webpage","@type":"WebPage","dateModified":"2025-08-11T05:58:50.381Z","datePublished":"2025-08-11T05:58:40.918Z","description":"A structure that computes views and disclosure groups on demand from an underlying collection of tree-structured, identified data","name":"Outline Group","url":"https://exploreswiftui.com/library/list/outline-group","breadcrumb":{"@id":"https://exploreswiftui.com/library/list/outline-group#breadcrumb"},"isPartOf":{"@id":"https://exploreswiftui.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://exploreswiftui.com/library/list/outline-group"]}],"primaryImageOfPage":{"@id":"https://exploreswiftui.com/#logo"}},{"@id":"https://exploreswiftui.com/#identity","@type":"Organization","description":"A visual library for SwiftUI APIs, components, and modifiers","name":"Explore SwiftUI","url":"https://exploreswiftui.com","logo":{"@id":"https://exploreswiftui.com/#logo"},"sameAs":["https://x.com/Typ0genius","https://mastodon.social/@Typ0genius"]},{"@id":"https://exploreswiftui.com/library/list/outline-group#article","dateModified":"2025-08-11T05:58:50.381Z","datePublished":"2025-08-11T05:58:40.918Z","description":"A structure that computes views and disclosure groups on demand from an underlying collection of tree-structured, identified data","headline":"Outline Group","inLanguage":"en-US","name":"Outline Group","thumbnailUrl":"https://exploreswiftui.com/api/images/132/variants/371?v=1790073478842&r=2","url":"https://exploreswiftui.com/library/list/outline-group","@type":["Article","TechArticle"],"about":{"@type":"Thing","name":"SwiftUI"},"author":{"@id":"https://exploreswiftui.com/#identity"},"image":{"@id":"https://exploreswiftui.com/#/schema/image/1"},"isPartOf":{"@type":"WebSite","name":"Explore SwiftUI","url":"https://exploreswiftui.com"},"mainEntityOfPage":{"@id":"https://exploreswiftui.com/library/list/outline-group#webpage"},"publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/list/outline-group#/schema/software-source-code/1","@type":"SoftwareSourceCode","codeRepository":"https://developer.apple.com/documentation/swiftui/outlinegroup","codeSampleType":"full example","description":"A structure that computes views and disclosure groups on demand from an underlying collection of tree-structured, identified data","name":"Outline Group SwiftUI Example","programmingLanguage":"Swift","runtimePlatform":"SwiftUI","text":"struct TreeItem: Identifiable {\n  let id = UUID()\n  let name: String\n  let children: [TreeItem]?\n\n  init(_ name: String, children: [TreeItem]? = nil) {\n    self.name = name\n    self.children = children\n  }\n}\n\nlet data = [\nTreeItem(\"Header\", children: [\nTreeItem(\"Foo\", children: [\nTreeItem(\"Foo 1\"),\nTreeItem(\"Foo 2\")\n]),\nTreeItem(\"Bar\", children: [\nTreeItem(\"Bar 1\"),\nTreeItem(\"Bar 2\")\n])\n])\n]\n\nvar body: some View {\n  List {\n    OutlineGroup(data, children: \\.children) { item in\n    Text(item.name)\n  }\n}\n}","about":[{"@type":"Thing","name":"SwiftUI"},{"@type":"Thing","name":"List"},{"@type":"Thing","name":"Outline Group"}]},{"@id":"https://exploreswiftui.com/library/list/outline-group#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Home","item":"https://exploreswiftui.com","position":1},{"@type":"ListItem","name":"List","item":"https://exploreswiftui.com/library/list","position":2},{"@type":"ListItem","name":"Outline Group","item":"https://exploreswiftui.com/library/list/outline-group","position":3}]},{"@id":"https://exploreswiftui.com/#logo","@type":"ImageObject","caption":"Explore SwiftUI","contentUrl":"https://exploreswiftui.com/apple-touch-icon.png","inLanguage":"en","url":"https://exploreswiftui.com/apple-touch-icon.png"},{"@id":"https://exploreswiftui.com/#/schema/image/1","@type":"ImageObject","contentUrl":"https://exploreswiftui.com/api/images/132/variants/371?v=1790073478842&r=2","inLanguage":"en","url":"https://exploreswiftui.com/api/images/132/variants/371?v=1790073478842&r=2"}]}
```