Skip to content

Nested navigation

Nested navigation is actually quite simple. You just need to place NavHost (let's call it a child) into any entry of the other NavHost (a parent). You may want to add decoration around your child NavHost or leave it within the same viewport of the parent NavHost.

There may be different reasons for nesting your NavHosts:

  • It may be useful when you need to have several backstacks at once, as in case of BottomNavigation, TabRow, or similar, where each item has it's own inner independent layer of navigation.

  • You want to contain some particular flow of destinations within a single composable function. This flow may also contain some shared static layout elements.

  • You want to share a ViewModel between several destinations that logically and visually may be grouped into a single flow.

Note

There is no depth limit for nesting NavHosts. In fact, each NavHost is completely oblivious to its placement in the hierarchy.