---
title: TabNavigator
framework: docc
role: symbol
role_heading: Directive
path: docc/tabnavigator
---

# TabNavigator

A container directive that arranges content into a tab-based layout.

## Declaration

```swift
@TabNavigator {
    @Tab(_ title: String) { ... }
}
```

## Overview

Overview Create a new tab navigator by writing a @TabNavigator directive that contains child @Tab directives. @TabNavigator {    @Tab("Powers") {       ![A diagram with the five sloth power types.](sloth-powers)    }

@Tab("Exercise routines") {       ![A sloth relaxing and enjoying a good book.](sloth-exercise)    }

@Tab("Hats") {       ![A sloth discovering newfound confidence after donning a fedora.](sloth-hats)    } }

## Topics

- [Tab](docc/tab.md)

## See Also

### Creating Custom Page Layouts

- [Row](docc/row.md)
- [Links](docc/links.md)
- [Small](docc/small.md)