Documentation Archive

Developer

Apple TV Markup Language Reference

On This Page

menuBarTemplate

Use the menu bar template (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. Figure 11-1 shows the basic layout for a menuBarTemplate page. The theme for the alert template defaults to the system preference. The theme for the menu bar template defaults to the system preference.

Figure 11-1Menu bar template image: ../Art/ATV_temps_menubar_2x.png

Main Elements of the Menu Bar Template

Listing 11-1 shows the main elements in TVML format, and Table 11-1 describes the main elements.

Listing 11-1menuBarTemplate TVML format
  1. <document>
  2. <menuBarTemplate>
  3. <menuBar>
  4. <menuItem>
  5. <title>…</title>
  6. </menuItem>
  7. </menuBar>
  8. </menuBarTemplate>
  9. </document>

Table 11-1menuBarTemplate element descriptions

Element name

Description

menuBar

Menu items associated with the menu bar.

menuItem

Information about a single menu item.

title

The text that describes the menu item.

Menu Bar Template Example

Listing 11-2 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 Apple TV JavaScript Framework Reference. Figure 11-2 shows the output of the menu bar template example.

Listing 11-2menuBarTemplate example TVML
  1. <document>
  2. <menuBarTemplate>
  3. <menuBar>
  4. <menuItem id="navigation_top_movies" data-identifier="list">
  5. <title>Top Movies</title>
  6. </menuItem>
  7. <menuItem id="navigation_genres" data-identifier="index">
  8. <title>Genres</title>
  9. </menuItem>
  10. <menuItem id="navigation_search" data-identifier="search">
  11. <title>Search</title>
  12. </menuItem>
  13. <menuItem id="navigation_edit" data-identifier="edit">
  14. <title>Edit</title>
  15. </menuItem>
  16. <menuItem id="navigation_settings_add" data-identifier="add_settings">
  17. <title>Add Settings</title>
  18. </menuItem>
  19. </menuBar>
  20. </menuBarTemplate>
  21. </document>
Figure 11-2menuBarTemplate example output image: ../Art/menuBarTemplateSS_2x.png