# Navigation Buttons

## Getting Started

Go to Settings within a "Work in Progress" Sphere and in section "Navigation" enable "Navigation Buttons".

<figure><img src="https://955540963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgWSBgBDll5yYEIDkdXon%2Fuploads%2FhzOPNVzbbUVIQSDOZuPz%2FCopy%20of%20v.18%20Release%20SPHERE%20LOADER.png?alt=media&#x26;token=2cbe125f-8248-4a55-9e30-a52eb07ab41e" alt=""><figcaption></figcaption></figure>

<figure><img src="https://955540963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgWSBgBDll5yYEIDkdXon%2Fuploads%2FmgAxOFYy5BlSprBd9Pqu%2Fimage.png?alt=media&#x26;token=135ceb9b-dbb4-4e82-b97d-aed863b1762b" alt=""><figcaption></figcaption></figure>

Choose the amount of control buttons you want and the alignment of where they will display on your sphere

{% hint style="info" %}
You can have up to **5** control buttons
{% endhint %}

<figure><img src="https://955540963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgWSBgBDll5yYEIDkdXon%2Fuploads%2FXlwfP4fXCo4nl7LRx6RI%2FScreenshot%202024-07-05%20at%2009.02.54.png?alt=media&#x26;token=45ea74fa-6bd3-464e-bbec-049300ba4654" alt=""><figcaption></figcaption></figure>

## Navigation Elements

There is an option of three navigation elements: control button, menu, and product search

### Control Button&#x20;

These are customizable buttons that can take users to different objects or external URLS. Choose a title and customise the text for the control button and add an image to represent your button.

