# Navigation through custom states

You can use custom states to navigate between tab menus for example. It's a perfect use case for simple sub-navigation in your groups.&#x20;

When a tab is clicked, you can set a custom state of 'show' to the parent section or group. This 'show' is simply a text field. A custom state is arbitrary data that you can load into a page or element and use without having to store it in the database.

<figure><img src="https://3323346004-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FW4eajJmOk3q8BX2WzhCG%2Fuploads%2FF0jypbcJIDquhMAGjcb0%2FScreenshot%202022-10-03%20at%2014.31.22.png?alt=media&#x26;token=523fff6e-45c6-43ca-a884-2461e5a4328d" alt=""><figcaption><p>Setting a value to the 'show' state</p></figcaption></figure>

<figure><img src="https://3323346004-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FW4eajJmOk3q8BX2WzhCG%2Fuploads%2FGp40fjpWo03lQuqcULze%2FScreenshot%202022-10-03%20at%2014.41.38.png?alt=media&#x26;token=91295dbd-f4dc-4d7c-9766-54fc9c814ba2" alt=""><figcaption><p>Conditional on the UI element. The element is invisible on page load by default. </p></figcaption></figure>

Here is a simplified diagram of what we're trying to accomplish. Let's say we have 3 tabs: Account, Billing, and Notifications.

Each time we click any of the tabs we set the custom state to the tab we clicked (eg. Account).

Each of the 3 tabs have a group with all the content inside. These are all hidden by default and have a condition that looks at the custom state.

When the custom state corresponds with one of the hidden groups, it shows.

![The navigation through custom states workflow explained](https://lh3.googleusercontent.com/buz-I_Wow8f6kKSTV_QZFX3hY2FHOeWs2qwGr0C6EWYEa_LaoaNCDXs3mkuVA0YpPg5Tdc4nizWg4PBRFvqnDgAzeSF9DE_SfBSdS_Kb_itf6zoj_bqr4qkbpTiJbnXmVuXvFwGFjwM)
