Explore Nav
Product navbar that morphs from a compact bar into a family carousel.
Import
tsx
import { ExploreNav } from "@cronus-ui/ui";
bash
npx cronus-ui add explore-nav
Examples
.cronus
No audit fixture declares this family in .cronus yet.
API Reference
Generated from the component's exported types.
ExploreNavLabels
| Prop | Type | Default | Description |
|---|---|---|---|
explore* | string | — | — |
close* | string | — | — |
buy* | string | — | — |
overview* | string | — | — |
previousSlide* | string | — | — |
nextSlide* | string | — | — |
currentlyViewing* | string | — | — |
ExploreNavProps
Extends Omit< ComponentPropsWithoutRef<"nav">, | "title" | "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration" | "onDrag" | "onDragStart" | "onDragEnd" >
| Prop | Type | Default | Description |
|---|---|---|---|
ref | Ref<HTMLElement> | — | Ref forwarded to the underlying DOM node. |
title* | string | — | Product family title shown in the collapsed bar and expanded heading. |
products* | ExploreNavProduct[] | — | — |
links | ExploreNavLink[] | [] | Chip links under Overview. |
buyHref | string | — | Buy control. Renders as an anchor when set. |
onBuy | () => void | — | — |
defaultExpanded | boolean | false | — |
expanded | boolean | — | — |
onExpandedChange | (expanded: boolean) => void | — | — |
selectedId | string | — | Controlled selected product id. |
defaultSelectedId | string | — | — |
onSelectedIdChange | (id: string) => void | — | — |
labels | Partial<ExploreNavLabels> | — | Override default English strings. |