Build a Scrollable Button Menu in Banter

UIScrollView is Banter's scrollable UI container. Because every UI element inherits hierarchy methods, buttons can be appended directly to the scroll view.

Scrollable Menu Workflow

Create the world-space panel and status label, configure a scroll view, then append each action button to it.

Add BanterUIPanel to a positioned GameObject.
Create a UIScrollView with fixed dimensions and scroll overflow.
Append buttons and connect their OnClick() handlers.

Create the Menu Panel

const panelObject = new BS.GameObject({
  name: "ScrollableMenu",
  localPosition: new BS.Vector3(0, 1.7, 3)
});

const panel = panelObject.AddComponent(
  new BS.BanterUIPanel({
    resolution: new BS.Vector2(800, 600),
    screenSpace: false,
    enableHaptics: true,
    clickHaptic: new BS.Vector2(0.1, 0.05),
    enterHaptic: new BS.Vector2(0.05, 0.02),
    exitHaptic: new BS.Vector2(0.05, 0.02),
    enableSounds: false
  })
);

Add a Status Label

const status = new BS.UILabel();
status.SetProperty(
  BS.PN.text,
  "Select an action"
);
status.style.fontSize = "24px";
status.style.color = "#FFFFFF";
panel.root.AppendChild(status);

Create the Scroll View

const scrollView = new BS.UIScrollView();
scrollView.style.width = "300px";
scrollView.style.height = "200px";
scrollView.style.overflow = "scroll";
panel.root.AppendChild(scrollView);

The official example uses width, height, and overflow: "scroll" to define the scrollable area.

Add a Menu Button

const firstButton = new BS.UIButton();
firstButton.SetProperty(
  BS.PN.text,
  "Open Gallery"
);
firstButton.style.width = "260px";
firstButton.style.height = "50px";

firstButton.OnClick(() => {
  status.SetProperty(
    BS.PN.text,
    "Selected: Open Gallery"
  );
});

scrollView.AppendChild(firstButton);

Append the button to scrollView, not directly to panel.root, when it belongs inside the scrollable content.

Generate Several Buttons

const actions = [
  "Open Gallery",
  "Open Theatre",
  "Open Studio",
  "Open Lobby",
  "Open Help"
];

for (const action of actions) {
  const button = new BS.UIButton();
  button.SetProperty(BS.PN.text, action);
  button.style.width = "260px";
  button.style.height = "50px";

  button.OnClick(() => {
    status.SetProperty(
      BS.PN.text,
      `Selected: ${action}`
    );
  });

  scrollView.AppendChild(button);
}

Replace the status update with the intended scene action when each menu option is connected.

Remove a Button

All UI elements inherit RemoveChild():

scrollView.RemoveChild(firstButton);

The same base API also includes InsertBefore() for placing a child before an existing reference child.

Common Questions

Why do my Banter menu buttons appear outside the scroll area?

Append each button to the UIScrollView. Buttons appended directly to panel.root are siblings of the scroll view instead.

Why does my Banter menu not scroll?

Give the scroll view fixed width and height values and set its documented overflow style to scroll.