Panel

Panel is a Group node subclass used to create sliding panels for app UI, similar to those in the Roku OS home screen

import { Panel } from "@roku-sdk/components";

Panel(props: IPanelProps): JSX.Element

Description

Panel is a Group node subclass used to create sliding panels for app UI, similar to those in the Roku OS home screen.

Panels provide a standardized way to create multi-level navigation screens where users can drill down through content. When used within a PanelSet, panels automatically handle sliding animations and focus management.

The Panel component supports various size presets through the panelSize prop, or custom dimensions through width and height props. Navigation behavior can be customized through props like hasNextPanel, leftOnly, and goBackCount.

Parameters

Example

Basic panel usage:

<panel panelSize="medium">
  <label text="Hello Panel" translation={[50, 50]} />
</panel>

Panel with navigation control:

<panel
  panelSize="wide"
  leftOnly={true}
  hasNextPanel={true}
  onIsOffscreenLeft={(isOffscreen) => {
    console.log("Panel offscreen:", isOffscreen);
  }}
>
  <markupList id="menuList" />
</panel>

Full screen panel:

<panel isFullScreen={true} hasNextPanel={false}>
  {/* Full screen content */}
</panel>