Skip to main content

modal_navigation_rail

Function modal_navigation_rail 

Source
pub fn modal_navigation_rail() -> ModalNavigationRailBuilder
Expand description

Show an expanded navigation rail above page content for space-constrained navigation.

§Usage

Open primary and secondary destinations from a menu without moving the page layout.

§Parameters

  • is_open — whether the modal rail is visible; defaults to false.
  • on_close_request — dismissal callback for the scrim and Escape key.
  • accessibility_label — accessible name for the modal navigation dialog.
  • main_content — page content displayed behind the rail.
  • header — optional menu or action displayed above destinations.
  • content — expanded destination items; close the rail in their activation callbacks.

§Examples

use tessera_components::{
    button::button,
    navigation_rail::{modal_navigation_rail, navigation_rail_item},
    text::text,
    theme::material_theme,
};
use tessera_ui::{remember, tessera};

#[tessera]
fn navigation() {
    let open = remember(|| false);
    let selected = remember(|| 0usize);
    material_theme().child(move || {
        modal_navigation_rail()
            .is_open(open.get())
            .accessibility_label("Mail navigation")
            .on_close_request(move || open.set(false))
            .main_content(move || {
                button().on_click(move || open.set(true)).child(|| {
                    text("Open navigation");
                });
            })
            .content(move |rail| {
                navigation_rail_item(rail)
                    .label("Inbox")
                    .selected(selected.get() == 0)
                    .on_click(move || {
                        selected.set(0);
                        open.set(false);
                    });
            });
    });
}