# shelf Displays elements horizontally and adds the ability to scroll to offscreen elements. ## Overview The `shelf` element is a horizontal row consisting of one or more elements. The user navigates along the items on a shelf by clicking left or right on the remote, and chooses an element by clicking the Select button on the remote. The generic shelf element structure is displayed first, followed by several standard shelf configurations. Here’s an example showing the basic layout of a `shelf` element. ```xml

//add link to other prodcut on your server here //add link to preview image for other product

``` There are several standard shelf configurations that are used to display related content. ### Also-Watched Shelf The `shelf` element can display information about other products that have been watched by people who have also watched the selected product. The shelf displays the image you associate with the also-watched product, and the title is only displayed when the also-watched product is in focus. Here’s an example of a `shelf` element that contains three other products. ```xml

``` ### Cast-and-Crew Shelf The `shelf` element can display information about the cast and crew associated with the product. Each person is represented by a large circle that contains the individual’s initials. Below the circle is the individual’s name and the name of the character they play. Here’s an example of a `shelf` element that contains three cast members. ```xml

Actor Actor Actor

``` ### Extras Shelf The `shelf` element can display information about additional items included with the product. Common additional items include deleted scenes, extended scenes, and trailers. The listing below shows an example of a `shelf` element that contains a link to the online extras, a brief description of the extras, and a product trailer. The extras shelf typically contains two sections. The first section contains an image of the additional items and a description of the items. Users can click the image to access the additional items. The second section contains a preview image of a trailer for the original product that users can click to view the trailer. Additional trailers require additional sections. ```xml

//add link to preview image for extras Extras Enter text describing the item here Add text that talks about anything special included with this item or special requirements needed

//add link to trailer on your server here //add link to preview image for trailer

``` ### Review-and-Ratings Shelf The `shelf` element can display a list of ratings and reviews of the item it is associated with. Typically, a `lockup` element is displayed, followed by one or more `buttonLockup` elements. Common rating lockups contain information from iTunes or Rotten Tomatoes. ```xml

Average of 2,241 iTunes user ratings and reviews. Tomatometer

Reviews

Fresh

Rotten Brief review here Ravi Patel June, 8 2015

``` ### Subelements of shelf - [header](/documentation/TVML/header) - [section](/documentation/TVML/section) - [text](/documentation/TVML/text) ### Elements that Use shelf - [alertTemplate](/documentation/TVML/alerttemplate) - [descriptiveAlertTemplate](/documentation/TVML/descriptivealerttemplate) - [footer](/documentation/TVML/footer) - [productBundleTemplate](/documentation/TVML/productbundletemplate) - [productTemplate](/documentation/TVML/producttemplate) - [separator](/documentation/TVML/separator) ## Topics ### Valid TVML Styles [margin](/documentation/TVML/margin) Specifies the spacing around an element. [padding](/documentation/TVML/padding) Specifies the padding between the border and contents of an element. [tv-interitem-spacing](/documentation/TVML/tv-interitem-spacing) Specifies the spacing between child elements. ### Valid TVML Attributes [autoHighlight](/documentation/TVML/autohighlight) Specifies that the element should initially be in focus. [binding](/documentation/TVML/binding) Associates information in a data item with an element. [centered](/documentation/TVML/centered) Centers media items in a shelf. [itemID](/documentation/TVML/itemid) Mark elements for reuse during DOM updates. [needsMoreThreshold](/documentation/TVML/needsmorethreshold) Sets the amount of remaining screen lengths before firing the needs more event. [prototype](/documentation/TVML/prototype) Associates a data item type with an element. [rowCount](/documentation/TVML/rowcount) Specifies the number of rows in a shelf. [theme](/documentation/TVML/theme) Sets the color scheme for an element. --- Copyright © 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)