VibeUI

Breadcrumb

Sibling Switcher

Последний уровень — нативный select с соседними разделами: переключиться можно на месте, не возвращаясь к родителю.

  • breadcrumb
  • select
  • switch
  • no-js

Превью

1440pxHost theme

Использовать с AI

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из registry.

размести это в шапке: https://vibeui.ru/c/breadcrumb-011

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

# Установка и размещение «breadcrumb-011» (Sibling Switcher) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/breadcrumb-011.json

Registry item: https://vibeui.ru/r/breadcrumb-011.json
Ставится в: components/vibeui/breadcrumb-011.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.

Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.

## 2. Что это
Последний уровень — нативный select с соседними разделами: переключиться можно на месте, не возвращаясь к родителю.

Крошки, где последний уровень — select с соседними разделами: переключение на месте, без возврата к родителю и без клиентского кода. Ноль зависимостей, один файл.

## 3. Как использовать
import { Breadcrumb011 } from "@/components/vibeui/breadcrumb-011"

<Breadcrumb011 rootLabel="Документы" siblings={["Договоры", "Счета"]} defaultValue="Счета" />

Полный список пропсов — в установленном файле.

## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.

Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)

## 5. Сохранить как установлено
- локальную палитру --vibeui-breadcrumb-011-* и не подменять её токенами вашей темы
- нативный select: клавиатура, поиск по букве и мобильный барабан даром
- скрытую подпись, связанную с select: поле без имени скринридер не назовёт
- стрелку на бордюрах — штатную стрелку select стилизовать нельзя
- высоту поля под палец
- видимое фокусное кольцо

## 6. Можно менять
- rootLabel, rootHref и массив siblings
- defaultValue — текущий раздел
- label — как называется поле
- акцент через проп accent

## 7. Правила
- Переход по выбору не происходит сам: навесьте onChange в вызывающем коде.
- Соседей должно быть немного: длинный список в select читается плохо, там нужен поиск из категории autocomplete.
- Переключатель уместен, когда разделы равноправны: иерархию им не заменить.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/breadcrumb-011.json
https://vibeui.ru/r/breadcrumb-011.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-breadcrumb-011-*. Серверный компонент: useId нужен только для связи скрытой подписи с select. Список соседей — нативный <select>: клавиатура, поиск по первой букве и мобильный барабан достаются от браузера. Стрелка нарисована бордюрами, потому что штатную у select не стилизовать.

Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

import { useId } from "react"
import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Breadcrumb011Props = Omit<
  ComponentPropsWithoutRef<"nav">,
  "children" | "defaultValue"
> & {
  rootLabel?: string
  rootHref?: string
  siblings?: string[]
  defaultValue?: string
  label?: string
  accent?: string
}

