Sticky Sub-Nav
NavigationProduct-level frosted sticky sub-navigation bar that smoothly slides into view once the hero section scrolls out, pairing the product title on the left with a 'Buy' CTA pill on the right.
Studio Display Pro
From $1,599 · Scroll down to reveal the sticky product sub-nav
True-to-Life 1600 Nits Peak HDR
Anti-reflective nano-texture glass scatters ambient light to minimize glare in bright studio environments.
Thunderbolt 4 Single-Cable Hub
Delivers 96W host charging plus three downstream USB-C ports for high-speed studio peripherals.
12MP Ultra Wide Camera with Center Stage
Machine-learning camera framing keeps you centered automatically as you move around your workspace.
Machined Aluminum Tilt & Height Stand
Counterbalanced arm lets you adjust angle and elevation with effortless one-finger precision.
Reference Modes for Color Grading
Factory-calibrated P3 wide color gamut with 10-bit depth for broadcast video and print workflows.
Six-Speaker Spatial Audio Array
Four force-cancelling woofers produce rich, distortion-free bass and crystal-clear dialogue.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Props
TypeScript props supported by <StickySubNav />.
| Prop | Type | Default | Description |
|---|---|---|---|
| productTitle | string | "Studio Display Pro" | Product name displayed on the left side of the sticky bar. |
| priceLabel | string | "$1,599" | Price string displayed next to the Buy button. |
| ctaLabel | string | "Buy" | Label inside the primary right-hand CTA pill. |
| links | SubNavLink[] | — | Array of navigation links ({ id, label }) shown in the bar. |
| onBuy | () => void | — | Callback fired when the Buy button is clicked. |
| className | string | — | Additional Tailwind CSS classes for the outer container. |
Key Features
- Automatically reveals with a spring slide-down animation (`backdrop-blur-xl`) once the hero section scrolls past.
- Displays product title on the left, section links in the center, and price + 'Buy' CTA pill on the right.
- Includes a self-contained scrollable demo viewport so you can test the scroll trigger immediately.
Keyboard & Accessibility
- Uses semantic `<header>` and `<nav>` landmarks.
- Interactive Buy button announces confirmation state visually and via text.
- Respects `prefers-reduced-motion` for header entry and exit transitions.