Page Layouts

When you parent a UIPageLayout to a UI container, every sibling GuiObject becomes a unique page that you can transition to through scripting. This layout is useful when you want to create user interfaces such as tabbed modals, tutorials, or character customization screens.

After you create multiple pages within the UIPageLayout, you need to use scripting to transition from page to page. For example, the following code, pasted into a client‑side sibling Script of the layout, transitions forward and then backward between the pages every two seconds.

local frame = script.Parent

local pageLayout = frame:FindFirstChildWhichIsA("UIPageLayout")

task.wait(2)
pageLayout:Next()

task.wait(2)
pageLayout:Next()

task.wait(2)
pageLayout:Previous()

task.wait(2)
pageLayout:Previous()

If you want to view pages while editing in Studio, you can use the Command Bar to navigate from one page to another, letting you review where you need to make changes without having to play your experience each time.

1. In the Explorer window hierarchy, select the UIPageLayout object.

   

2. From the View tab, open the Command Bar.

   

3. Input any of the following commands and press Enter.

   Action	Command
   Next Page	game:GetService("Selection"):Get()[1]:Next()
   Previous Page	game:GetService("Selection"):Get()[1]:Previous()
   First Page	game:GetService("Selection"):Get()[1]:JumpToIndex(0)