---
title: "Cycle ViewHelper <f:cycle>"
manual: "Fluid Explained"
version: "main"
permalink: "https://docs.typo3.org/permalink/fluid:typo3fluid-fluid-cycle"
source: "ViewHelpers/Fluid/Cycle.rst"
rendered: "2026-09-26T08:24:58+00:00"
---

# Cycle ViewHelper `<f:cycle>` {#typo3fluid-fluid-cycle}

> [!NOTE]
> This reference is part of the documentation of Fluid Standalone.
> If you are working with Fluid in TYPO3 CMS, please refer to
> [TYPO3's ViewHelper reference](https://docs.typo3.org/other/typo3/view-helper-reference/14.3/en-us/Global/Cycle.html) instead.

This ViewHelper cycles through the specified values.
This can be often used to specify CSS classes for example.

To achieve the "zebra class" effect in a loop you can also use the
"iteration" argument of the **for** ViewHelper.

## Examples {#examples}

These examples could also be achieved using the "iteration" argument
of the ForViewHelper.

### Simple {#simple}

```php
<f:for each="{0:1, 1:2, 2:3, 3:4}" as="foo">
    <f:cycle values="{0: 'foo', 1: 'bar', 2: 'baz'}" as="cycle">
        {cycle}
    </f:cycle>
</f:for>

```

Output:

```php
foobarbazfoo

```

### Alternating CSS class {#alternating-css-class}

```php
<ul>
    <f:for each="{0:1, 1:2, 2:3, 3:4}" as="foo">
        <f:cycle values="{0: 'odd', 1: 'even'}" as="zebraClass">
            <li class="{zebraClass}">{foo}</li>
        </f:cycle>
    </f:for>
</ul>

```

Output:

```php
<ul>
    <li class="odd">1</li>
    <li class="even">2</li>
    <li class="odd">3</li>
    <li class="even">4</li>
</ul>
```

Go to the source code of this ViewHelper: [CycleViewHelper.php (GitHub)](https://github.com/TYPO3/Fluid/blob/main/src/ViewHelpers/CycleViewHelper.php).

**Arguments**

The following arguments are available for the cycle ViewHelper:

-   **as**

    -   *Type:* string
    -   *Required:* true

    The name of the iteration variable

-   **values**

    -   *Type:* array

    The array or object implementing \\ArrayAccess (for example \\SplObjectStorage) to iterated over