Skip to content

NavigationRail

NavigationRail is a set of destinations along the side of a screen. Set Orientation = "Horizontal" and it becomes a bar along the bottom. A pill slides and stretches to the chosen destination.

Usage

Call Components.NavigationRail with a scope and a table of properties:

C.NavigationRail(scope, {
    Items = {
        { Id = "home", Icon = "home", Label = "Home" },
        { Id = "library", Icon = "library", Label = "Library" },
    },
    Leading = C.IconButton(scope, { Name = "menu", OnClick = openDrawer }), -- (1)!
    OnChanged = function(id)
        print("Go to", id)
    end,
})
  1. Leading is only used by a vertical rail. In a Window the rail is full height, so the leading control is at the top.

Properties

Name Type Required Default Description
Leading Instance ❌ - Vertical rails only. A control above the items, such as a menu button.
Theme ThemeRef ❌ The contextual theme Theme to use for this component instead of the one from Theme.Provide.
LayoutOrder UsedAs<number> ❌ 0 Position in a parent UIListLayout or UIGridLayout.
Size UsedAs<UDim2> ❌ - Size of the component.
Layer Instance ❌ The layer from Layer.Provide or Layer.bind Overlay layer that floating content is mounted in. See Overlay layers.
Items { { Id: string, Icon: string?, Label: string?, OnClick: (() -> ())? } } ✅ - The destinations. Each has an Id, and can have an Icon, a Label and an OnClick. A vertical rail shows icons only, with a tooltip.
Selected UsedAs<string> ❌ The first item Id of the selected destination. A plain value is only the starting destination. A Value is followed, and is set when the user picks one.
Orientation "Vertical" \| "Horizontal" ❌ "Vertical" "Vertical" for a rail at the side, "Horizontal" for a bar along the bottom.
Shadow boolean ❌ true Set false to remove the shadow.
Id string ❌ - Key that identifies this component when state is kept across rebuilds. See Persist.

Callbacks

Name Description
OnChanged: (string) -> () Runs with the Id of the destination the user picked.

See also