# MNavigationIndicator

A navigation indicator visually represents the current position within a sequence or step-based process, helping users track progress or navigate through a series of items. It is commonly used in carousels, onboarding flows, or media players. Navigation indicators can be interactive, allowing users to jump between steps, or passive, simply showing progress.


## Props

| Name | Description | Type | Default |
| --- | --- | --- | --- | 
| `steps*` | The total number of steps to display. | `number` | - |
| `modelValue*` | The index of the currently active step (zero-based). | `number` | - |
| `action` | The current action state of the button. Can be "pause" to show the pause icon or "resume" to show the play icon. | `"resume"` `"pause"` | `"resume"` |
| `label` | The text label displayed in the Resume or Pause button. | `string` | - |
| `player` | If `true`, hides the Resume or Pause button next to the steps. | `boolean` | `true` |

## Events

| Name | Description | Type |
| --- | --- | --- |
| `update:modelValue` | Emits when the active step changes, updating the modelValue prop. | [value: number] |
| `action` | Emits when the action button is clicked. | [] |

## Dependencies

### Depends on

- [MButton](../button)
- [MIconButton](../iconbutton)

### Graph

```mermaid
graph TD;
  MNavigationIndicator --> MButton
  MNavigationIndicator --> MIconButton
style MNavigationIndicator fill:#008240,stroke:#333,stroke-width:4px
```