NavigationDrawer

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

slint

A NavigationDrawer is a side panel that contains navigation items organized in groups, typically used for app navigation.

Properties

current_group

int (in-out) default: 0

The index of the currently selected navigation group.

current_item

int (in-out) default: 0

The index of the currently selected navigation item within the current group.

groups

[NavigationGroup] default: <???>

An array of navigation groups, each containing a title and navigation items.

Functions

select(group_index: int, item_index: int)

Selects the navigation item at the specified group and item indices.

NavigationDrawer {
    clicked() => {
        self.select(0, 1);
    }
}

slint