SlateUI
DocsComponentsGitHub
Install SlateUI Plugin
SlateUI
DocsComponentsGitHub
Install SlateUI Plugin

Components

  • installation
  • button
  • inputs
  • notification
  • progressbar
  • loading
  • proximity
  • router
Component

RouterService

A multi-group view navigation system. Register named frames as views inside independent groups, then navigate between them with animated transitions — forward, back, or toggling.

Overview

RouterService manages any number of independent navigation groups (e.g., MainMenu, HUD, Settings). Each group tracks its current view and transitions between frames using positional tweens plus optional CanvasGroup fade. Pressing navigate on the currently-open view closes it (toggle behavior).

Quick start — two views in one group

luau
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
local RouterService = require(game.ReplicatedStorage.SlateUI.RouterService)
 
-- Register views
RouterService.RegisterView("MainMenu", "Home", script.Parent.HomeFrame)
RouterService.RegisterView("MainMenu", "Settings", script.Parent.SettingsFrame)
 
-- Navigate to Home on startup
RouterService.Navigate("MainMenu", "Home")
 
-- Wire buttons
script.Parent.SettingsButton.MouseButton1Click:Connect(function()
RouterService.Navigate("MainMenu", "Settings")
end)
script.Parent.BackButton.MouseButton1Click:Connect(function()
RouterService.Navigate("MainMenu", "Home")
end)

Transition Directions

Each view can have its own enter/exit direction. The default is 'up' — the frame slides in from below and exits upward. Pass a direction in the opts table when registering.

Per-view directions

luau
1
2
3
4
5
6
7
8
9
10
RouterService.RegisterView("MainMenu", "Home", homeFrame, {
direction = "right", -- "left" | "right" | "up" | "down"
tweenTime = 0.35,
easing = Enum.EasingStyle.Sine,
startVisible = true, -- start open instead of hidden
})
 
RouterService.RegisterView("MainMenu", "Profile", profileFrame, {
direction = "left",
})

Open and Close Callbacks

Register onOpen and onClose callbacks per view. These fire synchronously before the tween plays, so you can pre-populate content before a frame is visible.

View lifecycle callbacks

luau
1
2
3
4
5
6
7
8
RouterService.RegisterView("MainMenu", "Store", storeFrame, {
onOpen = function(frame)
print("Store opened — fetch inventory here")
end,
onClose = function(frame)
print("Store closed")
end,
})

Auto Close Button

If a view's frame contains a child named CloseButton (TextButton), RouterService automatically connects MouseButton1Click to close the current view — no manual wiring needed.

Advanced — Navigate Callbacks and Multiple Groups

RouterService.Navigate() accepts an opts table with onBefore and onAfter callbacks. onBefore fires with the old and new view names before any tween starts. onAfter fires after the new view opens.

Navigate with callbacks + multiple groups

luau
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
-- Two completely independent navigation stacks
RouterService.RegisterView("HUD", "Main", hudMain)
RouterService.RegisterView("HUD", "Map", hudMap)
RouterService.RegisterView("Settings", "Audio", settingsAudio)
RouterService.RegisterView("Settings", "Video", settingsVideo)
 
-- Navigate with lifecycle hooks
RouterService.Navigate("Settings", "Audio", {
onBefore = function(from, to)
print("Leaving", from, "→ going to", to)
end,
onAfter = function(view, opened)
print(view, opened and "opened" or "toggled closed")
end,
})

API

PropTypeDefaultDescription
RegisterView(group: string, name: string, frame: Frame, opts?: table)—Adds a frame to a named group. Creates the group automatically if it doesn't exist.
Navigate(group: string, name: string, opts?: table)—Opens the named view and closes the previously open one. Toggling the current view closes it.
GetCurrent(group: string) -> string?—Returns the name of the currently open view in the group, or nil.
GetViews(group: string) -> {string}—Returns a list of all registered view names in the group.
opts.direction"left" | "right" | "up" | "down""up"Slide direction for enter/exit animation.
opts.tweenTimenumber0.4Duration of the slide tween in seconds.
opts.startVisiblebooleanfalseIf true, the view starts in its natural position rather than offscreen.
opts.onOpen(frame: Frame) -> ()?nilFires when this view begins opening.
opts.onClose(frame: Frame) -> ()?nilFires when this view begins closing.