Components / navigation

BottomNavigation builder

Equal-width destination actions for compact pages. No safe-area padding is added here: PageLayout consumes system insets once for all its slots. Without a handler destinations are disabled rather than falsely operable.

A builder is RenderOnce. Construct and mount it in one expression.

The verified bottom-navigation scene in studio-dark

Open bottom-navigation in studio-dark

studio-light

use gpui_kit::navigation::BottomNavigation;

Reviewed in bottom-navigation.

Also drawn by adaptive-navigation, which arranges components rather than reviewing them.

Construct

new(ident: impl Into<Ident>) -> Self

Options

Chain onto the value.

items(items: impl IntoIterator<Item = NavigationItem>) -> Self
selected(id: impl Into<SharedString>) -> Self
on_select(handler: impl Fn(SharedString, &mut Window, &mut App) + 'static) -> Self

Example · bottom-navigation

fn bottom_navigation(_window: &mut Window, cx: &mut App) -> AnyElement {
    use crate::navigation::{BottomNavigation, NavigationItem};
    let theme = cx.theme().clone();
    stack(&theme)
        .w(px(390.0))
        .child(caption(
            &theme,
            "Fixture destinations; selected, enabled and disabled actions",
        ))
        .child(
            BottomNavigation::new("scene.bottom-navigation.ready")
                .items([
                    NavigationItem::new("library", "Library"),
                    NavigationItem::new("search", "Search"),
                    NavigationItem::new("settings", "Settings").disabled(true),
                ])
                .selected("search")
                .on_select(|_, _, _| {}),
        )
        .child(caption(
            &theme,
            "No host handler: destinations are unavailable",
        ))
        .child(
            BottomNavigation::new("scene.bottom-navigation.unavailable")
                .items([
                    NavigationItem::new("library", "Library"),
                    NavigationItem::new("search", "Search"),
                ])
                .selected("library"),
        )
        .into_any_element()
}

Source: crates/gpui-kit/src/navigation/bottom_navigation.rs