Tabs, carousels and breadcrumbs

Switch pages inside a screen, slide through pictures and show where the player is.

These components help players move around inside one screen: switch between pages, slide through pictures, or see where they are.

Tabs

Items: type one tab name per line, for example Play, Shop, Settings.
Selected Tab: which tab is active when the screen opens (0 is the first).
Style: underline, pills, segmented or boxed. Direction can be horizontal or vertical.
Colours for the bar, normal tabs and the active tab, plus corners, padding and gaps.

Locked tabs

A tab can be locked: it shows a padlock and its own colours, and the player can't pick it. Great for a shop section that opens at level 10.

Under Locked Tabs, click the lock next to a tab to lock or unlock it.
Locked Fill, Locked Text, Lock Icon Color and Locked Outline set how locked tabs look.
Lock Icon: the padlock instead of the tab icon, or as a small corner badge. Pick your own Lock Icon, or give each tab its own with the small picture button next to it.
Tab Backgrounds: your own pictures for normal, active and locked tabs.

To unlock tabs from your game, bind Locked Tabs to a text variable in the Data tab, for example lockedTabs = "3,4". When the player reaches level 10, set it to "4" and the third tab opens.

Give each tab its own page

Tabs can show and hide whole groups of elements:

Build the content of the first page, select all of it and click Group Selected in Layers. Do the same for every page.
Select the tabs. Under Tab Panels, pick a group for each tab.

Now only the active tab's group is visible. Click through the tabs in Play mode to check.

A tail pointing at the page

Turn on Show A Tail (section Tail) and the selected tab gets a small pointer that sticks out of the bar towards its page, like a speech bubble.

Side: below the bar (or to the right of vertical tabs), or above (to the left).
Position Along The Tab: 50% is the middle; 0% and 100% are the ends.
Width and Length of the pointer, and its Color (leave it empty to use the selected tab's colour).

The tail follows the selection, in Play mode and in Unity.

Carousel

A carousel shows one slide at a time, like a news banner or a character picker.

Items → My slides: add slides with a picture, a title and a subtitle. Or switch to Data list to make one slide per row of a list.
Motion: Autoplay with an Interval, Loop, the Transition (slide, fade or scale) and Swipe / Drag.
Slides: the gap between slides, how much of the next slide peeks in (Show Neighbours), corners and Image Fit.
Caption, Dots & Arrows: show or hide them and set their colours and sizes.

Panels as slides

A slide doesn't have to be a picture. Each slide can show a whole panel: a background, texts, buttons, anything.

Build the first slide's panel and place it over the carousel. Select all of it and click Group Selected in Layers. Do the same for every slide.
Select the carousel. Under Slide Panels, pick a group for each slide.

The current slide's panel is shown and the others are hidden, whether the player uses the arrows, the dots, a swipe, or autoplay. A slide with a panel can leave its picture empty.

Breadcrumbs

Breadcrumbs show where the player is, such as Home › World 1 › Level 3.

Items: a typed list, a data list, or Screens visited (filled in as the player moves around).
Clickable: clicking a crumb goes back to it.
Separator (›, /, •, →…) and Style (plain text or pills).

React to changes

Each has its own trigger in the Actions tab: When Tab Changes, When Slide Changes and When a Crumb Is Clicked. You can also bind the selected index to a number variable in the Data tab.