# Navigation

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

Navigation elements in Foxify help your customers move through your store easily, whether on desktop or mobile.

{% hint style="success" %}
Check out our **pre-designed sections of Header** for quick setup and inspiration. :sparkling\_heart:

:eyes: Learn more: [Add a Section](/foxify-app/foxstudio/page-customization/add-a-section.md)

![](/files/uHsm3wFywbcFddhuAyLK)
{% endhint %}

## Menu

<figure><img src="/files/2rnOXsuRqBfr32FEXYTE" alt=""><figcaption></figcaption></figure>

The **Menu** element lets you display a horizontal or vertical navigation bar on your storefront. It's the main structure for showing key site links like “Home,” “Catalog,” or “About.”

{% hint style="info" %}
On mobile, the menu is shown as a drawer.
{% endhint %}

### How to add a Menu element&#x20;

{% hint style="success" %}
Steps:

1. In the FoxStudio editor, on the left Sidebar > Click **Add elements**, or press **E**.
2. In **Advanced elements**, select **Navigation.**
3. Drag the **Menu** element onto your canvas.
4. Make necessary changes.
   {% endhint %}

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

### How to edit a Menu element

{% hint style="success" %}
Steps:

1. **Select** the element in the editor.
2. All the formatting tools for the element can be found in the **Inspector** panel.
   {% endhint %}

#### Main menu

Select a menu from your **Shopify admin > Content > Menus** to display.

{% hint style="info" %}
[Learn how to manage your store's menu in Shopify.](https://help.shopify.com/en/manual/online-store/menus-and-links/editing-menus)
{% endhint %}

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

{% hint style="info" %}
**🧐 Not see any menus to select?**&#x20;

Make sure you provide your **Storefront password** in **Foxify** **Settings > Account**.

[/pages/AvmYf8LEitQtqS447K36#id-2.-store-with-a-password](https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/pages/AvmYf8LEitQtqS447K36#id-2.-store-with-a-password "mention")
{% endhint %}

#### Direction

Set to display your menu items horizontally or vertically.&#x20;

{% tabs %}
{% tab title="Horizontal" %}

<figure><img src="/files/J9uLvdONY3F78fP9ipfk" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Vertical" %}

<figure><img src="/files/xyriOc7xXuoPmdCDUJLV" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Show nested items**: Enable to show nested menu items on dropdowns when hovering.

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

#### Design

Decide what you want to design:

* Element container

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

* Desktop dropdown

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

## Menu opener

The **Menu opener** is a compact mobile-friendly navigation element that replaces the standard menu on smaller screens. **It displays a hamburger icon which, when tapped, reveals the menu as a drawer**.

{% hint style="success" %}
Steps:

1. In the FoxStudio editor, on the left Sidebar > Click **Add elements**, or press **E**.
2. In **Advanced elements**, select **Navigation.**
3. Drag the **Menu opener** element onto your canvas.
4. Make necessary changes.
   {% endhint %}

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

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

{% hint style="info" %}
You can also replace the default hamburger icon with a text button label.
{% endhint %}

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

## Country/Language selector

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

Allow shoppers to view your site in their local language and currency with the **Country/Language selector**.

### How to add a Country/Language selector element&#x20;

{% hint style="success" %}
Steps:

1. In the FoxStudio editor, on the left Sidebar > Click **Add elements**, or press **E**.
2. In **Advanced elements**, select **Navigation.**
3. Drag the **Country/language selector** element onto your canvas.
4. Make necessary changes.
   {% endhint %}

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

### How to edit a Country/Language selector element

{% hint style="success" %}
Steps:

1. **Select** the element in the editor.
2. All the formatting tools for the element can be found in the **Inspector** panel.
   {% endhint %}

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

* **Selector type**: Select what you want to show to customers:
  * **Country/region selector**
  * **Language selector**

{% tabs %}
{% tab title="Country/region selector" %}

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

To manage your store's regions, check out **Shopify Markets**:

{% embed url="<https://help.shopify.com/en/manual/international>" %}

{% hint style="success" %}
You can choose to display the **currency code** and/or **flag** in your selector.
{% endhint %}

<figure><img src="/files/JFXXVkEru2zPhdwBMN05" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Language selector" %}

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

To manage your store languages, check out **Shopify help center**:

{% embed url="<https://help.shopify.com/en/manual/international/languages/manage-languages>" %}
{% endtab %}
{% endtabs %}

## Cart link

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

Add a cart icon to your header. It optionally shows the number of items in the cart and links to either the cart drawer or the cart page.

### How to add a Cart link

{% hint style="success" %}
Steps:

1. In the FoxStudio editor, on the left Sidebar > Click **Add elements**, or press **E**.
2. In **Advanced elements**, select **Navigation.**
3. Drag the **Cart link** element onto your canvas.
4. Make necessary changes.
   {% endhint %}

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

{% hint style="info" %}
:bulb: **Tip**: Make the cart icon easy to spot – top right is standard.
{% endhint %}

### How to edit the Cart link element

{% hint style="success" %}
Steps:

1. **Select** the element in the editor.
2. All the formatting tools for the element can be found in the **Inspector** panel.
   {% endhint %}

<figure><img src="/files/8iwhb9s76SHLR8EsriA9" alt=""><figcaption></figcaption></figure>

* **Icon**: Choose your preferred Cart icon style.
* Toggle **Show cart count** if you want to display item quantity.
* Select the **Cart action**:
  * Open cart drawer&#x20;
  * Open cart page


---

# 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://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/navigation.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.