> For the complete documentation index, see [llms.txt](https://docs.openbuild.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.openbuild.io/working-with-the-framework/navigation/navigation-through-custom-states.md).

# Navigation through custom states

Perfect for sub-navigating tabs or menus on your page

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&amp;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&amp;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)
