> 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>

###