Navigation Menu

A set of links with expandable panels for site navigation.

EXAMPLEwasm · webgpu

This demo runs the real GPUI component on WebGPU, which this browser does not expose.

Try Chrome or Edge 113+, or Safari 26+. In Firefox, enable dom.webgpu.enabled.

You can also run it natively: cargo run -p showcase navigation-menu

The demo failed to start in this browser.

You can run it natively instead: cargo run -p showcase navigation-menu

Live examples are not supported on most mobile browsers yet — open this page on a desktop or tablet to run the demo.

Recent phones with WebGPU may manage it (downloads ~18 MB):

#Anatomy

Import the component's parts and compose them under its root:

use base_gpui::navigation_menu::{
    NavigationMenuArrow,
    NavigationMenuBackdrop,
    NavigationMenuContent,
    NavigationMenuIcon,
    NavigationMenuItem,
    NavigationMenuLink,
    NavigationMenuList,
    NavigationMenuPopup,
    NavigationMenuPortal,
    NavigationMenuPositioner,
    NavigationMenuRoot,
    NavigationMenuTrigger,
    NavigationMenuViewport,
};

NavigationMenuRoot::new()
    .child(
        NavigationMenuList::new()
                .child(
                    NavigationMenuItem::new()
                                .child(
                                    NavigationMenuContent::new(),
                                )
                                .child(
                                    NavigationMenuTrigger::new()
                                                    .child(
                                                        NavigationMenuIcon::new(),
                                                    ),
                                ),
                )
                .child(
                    NavigationMenuLink::new(),
                ),
    )
    .child(
        NavigationMenuPortal::new()
                .child(
                    NavigationMenuBackdrop::new(),
                )
                .child(
                    NavigationMenuPositioner::new()
                                .child(
                                    NavigationMenuArrow::new(),
                                )
                                .child(
                                    NavigationMenuPopup::new()
                                                    .child(
                                                        NavigationMenuViewport::new(),
                                                    ),
                                ),
                ),
    );
The anatomy is a structural overview. Parts with mutually exclusive modes may need separate instances; each part's section below documents its configuration.

Coordinates the component's state and supplies context to its child parts.

Source

use base_gpui::navigation_menu::NavigationMenuRoot;

NavigationMenuRoot::new()
    .id("example-id")
    .default_value(None)
    .value(None)
    .delay(/* delay: Duration */)
    .close_delay(/* close_delay: Duration */)
    .orientation(/* orientation: NavigationMenuOrientation */)
    .nested(true)
    .aria_label("aria label")
    .on_value_change(|/* callback arguments */| { /* handle change */ })
    .on_open_change_complete(|/* callback arguments */| { /* handle change */ })
    .style_with_state(|/* callback arguments */| { /* handle change */ });
BuilderSignature & description

Interactive control that opens, closes, or activates the component.

Source

use base_gpui::navigation_menu::NavigationMenuTrigger;

NavigationMenuTrigger::new()
    .disabled(true)
    .is_disabled()
    .aria_label("aria label")
    .style_with_state(|/* callback arguments */| { /* handle change */ })
    .wired(/* value: T */, /* focus_handle: FocusHandle */, 0, 0);
BuilderSignature & description

Hosts overlay content outside the normal child layout.

Source

use base_gpui::navigation_menu::NavigationMenuPortal;

NavigationMenuPortal::new()
    .keep_mounted(true)
    .style_with_state(|/* callback arguments */| { /* handle change */ });
BuilderSignature & description

Measures the anchor and positions floating content.

Source

use base_gpui::navigation_menu::NavigationMenuPositioner;

NavigationMenuPositioner::new()
    .side("example-id")
    .align(/* align: NavigationMenuAlign */)
    .side_offset("example-id")
    .align_offset(/* align_offset: Pixels */)
    .collision_padding(/* collision_padding: Pixels */)
    .arrow_padding(/* arrow_padding: Pixels */)
    .keep_mounted(true)
    .style_with_state(|/* callback arguments */| { /* handle change */ });
BuilderSignature & description

Contains the floating interactive content.

Source

use base_gpui::navigation_menu::NavigationMenuPopup;

NavigationMenuPopup::new()
    .side("example-id")
    .align(/* align: NavigationMenuAlign */)
    .aria_label("aria label")
    .keep_mounted(true)
    .style_with_state(|/* callback arguments */| { /* handle change */ });
BuilderSignature & description

Optional arrow that visually points toward the overlay anchor.

Source

use base_gpui::navigation_menu::NavigationMenuArrow;

NavigationMenuArrow::new()
    .side("example-id")
    .align(/* align: NavigationMenuAlign */)
    .style_with_state(|/* callback arguments */| { /* handle change */ });
BuilderSignature & description

Covers content behind a modal overlay and handles outside interaction.

Source

use base_gpui::navigation_menu::NavigationMenuBackdrop;

NavigationMenuBackdrop::new()
    .keep_mounted(true)
    .style_with_state(|/* callback arguments */| { /* handle change */ });
BuilderSignature & description

Contains the component's user-provided content.

Source

use base_gpui::navigation_menu::NavigationMenuContent;

NavigationMenuContent::new()
    .keep_mounted(true)
    .style_with_state(|/* callback arguments */| { /* handle change */ })
    .wired(/* value: T */)
    .content_value();
BuilderSignature & description

Optional visual icon for the component.

Source

use base_gpui::navigation_menu::NavigationMenuIcon;

NavigationMenuIcon::new()
    .with_value(/* value: T */)
    .style_with_state(|/* callback arguments */| { /* handle change */ });
BuilderSignature & description

Represents one interactive item in the component's collection.

Source

use base_gpui::navigation_menu::NavigationMenuItem;

NavigationMenuItem::new()
    .value(/* value: T */)
    .style_with_state(|/* callback arguments */| { /* handle change */ });
BuilderSignature & description

Public renderable part of the Navigation Menu Link component.

Source

use base_gpui::navigation_menu::NavigationMenuLink;

NavigationMenuLink::new()
    .active(true)
    .close_on_click(true)
    .aria_label("aria label")
    .on_activate(|/* callback arguments */| { /* handle change */ })
    .style_with_state(|/* callback arguments */| { /* handle change */ });
BuilderSignature & description

Contains and coordinates the component's collection items.

Source

use base_gpui::navigation_menu::NavigationMenuList;

NavigationMenuList::new()
    .style_with_state(|/* callback arguments */| { /* handle change */ });
BuilderSignature & description

Defines the viewport used to lay out or constrain overlay content.

Source

use base_gpui::navigation_menu::NavigationMenuViewport;

NavigationMenuViewport::new()
    .with_contents(/* contents: Vec<NavigationMenuContent<T>> */)
    .style_with_state(|/* callback arguments */| { /* handle change */ });
BuilderSignature & description

#Accessibility

Keyboard interaction and accessibility semantics are implemented by the component, independently of visual styling. Known limitations caused by missing GPUI accessibility primitives are documented in the module source and are not silently approximated.

#Stability

Base GPUI is pre-1.0. Builder names and state types may evolve as GPUI and this port mature.