Component 34 of 60

fn navigation_menu_preview(&self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
    let getting_started = window.use_keyed_state("nav.start", cx, |_, cx| {
        MenuState::new(
            [
                MenuItem::new("introduction", "Introduction")
                    .link()
                    .on_click(|_, _, cx| cx.open_url("https://ui.imajha.com/docs")),
                MenuItem::new("installation", "Installation")
                    .link()
                    .on_click(|_, _, cx| {
                        cx.open_url("https://ui.imajha.com/docs/installation")
                    }),
            ],
            cx,
        )
    });
    let components = window.use_keyed_state("nav.components", cx, |_, cx| {
        MenuState::new(
            [
                MenuItem::new("button", "Button")
                    .link()
                    .on_click(|_, _, cx| {
                        cx.open_url("https://ui.imajha.com/docs/components/button")
                    }),
                MenuItem::new("dialog", "Dialog")
                    .link()
                    .on_click(|_, _, cx| {
                        cx.open_url("https://ui.imajha.com/docs/components/dialog")
                    }),
            ],
            cx,
        )
    });
    navigation_menu("documentation-nav", "Documentation")
        .menu(&getting_started, "Getting started")
        .menu(&components, "Components")
}

Navigation Menu, running in the browser. The second tab shows the preview's own source, which includes its layout and demo state. For the smallest working example, see Usage below. Download the whole showcase for its imports and helpers.

Installation

After the one-time setup, run the command from your app root. The CLI writes the modules and keeps src/ui/mod.rs in step.

gpuicn add navigation-menu

If you prefer to copy the files by hand, declare them yourself:

// src/ui/mod.rs
pub mod theme;
pub mod button;
pub mod menu;
pub mod menubar;
pub mod navigation_menu;

// src/main.rs
mod ui;

Usage

Put this in a view module and return example(state) from its render method.

use crate::ui::menu::*;
use crate::ui::navigation_menu::*;
use gpui_kit::{Entity, IntoElement};

fn example(state: &Entity<MenuState>) -> impl IntoElement {
    navigation_menu("docs", "Documentation").menu(state, "Getting started")
}

API reference

pub fn navigation_menu(id: impl Into<ElementId>, label: impl Into<SharedString>) -> Menubar

Create a named navigation landmark; supply menus of `MenuItem::link` entries with caller-owned navigation handlers.

Installed source, 10 lines

//! Navigation menus composed from Nova menus and link items.
use super::menubar::Menubar;
use gpui_kit::{ElementId, Role, SharedString};
/// Create a named navigation landmark; supply menus of `MenuItem::link` entries with caller-owned navigation handlers.
pub fn navigation_menu(id: impl Into<ElementId>, label: impl Into<SharedString>) -> Menubar {
    let mut menu = Menubar::new(id, label);
    menu.role = Role::Navigation;
    menu
}

Platform notes

Visual reference: shadcn/ui 4.19.0, Neutral Nova. Implementation: crates/ui/registry/navigation_menu/navigation_menu.rs, using GPUI Kit 0.6.4.

Navigation Menu composes the Menubar trigger and popup behavior with link items. The application handles link activation and routing through on_click. Arbitrary rich navigation panels are outside this API.

The Rust source and Usage example define the supported API. Browser DOM/CSS behavior, exact exit animations and cross-platform screen-reader parity are not implied by the native component. See migration qualification for the checks completed on this revision.