NavigationRail

import { NavigationRail } from "material.slint";
export component Example inherits Window {
    width: 400px;
    height: 300px;
    background: transparent;
    NavigationRail {
        width: 80px;
        height: parent.height;
        items: [
            { icon: @image-url("icons/home.svg"), text: "Home" },
            { icon: @image-url("icons/search.svg"), text: "Search" }
        ];
    }
}

slint

A NavigationRail is a vertical navigation component that displays navigation items with optional menu button and floating action button.

Properties

alignment

LayoutAlignment default: <???>

The alignment of the navigation items within the rail.

current_item

int (in-out) default: 0

The index of the currently selected navigation item.

fab_icon

image default: the empty image

The icon for the floating action button.

has_menu

bool default: false

Whether to show a menu button at the top of the rail.

items

[NavigationItem] default: <???>

An array of navigation items to display in the rail.

Callbacks

menu_clicked()

Invoked when the menu button is clicked.

NavigationRail {
    menu_clicked() => {
        debug("Menu clicked");
    }
}

slint

fab_clicked()

Invoked when the floating action button is clicked.

NavigationRail {
    fab_clicked() => {
        debug("FAB clicked");
    }
}

slint