Navigation Rail

Usage

Ruby example

Paste this complete Builder example inside the app surface from the Quickstart. Replace illustrative asset paths with files from your project.

Ruby

navigation_rail [{ label: "Home", icon: :house }, { label: "Search", icon: :search }, { label: "Settings", icon: :gear }], current_index: 0, extended: true

API

Component properties

21 component-specific values, plus shared item and layout properties.

itemsItems configuration for Navigation Rail.property

current_indexCurrent index configuration for Navigation Rail.property

extendedExtended configuration for Navigation Rail.property

alignmentAlignment configuration for Navigation Rail.property

spacingSpacing configuration for Navigation Rail.property

paddingPadding configuration for Navigation Rail.property

item_heightItem height configuration for Navigation Rail.property

widthWidth configuration for Navigation Rail.property

heightHeight configuration for Navigation Rail.property

enabledEnabled configuration for Navigation Rail.property

backgroundBackground configuration for Navigation Rail.property

foregroundForeground configuration for Navigation Rail.property

mutedMuted configuration for Navigation Rail.property

accentAccent configuration for Navigation Rail.property

selected_backgroundSelected background configuration for Navigation Rail.property

border_colorBorder color configuration for Navigation Rail.property

radiusRadius configuration for Navigation Rail.property

font_familyFont family configuration for Navigation Rail.property

font_sizeFont size configuration for Navigation Rail.property

icon_sizeIcon size configuration for Navigation Rail.property

visibleVisible configuration for Navigation Rail.property

Show 13 shared item properties

opacityscalerotationzfill_widthfill_heightpreferred_widthpreferred_heightminimum_widthminimum_heightmaximum_widthmaximum_heightlayout_alignment

Interaction

Events

Subscribe with on widget, :event and keep behavior in Ruby.

↗inputNative event payload

↗changeNative event payload

↗selectNative event payload

↗showNative event payload

↗hideNative event payload

↗focusNative event payload

↗blurNative event payload

↗errorNative event payload