// Идея компонента: последний уровень — не текст, а нативный select с
// соседями. Переключиться между «Договоры» и «Счета» можно на месте, не
// возвращаясь в родительский раздел. Select нативный: он сам умеет
// клавиатуру, поиск по первой букве и мобильный барабан выбора.
const STYLES = `
:where([data-vibeui-block="breadcrumb-011"]){
--vibeui-breadcrumb-011-surface:oklch(1 0 0);
--vibeui-breadcrumb-011-surface-border:oklch(0.91 0.006 265);
--vibeui-breadcrumb-011-fg:oklch(0.26 0.016 265);
--vibeui-breadcrumb-011-muted:oklch(0.56 0.014 265);
--vibeui-breadcrumb-011-border:oklch(0.9 0.006 265);
--vibeui-breadcrumb-011-bg:oklch(0.98 0.002 265);
--vibeui-breadcrumb-011-accent:oklch(0.55 0.17 265);
--vibeui-breadcrumb-011-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
/* Собственная подложка: крошки — это текст, и на тёмной странице
   он обязан читаться без правки палитры проекта. */
[data-vibeui-block="breadcrumb-011"]{
box-sizing:border-box;padding:0.5rem 0.75rem;
background:var(--vibeui-breadcrumb-011-surface);
border:1px solid var(--vibeui-breadcrumb-011-surface-border);border-radius:0.625rem;
font-family:var(--vibeui-breadcrumb-011-font);font-size:0.8125rem;line-height:1.4;
color:var(--vibeui-breadcrumb-011-muted);
}
[data-vibeui-block="breadcrumb-011"] ol{
display:flex;flex-wrap:wrap;align-items:center;gap:0.4375rem;
margin:0;padding:0;list-style:none;
}
[data-vibeui-block="breadcrumb-011"] li{display:inline-flex;align-items:center;gap:0.4375rem}
[data-vibeui-block="breadcrumb-011"] li + li::before{content:"/";color:oklch(0.78 0.01 265)}
[data-vibeui-block="breadcrumb-011"] a{color:inherit;text-decoration:none;border-radius:0.25rem}
[data-vibeui-block="breadcrumb-011"] a:hover{color:var(--vibeui-breadcrumb-011-fg);text-decoration:underline;text-underline-offset:3px}
[data-vibeui-block="breadcrumb-011"] a:focus-visible{outline:2px solid var(--vibeui-breadcrumb-011-accent);outline-offset:2px}
/* Нативный select: клавиатура, поиск по букве и мобильный барабан — даром. */
[data-vibeui-block="breadcrumb-011"] select{
appearance:none;cursor:pointer;
height:1.75rem;padding:0 1.5rem 0 0.5rem;
border:1px solid var(--vibeui-breadcrumb-011-border);border-radius:0.4375rem;
background:var(--vibeui-breadcrumb-011-bg);color:var(--vibeui-breadcrumb-011-fg);
font:inherit;font-size:0.8125rem;font-weight:600;
}
[data-vibeui-block="breadcrumb-011"] select:focus-visible{outline:2px solid var(--vibeui-breadcrumb-011-accent);outline-offset:2px}
[data-vibeui-block="breadcrumb-011"] [data-part="picker"]{position:relative;display:inline-flex;align-items:center}
[data-vibeui-block="breadcrumb-011"] [data-part="caret"]{
position:absolute;right:0.5rem;width:0.375rem;height:0.375rem;pointer-events:none;
margin-top:-0.1875rem;
border-right:1.5px solid var(--vibeui-breadcrumb-011-muted);
border-bottom:1.5px solid var(--vibeui-breadcrumb-011-muted);
transform:rotate(45deg);
}
[data-vibeui-block="breadcrumb-011"] [data-part="hint"]{
position:absolute;width:1px;height:1px;overflow:hidden;
clip-path:inset(50%);white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="breadcrumb-011"] *{animation:none!important;transition:none!important}}
`

const DEFAULT_SIBLINGS = ["Договоры", "Счета", "Акты", "Доверенности"]

/**
 * Последний уровень — нативный select с соседними разделами.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Breadcrumb011({
  rootLabel = "Документы",
  rootHref = "#",
  siblings = DEFAULT_SIBLINGS,
  defaultValue = "Счета",
  label = "Раздел",
  accent,
  className,
  style,
  ...props
}: Breadcrumb011Props) {
  const id = useId()
  const palette = {
    ...(accent ? { "--vibeui-breadcrumb-011-accent": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-breadcrumb-011" precedence="medium">
        {STYLES}
      </style>
      <nav
        {...props}
        data-vibeui-block="breadcrumb-011"
        aria-label="Хлебные крошки"
        className={className}
        style={palette}
      >
        <ol>
          <li>
            <a href={rootHref}>{rootLabel}</a>
          </li>
          <li>
            <span data-part="picker">
              <label htmlFor={id} data-part="hint">
                {label}
              </label>
              <select id={id} defaultValue={defaultValue}>
                {siblings.map((sibling) => (
                  <option key={sibling} value={sibling}>
                    {sibling}
                  </option>
                ))}
              </select>
              <span data-part="caret" aria-hidden="true" />
            </span>
          </li>
        </ol>
      </nav>
    </>
  )
}