Skip to content

Composable navigation

NavModels in Appyx are composable.

As a single NavModel won't be enough for the whole of your whole app, you can use many in a composable way. That is, any navigation target of a NavModel can also host its own NavModel.

Structural element for composing navigation

Nodes are the main structural element in Appyx. They can host NavModels, and they form a tree.

This allows you to make your app's business logic also composable by leveraging Nodes as lifecycled components.

Read more in Structuring your app navigation

Once you've structured your navigation in a composable way, you can add NavModels to Node of this tree and make it dynamic:

  • Some parts in this tree are active while others ore not
  • The active parts define what state the application is in, and what the user sees on the screen
  • We can change what's active by using NavModels on each level of the tree
  • Changes will feel like navigation to the user

See Implicit navigation and Explicit navigation for building complex navigation behaviours with this approach.

How NavModels affect Nodes

NavModel operations will typically result in:

  • Adding or removing child Nodes of a ParentNode
  • Move them on and off the screen
  • Change their states

As an illustration:

Here:

  • Back stack illustrates adding and removing child Nodes
  • Tiles illustrates changing the state of children and removing them from the ParentNode

These are just two examples, you're of course not limited to using them.