<a id="steps"></a>

## Steps  
**Category**: Navigation
Progress indicators for multi-step workflows
### Examples

#### Custom Markers  
```python
Ul(
    Li('Step 1', data_content='?', cls='step step-neutral'),
    Li('Step 2', data_content='!', cls='step step-neutral'),
    Li('Step 3', data_content='✓', cls='step step-neutral'),
    Li('Step 4', data_content='✕', cls='step step-neutral'),
    Li('Step 5', data_content='★', cls='step step-neutral'),
    Li('Step 6', data_content='', cls='step step-neutral'),
    Li('Step 7', data_content='●', cls='step step-neutral'),
    cls='steps'
)
```

#### Horizontal Layout  
```python
Ul(
    Li('Register', cls='step step-primary'),
    Li('Choose plan', cls='step step-primary'),
    Li('Purchase', cls='step'),
    Li('Receive Product', cls='step'),
    cls='steps'
)
```

#### Scrollable Steps  
```python
Div(
    Ul(
        Li("start", cls="step"),
        Li("2", cls="step step-secondary"),
        Li("3", cls="step step-secondary"),
        Li("4", cls="step step-secondary"),
        Li("5", cls="step"),
        Li("6", cls="step step-accent"),
        Li("7", cls="step step-accent"),
        Li("8", cls="step"),
        Li("9", cls="step step-error"),
        Li("10", cls="step step-error"),
        Li("11", cls="step"),
        Li("12", cls="step"),
        Li("13", cls="step step-warning"),
        Li("14", cls="step step-warning"),
        Li("15", cls="step"),
        Li("16", cls="step step-neutral"),
        Li("17", cls="step step-neutral"),
        Li("18", cls="step step-neutral"),
        Li("19", cls="step step-neutral"),
        Li("20", cls="step step-neutral"),
        Li("21", cls="step step-neutral"),
        Li("22", cls="step step-neutral"),
        Li("23", cls="step step-neutral"),
        Li("end", cls="step step-neutral"),
        cls="steps"
    ),
    cls="overflow-x-auto"
)
```

#### Custom Colors  
```python
Ul(
    Li('Fly to moon', cls='step step-info'),
    Li('Shrink the moon', cls='step step-info'),
    Li('Grab the moon', cls='step step-info'),
    Li('Sit on toilet', data_content='?', cls='step step-error'),
    cls='steps'
)
```

#### Vertical Layout  
```python
Ul(
    Li('Register', cls='step step-primary'),
    Li('Choose plan', cls='step step-primary'),
    Li('Purchase', cls='step'),
    Li('Receive Product', cls='step'),
    cls='steps steps-vertical'
)
```

#### Responsive Layout  
```python
Ul(
    Li('Register', cls='step step-primary'),
    Li('Choose plan', cls='step step-primary'),
    Li('Purchase', cls='step'),
    Li('Receive Product', cls='step'),
    cls='steps steps-vertical lg:steps-horizontal'
)
```