Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/pompom454/tea/llms.txt

Use this file to discover all available pages before exploring further.

The UIBar API gives you programmatic control over the UI bar—the collapsible sidebar that Tea renders by default on the left side of every story. It contains the story title, navigation history buttons, and the main menu. You may want to hide or stow it on specific passages (e.g., title screens, cutscenes, or puzzle passages where the sidebar would be distracting), or remove it entirely when using a custom StoryInterface.
Most UIBar methods return a reference to the UIBar object itself, allowing you to chain multiple calls together.

​
UIBar.destroy()

Completely removes the UI bar from the page, including all of its associated styles and event handlers. This operation cannot be undone. 
UIBar.destroy()
​
returns
void
This method does not return a value.
UIBar.destroy() is permanent. If you need to temporarily remove the UI bar, use UIBar.hide() or UIBar.stow() instead. Consider using the StoryInterface special passage if you want a fully custom layout from the start.
UIBar.destroy();

​
UIBar.hide()

Hides the UI bar element. Returns the UIBar object for chaining. 
UIBar.hide()
​
returns
UIBar
The UIBar object, for method chaining.
Hiding the UI bar does not reclaim the horizontal space reserved for it. If you also want to reclaim that space, chain a call to UIBar.stow(). Alternatively, if you want the UI bar gone permanently, use UIBar.destroy().
UIBar.hide();

​
UIBar.isHidden()

Returns whether the UI bar is currently hidden. 
UIBar.isHidden()
​
returns
boolean
true if the UI bar is hidden, false otherwise.
if (UIBar.isHidden()) {
  /* code to execute if the UI bar is hidden… */
}

if (!UIBar.isHidden()) {
  /* code to execute if the UI bar is not hidden… */
}

​
UIBar.isStowed()

Returns whether the UI bar is currently stowed. 
UIBar.isStowed()
​
returns
boolean
true if the UI bar is stowed, false otherwise.
if (UIBar.isStowed()) {
  /* code to execute if the UI bar is stowed… */
}

if (!UIBar.isStowed()) {
  /* code to execute if the UI bar is not stowed… */
}

​
UIBar.show()

Shows the UI bar. Returns the UIBar object for chaining. 
UIBar.show()
​
returns
UIBar
The UIBar object, for method chaining.
UIBar.show();

​
UIBar.stow()

Stows the UI bar so that it takes up minimal space (collapsed to the edge of the viewport). Returns the UIBar object for chaining. 
UIBar.stow([noAnimation])
​
noAnimation
boolean
When true, skips the default collapse animation and stows the bar instantly.
​
returns
UIBar
The UIBar object, for method chaining.
UIBar.stow();

​
UIBar.unstow()

Unstows the UI bar, expanding it back to its full size so it is fully accessible again. Returns the UIBar object for chaining. 
UIBar.unstow([noAnimation])
​
noAnimation
boolean
When true, skips the default expand animation and unstows the bar instantly.
​
returns
UIBar
The UIBar object, for method chaining.
UIBar.unstow();

​
Chaining example

Because hide(), show(), stow(), and unstow() all return the UIBar object, you can chain calls to perform multiple operations at once. 
// Stow the UI bar immediately on the title screen, no animation.
UIBar.stow(true).hide();

// Later, when entering gameplay, restore it.
UIBar.unstow().show();
MethodVisual resultRecoverableReclaims space
UIBar.hide()Bar invisibleYesNo
UIBar.stow()Bar collapsed to edgeYesYes
UIBar.destroy()Bar removed from DOMNoYes
Use hide() when you want the bar invisible but still occupying its layout space. Use stow() when you want the bar collapsed but togglable by the player. Use destroy() when building a fully custom interface that has no use for the default sidebar.

Build docs developers (and LLMs) love

Get started for freeTalk to us