Recipes

Tabs and nested branches

Render the active tab, navigate into a specific child stack, preserve sibling state, and clear private branches after sign-out.

v1.1.0Intermediate

Source: doc/nested_navigation.md ↗

Tabs and nested branches

Render the selected tab

dart

const NavigationActiveOutlet(parentScopeId: NavigationScopeId('shell'))

The parent Scope stores which child is active.

Switch to Profile and retain Catalog

dart

await navigation.activateBranch(const NavigationScopeId('profile-tab'));

Catalog's stack is unchanged. Switching back reveals the same top Entry.

Open Product in the Catalog branch explicitly

dart

navigation.push<void>(
  const ProductDestination('42'),
  mountId: const NavigationMountId('catalog-tab'),
  scopeId: const NavigationScopeId('catalog-tab'),
);

Placement is explicit even if Profile is currently active.

Render a fixed child stack

dart

const NavigationOutlet(scopeId: NavigationScopeId('details-pane'))

Use this for master-detail layouts where several Navigators are visible together.

Clear private tabs after sign-out

dart

await navigation.resetBranch(const NavigationScopeId('account-tab'));
await navigation.activateBranch(const NavigationScopeId('public-tab'));

resetBranch clears the selected Scope and all descendants. Do not call it during normal tab switching.