Guide / Navigation and overlays

Keep routes and temporary UI under explicit ownership.

A Navigator retains application history. An OverlayController owns dialogs, drawers, popovers and toasts above that content.

Mount the scopes once.

Construct controllers at an application boundary and pass them into their matching hosts. The overlay host wraps ordinary content so temporary entries remain scoped to that area.

ApplicationFlow.cs
private readonly Navigator _navigator = new(new DashboardPage());
private readonly OverlayController _overlay = new();

new BackNavigation(
  new OverlayHost(new NavigatorHost(_navigator), _overlay),
  _navigator, _overlay);

Use keys where route identity matters.

Push retains the previous route and its local state. Replace is the right choice when history is no longer useful.

ApplicationFlow.cs
_navigator.Push(new Route(
  new WidgetKey($"project:{project.Id}"),
  new ProjectDetails(project),
  RouteTransition.Fade(TimeSpan.FromMilliseconds(180))));

Escape closes the topmost scope first.

BackNavigation resolves input in order: the top overlay, the active route, then nothing at the root. This prevents a required dialog from leaking Escape to the route underneath it.

Keep history bounded.

Inactive routes remain mounted to preserve local state. Use Replace, PopToRoot or ClearAndPush for flows that do not need a full back stack.

Return to the guides