# Navigating directories & cross platform support

Your application can navigate the user’s file system by setting and updating a current directory. When a directory is selected using the [File System - Set Current Directory](/deskifier/deskifier-bubble.io-docs/filesystem-element/actions.md#file-system-set-current-directory) action, the contents of that location are read and returned as a list of files and folders to the [List Of Files In Current Directory](/deskifier/deskifier-bubble.io-docs/filesystem-element/states.md#list-of-files-in-current-directory) state.

From there, your application can move through the directory structure using additional navigation actions. For example, you can use [File System - Go Back A Directory](/deskifier/deskifier-bubble.io-docs/filesystem-element/actions.md#file-system-go-back-a-directory) action, which removes the last segment of the current path, or move forward a directory with the [File System - Go To Next Directory](/deskifier/deskifier-bubble.io-docs/filesystem-element/actions.md#file-system-go-to-next-directory) action by appending a folder name to the current path.

These actions allow you to build custom file browsing interfaces, giving users the ability to explore folders, view files, and navigate through their filesystem directly within your application.

***

You may find yourself looking to build custom directory path - this is straight forward with one caveat; The file path separator is different depending on the OS \
\
**macOS / Linux** separates file paths with **`/`**\
While **Windows** separates file paths with **`\`**

You can manually handle this distinction yourself, or just join paths with the [File System Separator](/deskifier/deskifier-bubble.io-docs/filesystem-element/states.md#file-system-separator) state.

<figure><img src="/files/AkTl8UuAdwYtlrG07Tkp" alt=""><figcaption></figcaption></figure>

***

#### How To:

{% hint style="success" %}
View this example in the Bubble editor:\
\
<https://bubble.io/page?id=deskifier-plugin-test&tab=Design&name=directory-nav-example&type=page&elements=bTQlg>
{% endhint %}

While building a full file explorer can get a little complex, we'll focus on some basics to get started with.\
\
First you'll need the [Filesystem Element](/deskifier/deskifier-bubble.io-docs/filesystem-element.md) on your page.

#### Step 1.

Next, let's add some text, and a repeating group that will display our outputs.

<figure><img src="/files/4xj3siGyuM4tSUwdZZp0" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/1zRY7bO26DDWVqqtVmNj" alt=""><figcaption></figcaption></figure>

If we preview our app now, we'll see that the repeating group and current directory are both empty.

<figure><img src="/files/TzomftIEgaZNosYkk9OL" alt=""><figcaption></figcaption></figure>

#### Step 2.

Next we'll add a button we can click to set the initial directory.&#x20;

<figure><img src="/files/t9Z3pzSmxsNxe5PURqRl" alt=""><figcaption></figcaption></figure>

Add a workflow with the [File System - Set Current Directory](/deskifier/deskifier-bubble.io-docs/filesystem-element/actions.md#file-system-set-current-directory) action using the [Desktop Folder Directory](/deskifier/deskifier-bubble.io-docs/filesystem-element/states.md#desktop-folder-directory) state as our directory input.

<figure><img src="/files/E4aAZbdjrwyrpDqPf0eE" alt=""><figcaption></figcaption></figure>

Now when we preview and click the button, we'll see an output.

<figure><img src="/files/Xf5T2qiRpN3qumLt3htX" alt=""><figcaption></figcaption></figure>

#### Step 3.

Now, we have a list of files and directories. Let's add a button so that we can explore the directories further.&#x20;

<figure><img src="/files/rtbn8N1V6tqo6Ujv75kG" alt=""><figcaption></figcaption></figure>

Add a workflow with the [File System - Go To Next Directory](/deskifier/deskifier-bubble.io-docs/filesystem-element/actions.md#file-system-go-to-next-directory) action. We'll use the current cell's file name as the input. This takes our current directory, and appends the file name onto the end, and sets that as our new directory.

<figure><img src="/files/Z7moujPQ0UYlL11iKjx3" alt=""><figcaption></figcaption></figure>

Now when we preview our app, clicking the button should show us the contents of that directory

<figure><img src="/files/reAejNCUPUbmxOxfnGMX" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://deskifier.gitbook.io/deskifier/deskifier-bubble.io-docs/guides-and-examples/navigating-directories-and-cross-platform-support.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.