---
title: menuBarTemplate
framework: tvml
role: collectionGroup
path: tvml/menubartemplate
---

# menuBarTemplate

Creates a page with items along the top and related information below.

## Overview

Overview Use the menuBarTemplate to display a list of selectable items across the top of the screen. Users can move between menu bar items to change the information displayed below the menu bar. The following figure shows the basic layout for a menuBarTemplate page. The theme for the menu bar template defaults to the system preference.

note: You can display up to seven items in the menu bar. Main Elements The following listing shows the main elements of the menuBarTemplate element in TVML format. <document>     <menuBarTemplate>         <menuBar>             <menuItem>                 <title>…</title>             </menuItem>         </menuBar>     </menuBarTemplate> </document> Element Descriptions Example The following listing shows the TVML for a menuBarTemplate example. The example shows the menu bar along the top of the screen. Expand the controlling JavaScript file in order to show content for each item in the menu bar. For more information, see TVMLKit JS. <document>     <menuBarTemplate>         <menuBar>             <menuItem id="navigation_top_movies" data-identifier="list">                 <title>Top Movies</title>             </menuItem>             <menuItem id="navigation_genres" data-identifier="index">                 <title>Genres</title>             </menuItem>             <menuItem id="navigation_search" data-identifier="search">                 <title>Search</title>             </menuItem>             <menuItem id="navigation_edit" data-identifier="edit">                 <title>Edit</title>             </menuItem>             <menuItem id="navigation_settings_add" data-identifier="add_settings">                 <title>Add Settings</title>             </menuItem>         </menuBar>     </menuBarTemplate> </document> The following figure shows the output for the above example:

## Topics

### Valid TVML Attributes

- [binding](tvml/binding.md)
- [layoutDirection](tvml/layoutdirection.md)
- [prototype](tvml/prototype.md)
- [theme](tvml/theme.md)

## See Also

### Full-Page Templates

- [alertTemplate](tvml/alerttemplate.md)
- [catalogTemplate](tvml/catalogtemplate.md)
- [compilationTemplate](tvml/compilationtemplate.md)
- [descriptiveAlertTemplate](tvml/descriptivealerttemplate.md)
- [divTemplate](tvml/divtemplate.md)
- [formTemplate](tvml/formtemplate.md)
- [listTemplate](tvml/listtemplate.md)
- [loadingTemplate](tvml/loadingtemplate.md)
- [mainTemplate](tvml/maintemplate.md)
- [oneupTemplate](tvml/oneuptemplate.md)
- [paradeTemplate](tvml/paradetemplate.md)
- [productBundleTemplate](tvml/productbundletemplate.md)
- [productTemplate](tvml/producttemplate.md)
- [ratingTemplate](tvml/ratingtemplate.md)
- [searchTemplate](tvml/searchtemplate.md)