Skip to main content

Navigation Rail

The Navigation Rail widget in LiveCode Create is a versatile navigation component that helps organize your app's layouts and destinations. With support for icons, labels, a floating action button (FAB), and a menu button, it allows users to navigate intuitively through your app. It can be displayed either vertically or horizontally, making it adaptable to various app designs.

This guide will walk you through adding, customizing, and using the Navigation Rail widget in your app.

Adding a Navigation Rail to Your Layout​

  1. Open your project in LiveCode Create.
  2. Drag the Navigation Rail widget from the Tools Palette onto the Canvas Area.
  3. Use the Property Inspector to configure its properties and style.

Image showing the Navigation Rail widget added to a layout

Customizing the Navigation Rail​

Basic Configuration​

  • Menu Button: Toggle the menu button using the Show Menu Icon property.
  • Floating Action Button (FAB): Add a FAB by enabling the Show FAB property.
  • Destinations: Define the destinations with labels, icons, and actions using the Content property.

Customizing FAB (Floating Action Button)​

The FAB can be styled and positioned using the following properties:

  • Show FAB: Enable or disable the FAB.
  • FAB Location: Position the FAB at the top or bottom of the rail.
  • FAB Icon: Set the icon for the FAB.
  • FAB Colors:
    • FAB Color: Set the background color of the FAB.
    • FAB Icon Color: Customize the icon color.
    • Hover Color: Define the hover color of the FAB.
    • Hilite Color: Set the color when the FAB is highlighted.
    • Icon Hover and Hilite Colors: Customize the hover and highlight states for the FAB icon.

Customising the Navigation Rail's FAB

Destinations​

Destinations are the main interactive elements of the Navigation Rail. Each destination can include an icon and an optional label.

Key Properties:​

  • Destination Icons:
    • Icon Color: Set the default color of the icons.
    • Hover and Hilite Colors: Customize the hover and highlight states of the icons.
    • Icon Size: Adjust the size of the destination icons.
  • Destination Labels:
    • Label Visibility: Show or hide the labels.
    • Label Colors: Customize label colors for normal, hover, and hilite states.
  • Indicator:
    • Use Indicator: Enable an indicator to highlight the active destination.
    • Indicator Color: Set the color of the indicator.
  • Alignment and Spacing:
    • Destinations Alignment: Align destinations to the top, center, or bottom.
    • Destinations Offset: Fine-tune the vertical position of the destinations group.

Customising the Navigation Rail's Destinations​

The menu button can be styled and configured:

  • Show Menu Icon: Enable or disable the menu button.
  • Menu Button Radius: Adjust the corner radius of the menu button.

Customising the Navigation Rail's Destinations

Interactivity​

The Navigation Rail widget allows for interactive navigation:

  • Hilited Item: Use the Hilited Item Index or Hilited Item Name properties to track the currently selected item.
  • Allow Deselect: Enable this property to allow users to deselect the currently selected item.

You can handle interactions using the following messages:

  • Mouse Up: Detect clicks on the rail, FAB, or menu button.
  • Hilite Changed: Trigger actions when the highlighted destination changes.

Advanced Features​

The Navigation Rail offers advanced customization options to match your app's style:

  • Corner Radius: Adjust the corner radius for destinations and the FAB using the Destination Corner Radius and FAB Corner Radius properties.
  • Label Visibility: Control when labels are shown for destinations.
  • Custom Content: Use the Content property to dynamically generate destinations.

Conclusion​

The Navigation Rail widget is a powerful and customizable navigation component in LiveCode Create. With its flexibility to include icons, labels, a FAB, and interactive features, it is an excellent choice for organizing your app's navigation. Add the Navigation Rail to your app today and provide users with an intuitive navigation experience!