Luna UI Documentation

TabView is a VisualElement that renders an interactive button-driven tab strip with optional gamepad InputPrompts for prev/next navigation. Built as an alternative to Unity's built-in TabView, whose tab labels are non-interactable.

Tab View Horizontal Tab View Vertical Tab View in Settings

Why a custom TabView?

Unity's built-in TabView uses non-interactable VisualElements for the tab labels, so they can't be focused or clicked predictably. Luna's variant uses real buttons and adds gamepad prev/next InputPrompts that auto-hide on keyboard/mouse.

Setup

UXML — a TabView plus child Tab elements:

html

<luna:TabView Horizontal="true" ButtonColor="slate" ButtonColorSelected="primary" ActiveTab="0">
    <unity:Tab label="Home">...</unity:Tab>
    <unity:Tab label="Settings">...</unity:Tab>
    <unity:Tab label="Credits">...</unity:Tab>
</luna:TabView>

For a fully customisable tab button (icons, layouts), use the Custom Tab variant — it accepts a VisualTreeAsset for the tab-button content.

Tab View Layout Tab View Usage 1 Tab View Usage 2 Tab View Usage 3 Tab View Usage 4

Inspector (UxmlAttributes)

Attribute	Type	Description
`Horizontal`	bool	Horizontal layout if true, vertical otherwise.
`ButtonColor`	string	Color class applied to inactive tab buttons (e.g. `"slate"`).
`ButtonColorSelected`	string	Color class applied to the active tab button.
`ActiveTab`	int	Index of the active tab (drives `OnTabSelected` when changed).
`ShowInputPrompts`	bool	Show the prev/next gamepad prompts (default `true`).
`InputActionPrev`	string	Input action for "previous tab" (default `"UI/Previous"`).
`InputActionNext`	string	Input action for "next tab" (default `"UI/Next"`).
`HideInputPromptsIf`	List<InputIconControlScheme>	Schemes that should hide the prompts (default: KeyboardMouse).

API

Properties

Property	Type	Description
`HeaderContainer`	`VisualElement`	The full header (prompts + tab buttons).
`HeaderTabContainer`	`VisualElement`	Just the tab-button strip (no prompts).

Events

csharp

public event Action<int> OnTabSelected;

Fires when ActiveTab changes — int parameter is the new index.

CSS classes

Class	Targets
`TabView`	Root.
`TabView__header-container`	Header (prompts + tabs).
`TabView__header-tab-container`	Tab-button strip.
`TabView__header-tab`	Each tab button.
`TabView__header-tab-selected`	Active tab button.
`TabView__header-tab-input-prompt`	Prev/next `InputPrompt`s.

Custom Tab Component

The built-in Tab button is the easiest path but can't be customised. The Custom Tab variant accepts a VisualTreeAsset and renders any layout (icon + label, badges, etc.) inside the tab button.

Custom Tab Custom Tab 2

Tab View