<figure><img src="https://955540963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgWSBgBDll5yYEIDkdXon%2Fuploads%2FZxWqiJsftSNW1jH621H0%2FScreenshot%202024-07-05%20at%2009.11.01.png?alt=media&#x26;token=b9dd9464-e8a3-4d66-82d5-27271785e39c" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Images must already be uploaded onto your Space in Assets. To see how to do this, visit our article on Assets [*here*](https://learn.cozmos.com/cozmos-space/space-core-areas#assets)
{% endhint %}

#### Navigation Behaviour

This is where you set the behaviour of the control button.

* &#x20; **External:** takes user to a defined URL outside of the sphere. You can choose to have this open in a new tab

<figure><img src="https://955540963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgWSBgBDll5yYEIDkdXon%2Fuploads%2FpIPxQ1p2mYJS8Z4h0tQe%2FNav_external%20CB.png?alt=media&#x26;token=4d98f1cf-60dd-49ea-b315-dd7a6ef7a06f" alt=""><figcaption></figcaption></figure>

* **Internal:** choose to navigate to an object in a published sphere within your space

{% hint style="info" %}
Sphere must be published for you to link it to navigation.
{% endhint %}

This will give you a list of all published spheres in your space to choose from

Choose the sphere you wish to navigate to. You can navigate to an object within the sphere you are currently editing, or navigate to a whole other sphere within your space.&#x20;

<figure><img src="https://955540963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgWSBgBDll5yYEIDkdXon%2Fuploads%2F0apPz9cM4cFo4GcrEdKW%2Fnav_internal_sphere%20link%202.png?alt=media&#x26;token=bf2b197d-df4f-4aa0-9634-0ed9779abe5e" alt=""><figcaption></figcaption></figure>

You can Link and finish, if no further actions are required.&#x20;

To navigate to a specific object, click next

This will give you object destinations (objects refer to the items in that sphere, which can range from clusters, image, videos etc)

&#x20;

<figure><img src="https://955540963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgWSBgBDll5yYEIDkdXon%2Fuploads%2FL5Y90ARV2KIL12tol9cb%2Fnav_internal_objects.png?alt=media&#x26;token=9c92eaa5-1eff-4013-b758-8a158ba05c6c" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
You will only see type of objects that are in selected sphere.
{% endhint %}

<figure><img src="https://955540963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgWSBgBDll5yYEIDkdXon%2Fuploads%2FeebOXqzzU8KlOfk24w4M%2Fnav_internal_image%20.png?alt=media&#x26;token=97c0cbdc-3924-4d5c-9ea3-24b0f19d84b3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Remember to always name your objects clearly so that you can differentiate later on!
{% endhint %}

If the object you have selected has an action applied to it, such as audio or video autoplay, you can choose to either apply the action at the end of the navigation or to start the action without navigation to the object.

Click "Save" and you're done! ✔️

<figure><img src="https://955540963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgWSBgBDll5yYEIDkdXon%2Fuploads%2FM7X9eGmurDhWoffD7IE7%2Fnav_internal_actionatend%20.png?alt=media&#x26;token=b445e2c6-f065-4015-a0c2-2d4fc302b9a1" alt=""><figcaption></figcaption></figure>

### Menu

These provide a list of options, helping them navigate to different parts of your content.&#x20;

1. Customise the menu elements&#x20;

<figure><img src="https://955540963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgWSBgBDll5yYEIDkdXon%2Fuploads%2FCLHdazNxEPrxDD2QdRmB%2Fnav_menu_.png?alt=media&#x26;token=005dda56-601b-44aa-a489-e12b292c86ea" alt=""><figcaption></figcaption></figure>

2. Choose the amount of menu items and customise each one

<figure><img src="https://955540963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgWSBgBDll5yYEIDkdXon%2Fuploads%2FJQ6wV64zXrforOewEdID%2Fnav_menu_items.png?alt=media&#x26;token=e397ac3f-3d98-4bfb-bead-50f9683276c4" alt=""><figcaption></figcaption></figure>

3. Choose to navigate to an external or internal link and whether you want this to open up in the same tab or a new tab

<figure><img src="https://955540963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgWSBgBDll5yYEIDkdXon%2Fuploads%2FNqq3cWXAd5z64KXD8Vum%2Fnav_menu_items2%20.png?alt=media&#x26;token=f4c4705f-6c23-44db-90c4-4f3700c061d2" alt=""><figcaption></figcaption></figure>

### Product Search

This feature allows users to search for specific products within your spheres, making it easier to find product information.&#x20;

{% hint style="info" %}
This is only useful if you have products within your sphere, as the search is linked to products' data
{% endhint %}

<figure><img src="https://955540963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgWSBgBDll5yYEIDkdXon%2Fuploads%2FKvrVQgIif3VV6kVhVvrJ%2Fnav_product_.png?alt=media&#x26;token=c6f78e07-8f14-4ced-a419-9d0b9df72239" alt=""><figcaption></figcaption></figure>

Here you can customise your search bar with colours and text settings, before seeing the preview of your changes.

<figure><img src="https://955540963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgWSBgBDll5yYEIDkdXon%2Fuploads%2FbK6gCdb56AqUFARep3o6%2Fnav_product_edit.png?alt=media&#x26;token=54886941-4bb2-483a-a49a-8d124734f676" alt=""><figcaption></figcaption></figure>

#### &#x20;Product Search Configuration

* Choose which spheres to exclude from the search and specify search fields&#x20;

<figure><img src="https://955540963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgWSBgBDll5yYEIDkdXon%2Fuploads%2FC1aKWvLm6V2UzvSIK65y%2Fnav_product_config.png?alt=media&#x26;token=692e33ed-8610-457e-85a5-cdacac0e273a" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Make sure to have detailed product names and descriptions! You can find the article on Products [*here*](https://learn.cozmos.com/cozmos-space/space-core-areas#products)
{% endhint %}

* Customise what users will see when no search results are found

{% hint style="info" %}
The icon must already be uploaded in UI Image Assets. Read the full guide [*here*](https://learn.cozmos.com/cozmos-space/space-core-areas#assets)
{% endhint %}

<figure><img src="https://955540963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgWSBgBDll5yYEIDkdXon%2Fuploads%2FUYprcxil3qANWoT31DOl%2Fnav_product_noresults.png?alt=media&#x26;token=c48a2a4a-7879-43aa-a7cb-7f4ac412c9a8" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Now click "Save Changes", Generate your Sphere in Curator, and you're done ✔️
{% endhint %}

## Assets for Navigation elements&#x20;

Here you can find assets for your navigation elements. Just upload a ZIP file with elements needed and use those you like! You can customize these assets with your preferred design tools.

{% file src="<https://955540963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgWSBgBDll5yYEIDkdXon%2Fuploads%2FWvvwB9VY2wTh36uuhDQ0%2Fcontrol%20button.zip?alt=media&token=43c02a0e-4b4a-4d4a-b52d-fcdcf57a079f>" %}

{% file src="<https://955540963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgWSBgBDll5yYEIDkdXon%2Fuploads%2FkoLAFOV7qag5QyB1Rad4%2Fmenu.zip?alt=media&token=6c3d2fdd-db9f-438d-aa1a-fd2d03cfae99>" %}

{% file src="<https://955540963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgWSBgBDll5yYEIDkdXon%2Fuploads%2FgYvJNNWSP1CHmf4IXuNc%2Fsearch.zip?alt=media&token=82e0a7d7-bfa0-4921-8e57-2f000a2df445>" %}

{% file src="<https://955540963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgWSBgBDll5yYEIDkdXon%2Fuploads%2F6hzUemYQyYWRTbkIMYB8%2Fno%20search%20results.zip?alt=media&token=0463d536-25a7-4493-8b50-55e944383f0e>" %}