<!--
{
  "documentType" : "article",
  "framework" : "TVML",
  "identifier" : "/documentation/TVML/maintemplate",
  "metadataVersion" : "0.1.0",
  "role" : "collectionGroup",
  "title" : "mainTemplate"
}
-->

# mainTemplate

Displays user options for a media item.

## Overview

Use the `mainTemplate` element to display options to the user; for example, the main
page for a movie with options to play the movie, see extra content, and jump to specific
scenes. The background area contains an image relating to the product, and the options
are contained in a menu bar along the bottom of the screen. The following figure
shows the basic layout for a `mainTemplate` page. The default theme for a main template
is `dark`.

![Layout diagram showing a large background area with a menu bar at the bottom.](images/com.apple.TVML/maintemplate-1.png)

### Main Elements

The following listing shows the elements of the mainTemplate element in TVML format.

```xml
<mainTemplate>
    <background>…</background>
    <menuBar>
        <section>
            <menuItem>…</menuItem>
            <menuItem>…</menuItem>
        </section>
    </menuBar>
</mainTemplate>
```

#### Element Descriptions

- [background](/documentation/TVML/background): The background elements used on the page, such as `audio`.
- [menuBar](/documentation/TVML/menubar): A list of displayed menu items.
- [menuItem](/documentation/TVML/menuitem): Information for an individual menu item.
- [section](/documentation/TVML/section): An area containing a group of menu items.

### Example

The following listing shows the TVML for a `mainTemplate` example. The example displays
a full-screen image as the background. A menu bar contains three navigable options.

```xml
<document>
    <mainTemplate>
        <background>
            <img src="path to images on your server/Car_Movie_1920x1080" />
        </background>
        <menuBar>
            <section>
                <menuItem>
                    <title>PLAY</title>
                </menuItem>
                <menuItem>
                    <title>SCENES</title>
                </menuItem>
                <menuItem>
                    <title>EXTRAS</title>
                </menuItem>
            </section>
        </menuBar>
    </mainTemplate>
</document>
```

The following figure shows the output for the above example:

![Screenshot showing a stylized city landscape. A menu bar showing user options is along the bottom.](images/com.apple.TVML/maintemplate-2.png)

## Topics

### Valid TVML Attributes

[binding](/documentation/TVML/binding)

Associates information in a data item with an element.

[layoutDirection](/documentation/TVML/layoutdirection)

Specifies the direction in which text is displayed.

[prototype](/documentation/TVML/prototype)

Associates a data item type with an element.

[theme](/documentation/TVML/theme)

Sets the color scheme for an element.



---

Copyright &copy; 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)