menuBarTemplate
Creates a page with items along the top and related information below.
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.
[Image]
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
- menuBar
Menu items associated with the menu bar.
- menuItem
Information about a single menu item.
- title
The text that describes the menu item.
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:
[Image]