Skip to content

ModalNavigationDrawer

import { ModalNavigationDrawer, FilledButton } from "@material";
export component Example inherits Window {
width: 400px;
height: 300px;
background: transparent;
show_navigation_drawer := FilledButton {
text: @tr("Open Navigation Drawer");
clicked => {
navigation_drawer.show();
}
}
navigation_drawer := ModalNavigationDrawer {
width: 280px;
height: parent.height;
groups: [
{
title: "Main",
items: [
{ icon: @image-url("../icons/share.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.

int (in-out) default: 0

The index of the currently selected navigation group.

int (in-out) default: 0

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

[struct] default: a struct with all default values

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

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

selected(group-index: int, item-index: int)

Section titled “selected(group-index: int, item-index: int)”

Invoked when an item is selected. group-index is the index of the selected group and item-index the selected index in that group.

Emitted on any mouse pointer event similar to TouchArea. Arguments are the group and item index associated with the event, the PointerEvent itself and the mouse position within the NavigationDrawer.


© 2026 SixtyFPS GmbH