Playground GitHub npm
← Menubar Combobox →

Navigation Menu

Horizontal navigation strip with an active highlight; you drive routing.

ui navigation

Preview

Installation

npx slintcn@latest add navigation-menu

Usage

import { NavigationMenu, NavigationItem } from "slintcn/components/navigation-menu.slint";

NavigationMenu {
    items: [{ label: "Overview" }, { label: "Customers" }, { label: "Products" }];
    active <=> page;
    navigate(i) => { /* … */ }
}

Properties

items in [NavigationItem]

Items shown in the nav strip (left-to-right).

active in-out int

Index of the highlighted item; bound two-way so consumers drive routing.

navigate callback (int)

Fired when an item is clicked; `active` is updated first.

API

Accessibility
focusableyes
keyboardArrow keysEnter

Dependencies

theme only

Installed automatically as transitive dependencies of slintcn add navigation-menu.

← Menubar Combobox →