General
Navigation Bullets
A navigation bullets component
Overview
The Navigation Bullets component shows a row of bullet indicators so users can see their position in a carousel, stepper, or multi-step flow and jump to a specific step or slide.
Key Business & UX Benefits
- Shows progress and position so users know where they are in a flow.
- Lets users jump to any step or slide with a single click.
- Keeps layouts clean with a compact, recognizable pattern.
- Works with carousels and steppers for consistent navigation.
Pro-Tip from Larry: Use bullets with carousels so users see how many slides there are and can jump to one.
Usage
NavigationBullets
Feature List
- Bullet indicators for carousel or stepper position
- Clickable bullets to jump to a specific slide or step
- Active state for current position
- Theme-aligned styling for light and dark modes
API Reference
| Prop | Default | Type |
|---|---|---|
countrequired | number | |
activeIndicesrequired | number[] | |
color | default | "default" | "primary" | "accent" | "white""default" calculates the color based on the background brightness |
| Event | Type |
|---|---|
click | (event: "click", index: number): void |