General
Navigation Bullets
A navigation bullets component
Overview
NavigationBullets shows a row of bullet indicators for carousels, steppers, and multi-step flows. Users see where they are and can jump to any step or slide by clicking the matching bullet.
The bullets do not animate on initial mount; an --animating modifier gates the keyframes so the tick only fires when the user actually moves between slides.
Key Business & UX Benefits
- Showing total slide count and current position encourages shoppers to view every carousel item instead of stopping after the first.
- Bullets are clickable jump targets, which is faster than swiping through long product carousels and lifts engagement on hero sliders.
- Gated entry animation prevents the distracting tick on page load, keeping the first impression of campaign hero carousels calm.
Pro-Tip from Larry: Use bullets with carousels so users see how many slides there are and can jump to one.
Usage
LNavigationBullets
Feature List
- `count` plus `activeIndices` props drive the bullet row, supporting single-active carousels and multi-select stepper UIs from one component
- `@click` emits the clicked index, leaving slide selection in the parent so it stays in sync with Swiper or external state
- `useSurfaceTone()` picks the matching tone variant automatically, so bullets read on light, dark, and white chrome without manual swaps
- Animating modifier (`navigation-bullets__item--animating`) is gated to actual index changes, so bullets don't tick on initial mount
- Localized `aria-label` per bullet via `navigationBullets.navigateToItem`, keeping screen-reader output sensible in every market
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 |