> For the complete documentation index, see [llms.txt](https://docs.cwicly.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cwicly.com/blocks/slider/navigation.md).

# Navigation

The Navigation property allows you to navigate through the Slides in your Slider by clicking on left and right arrows.

When Navigation is enabled, a Navigation tab appears in the main tab where you can enable/disable Navigation, choose a Navigation Icon and modify its Size, Colour, Background Colour, Radius.

{% hint style="info" %}
Using the Slider Navigation is optional, since you can build your own from scratch using the Slider action link type.
{% endhint %}

<figure><img src="https://lh5.googleusercontent.com/eBpu6SLhfTR4sBGijVUo1Qy9GgWPMDBuVyUHtt_T7VBkYAU_RgEnPvfL4CYLs-A6ra2R0ikysGFmdxaX3ww9jgUwWi9HY58-AiFTclx3sp8k-KaO0Hcwcy6Ape3Yfg-6bRYPaj0g3pcZH7DuSW6QFrU7kk-3lOPsNxnpsUApBgTkbgglPTCH8tzozrkXwA" alt=""><figcaption></figcaption></figure>

![](https://lh6.googleusercontent.com/n-qeTnFX8LlQ5hnnUcVpb7OVeLSaZl4wh4XaAaZm4VscCrJAMyC9Wx_j4u1989em7FCbJ28HwA0P4U2nk8sDciR8w0pQzNjrXbIFnOM39uSJJ1vWVlr_KLvurwlrN_edW21A6tSU3mE3dq0u6a_CDO9iLaJjcpCaLpBzL8BPYBmMBuxdueXVumEFfeCYSg)

<details>

<summary>Toggle</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Slider tab
5. Find Navigation
6. Toggle on/off

</details>

## Active&#x20;

The Active property can be enabled/disabled to activate or deactivate your Navigation Icon.

{% hint style="info" %}
If your Navigation Icon is not showing, make sure that Active is toggled on.
{% endhint %}

![](https://lh3.googleusercontent.com/ZODV3dX5WVSmxnm3j_6yWkSXhN35Tl-j5B9E-2zgIKZUGQWvNOOIGmN3S_sW2O-VjzoapRNcfe2DfExp-6Lw1sBrUKyyu6Vw4KCGYj0ynhiwHjf9g92bA-i3oBuga64BGIBDjTorapYxqjtokd5Ap0ui9Y75XioMGzKyvla88Wjjh0df4RA916rignu-4A)

<details>

<summary>Toggle</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Slider tab
5. Find Navigation
6. Toggle on
7. Find Navigation tab
8. Find Active
9. Toggle on/off

</details>

## Icon&#x20;

The Icon property allows you to add an Icon to your Navigation. You can choose from a selection of Icons in the Icon Library.

You are also able to modify the size, colour and background colour and radius of your icon.

![](https://lh5.googleusercontent.com/OHtpO8h-pI7A8ywUQxP5i7DhHz27S0k48ifyIg42qSFHbAyyGuR07_860hLFCb9mR_5k0Ys9Skva1FNOq9hZyAECM5jdlVHwW21ySnWAzFjOvOtbRxmYOnM80kq7tnqgWYFz1DcmRzqPX_DClx1XoVjk1Uh5N17ruwewmxDuXBOugRGKhI8RGVbsG5l2kg)

<details>

<summary>Add</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Slider tab
5. Find Navigation
6. Toggle on
7. Find Navigation tab
8. Find 🌎 icon
9. Click to open Icon Library
10. Click desired Icon to select

</details>

## Icon Size

The Size property allows you to modify the size of your Navigation Icon.

{% hint style="info" %}
Remember to add an Icon Size in order to be able to visualise your icon.
{% endhint %}

![](https://lh5.googleusercontent.com/Wi-ceroPxfxOPgz08uzQLebnrrEUws764Sx2fTsE0NYsNs5bG5Tl8LsEd_qEXctgFx6J9drIEe-c8gaslYQp4seyKESP4_CKCLtmtdge65xgCBXSJsWyz49awzf8UF1JK8l2U480Z3od1wVNIP5zs0ohGQRTo6VClBul3O9tVGHnq6mH_MRB-Wr0GpTPgQ)

<details>

<summary>Modify</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Slider tab
5. Find Navigation
6. Toggle on
7. Find Navigation tab
8. Find Icon
9. Click Icon to open Library
10. Click desired Icon to select

</details>

## Icon Colour

The Icon (colour)  property allows you to modify the colour of your Navigation Icon.&#x20;

![](https://lh3.googleusercontent.com/VhNUK_CT1tEPTqvJPsNbLNL0Cy21IcorMuEePlwRwXEdLtI8uL1J-2kTVYBlw23Bu57LlY5Ff9HDLtFhK6EJHuIkMcWKj3DmVhXhKLJ9MII_S9Y4uCr97MR4x2bdWdSqvAKvSe33TTrYKnHoJg31wAD4-2gAuu_r4o4NHrIynWf2xymHE363yRGBSOMzhg)

<details>

<summary>Modify</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Slider tab
5. Find Navigation
6. Toggle on
7. Find Navigation tab
8. Find Icon (colour)
9. Modify colour
10. Click dot to reset

</details>

## Background

The Background property allows you to modify the colour of your Navigation Icon background.

![](https://lh6.googleusercontent.com/8GedBYYrs5_dfJd2FFninS0NUgAftVJL0fH7CmqHUPWlQb0QFKSn0iAdc6yWdjbwUH5STEJ9Hr9NoP-OFXz4hH3cSMGkChBJC-EY2C1-Sf0DFgBE6tE7O8L2ErkJCbVBXMeuU4Rb0oiOR-gsbLBKupWVua-sIItIQp2zx1Zz4WSJURA7nFSRznvrQD9c7g)

<details>

<summary>Modify</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Slider tab
5. Find Navigation
6. Toggle on
7. Find Navigation tab
8. Find Background
9. Modify colour
10. Click dot to reset

</details>

## Radius

The Radius property allows you to choose a radius (or several radii) for your icon background colour.

![](https://lh3.googleusercontent.com/-2pkwg1614zNEE9kIWytx5O9-l0mF6WKds_ecrXMKnA7cfUQoDgoypUHUpClKXp9o9MLUlBX4ZC2JQ1l31kWlOOCZAHn6UxBnC28JXynNuesgJ2C5XT5RGf-XJMikXF0GUcgGaAFeVA-D77i2E0sgqnUT5Zl2YeJoQ8PQuXHg9N2in6uzZ34A0aBPgxxpg)

<details>

<summary>Modify</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Slider tab
5. Find Navigation
6. Toggle on
7. Find Navigation tab
8. Find Radius
9. Modify one or more corners
10. Click dot(s) to reset

</details>

###


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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.cwicly.com/blocks/slider/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.