Компоненты/Раскрывающаяся панель продукта

Раскрывающаяся панель продукта

29 сентября 2026

Узкая панель продукта с кнопками «Обзор» и «Купить» пружинисто раскрывается в меню с каруселью моделей, ценой и разделами.

Установка

npm install clsx lucide-react motion tailwind-merge
pnpm add clsx lucide-react motion tailwind-merge
yarn add clsx lucide-react motion tailwind-merge
bun add clsx lucide-react motion tailwind-merge

Файлы

product-nav-expand.tsx
НазадКарусель функций продуктаДалееПрогресс

В свёрнутом виде это тонкая плашка с названием продукта и двумя кнопками. По нажатию на «Обзор» панель на пружине раскрывается вниз: сверху выезжает карусель моделей с метками «Новинка» и «Вы здесь», название перелетает в крупный заголовок, а кнопка покупки перетекает к цене.

Ниже появляются чипы разделов и ссылки. Кнопка «Обзор» превращается в круглый крестик, который сворачивает панель обратно. Карусель листается стрелками и перетаскиванием.

Вручную

Скопируйте эти файлы в components/product-nav-expand/:

Общие помощники положите в lib/ проекта:

Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.

Использование

import { ProductNavExpand } from "@/components/product-nav-expand/product-nav-expand";

export function ProductBar() {
return (
  <ProductNavExpand
    title="Astra One"
    items={[{ src: "/photos/one.webp", label: "Astra One", current: true }]}
    price="От 59 900 ₽"
    priceNote="или 9 990 ₽/мес."
    overviewLabel="Разделы"
    sections={["главное", "камеры"]}
    links={["Характеристики"]}
  />
);
}

Пропсы

Пропс
Описание
title

Название продукта

Тип string

items

Модели карусели: src, label, флаги current и new

Тип ProductNavItem[]

price

Цена в раскрытой панели

Тип string

priceNote

Подпись под ценой

Тип string

overviewLabel

Заголовок блока разделов

Тип string

sections

Чипы разделов

Тип string[]

links

Ссылки внизу панели

Тип string[]

exploreLabel?

Текст кнопки раскрытия

Тип string·По умолчанию "Обзор"

buyLabel?

Текст кнопки покупки

Тип string·По умолчанию "Купить"

currentLabel?

Метка текущей модели

Тип string·По умолчанию "Вы здесь"

newLabel?

Метка новой модели

Тип string·По умолчанию "Новинка"

accent?

Цвет кнопки покупки, меток и ссылок

Тип string·По умолчанию цвет бренда

maxWidth?

Максимальная ширина панели, px

Тип number·По умолчанию 1024

radius?

Скругление свёрнутой панели, px (раскрытая на 10 px больше)

Тип number·По умолчанию 18

defaultOpen?

Панель раскрыта при первом показе

Тип boolean·По умолчанию false

className?

Классы корневого блока

Тип string