VibeUI

Feedback

Nested Popover

A popover inside a popover: the second-level button lives inside the first panel, so the browser treats them as nested and keeps the parent open.

  • popover
  • nested
  • menu
  • share

Preview

1440pxHost theme

Use it with AI

  1. 1. Copy the link.
  2. 2. Write to your agent in your own words and drop the link into the sentence.
  3. 3. The agent opens the link and installs the component from the registry.

put this in the header: https://vibeui.ru/c/popover-008?lang=en

Доступ к документу

Access level

Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

# Install and place "popover-008" (Nested Popover) from VibeUI

## 1. Install first — do not skip, do not recreate
Run this exact command before writing any code:
npx shadcn@latest add https://vibeui.ru/r/popover-008.json

Registry item: https://vibeui.ru/r/popover-008.json
Installs to: components/vibeui/popover-008.tsx (the exact path follows this project's components.json aliases).
npm dependencies: none.
Registry dependencies: none.

Install it from the registry. Do not recreate it from the description,
do not substitute a similar component from another library, and do not
rewrite it to match the project's existing style.

## 2. What it is
A popover inside a popover: the second-level button lives inside the first panel, so the browser treats them as nested and keeps the parent open.

A popover with a nested second popover: the parent stays open. Zero dependencies, one file, the browser owns the stack.

## 3. How to use it
import { Popover008 } from "@/components/vibeui/popover-008"

<Popover008
  label="Share"
  nestedLabel="Access level"
  levels={["Read only", "Can edit"]}
/>

Read the installed file for the full prop list.

## 4. Where to place it
This is a small inline component. Put it exactly where the user asked,
inside the existing markup. Do not create a new page, section or
wrapper for it. If a similar control already sits in that spot,
replace it instead of adding a second one.

Placement: ___
(The user fills this line in. If it is still blank, ask where to put it
instead of guessing.)

## 5. Keep exactly as installed
- the local --vibeui-popover-008-* palette — do not swap it for your theme tokens
- the panel layout only inside the :popover-open rule — display in the plain rule overrides the browser's display:none and the panel stays open forever
- the second panel's button inside the first one: move it out and the parent starts closing
- the separate anchor-names on the trigger and the parent row, otherwise the second panel latches onto the wrong element
- the inside-out Escape order — it comes from the browser and does not need reimplementing
- the panels' own light surface: without it the dark text disappears on a dark background

## 6. You may change
- the trigger caption through label and the nested row caption through nestedLabel
- the second-level options through levels
- the contents of the first panel directly in the markup
- the accent through the --vibeui-popover-008-accent variable

## 7. Rules
- A third level works the same way but is hard to use: two levels is the practical ceiling.
- The chosen level is not stored: the caller attaches the handlers.
- Without anchor positioning the second panel drops below the first instead of beside it — a deliberate fallback.
- Do not lift the CSS variables into globals.css: the component has to stay a single file.

## 8. Verify
- it renders with no console errors;
- it looks like the preview on the VibeUI page you copied this from;
- if it does not, you changed something listed in section 5 — put it back.

For developers

npx shadcn@latest add https://vibeui.ru/r/popover-008.json
https://vibeui.ru/r/popover-008.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-popover-008-*. Серверный: обе панели на HTML popover, идентификаторы разводит useId. Раскладка обеих объявлена только в :popover-open. Вложенность возникает из того, что кнопка второй панели находится внутри первой: браузер выстраивает стек, Escape закрывает панели по одной изнутри наружу. Вторая панель прицеплена к строке-родителю через собственный anchor-name, у обеих есть откат под @supports not.

Component source

The same file your agent installs. Here in case you would rather copy it by hand.

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

export type Popover008Props = Omit<
  ComponentPropsWithoutRef<"div">,
  "children"
> & {
  label?: string
  title?: string
  /** Подпись пункта, который открывает второй, вложенный поповер. */
  nestedLabel?: string
  /** Уровни доступа во вложенном поповере. */
  levels?: string[]
}

// Идея компонента: поповер внутри поповера. Кнопка второго уровня лежит внутри
// первой панели, поэтому браузер считает панели вложенными и не закрывает
// родителя при открытии ребёнка; Escape закрывает их по одному, изнутри наружу.
const STYLES = `
:where([data-vibeui-block="popover-008"]){
--vibeui-popover-008-bg:oklch(1 0 0);
--vibeui-popover-008-fg:oklch(0.23 0.014 265);
--vibeui-popover-008-muted:oklch(0.54 0.014 265);
--vibeui-popover-008-border:oklch(0.9 0.006 265);
--vibeui-popover-008-hover:oklch(0.965 0.004 265);
--vibeui-popover-008-accent:oklch(0.55 0.16 275);
--vibeui-popover-008-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="popover-008"]{
position:relative;display:inline-block;
font-family:var(--vibeui-popover-008-font);color:var(--vibeui-popover-008-fg);
}
[data-vibeui-block="popover-008"] [data-part="trigger"]{
appearance:none;cursor:pointer;
display:inline-flex;align-items:center;gap:0.4375rem;
height:2.25rem;padding:0 0.9375rem;border-radius:0.625rem;
border:1px solid var(--vibeui-popover-008-border);
background:var(--vibeui-popover-008-bg);color:inherit;
font:inherit;font-size:0.8125rem;font-weight:640;
anchor-name:--vibeui-popover-008-anchor;
}
[data-vibeui-block="popover-008"] [data-part="trigger"]:hover{background:var(--vibeui-popover-008-hover)}
[data-vibeui-block="popover-008"] [data-part="trigger"]:focus-visible{outline:2px solid var(--vibeui-popover-008-accent);outline-offset:2px}
/* Обе панели получают раскладку только в :popover-open. display в обычном
   правиле перебивает браузерный display:none — панель зависает открытой. */
[data-vibeui-block="popover-008"] [data-part="panel"],
[data-vibeui-block="popover-008"] [data-part="nested"]{
position:fixed;margin:0;padding:0.5rem;
box-sizing:border-box;
border:1px solid var(--vibeui-popover-008-border);border-radius:0.875rem;
background:var(--vibeui-popover-008-bg);color:inherit;
box-shadow:0 24px 52px -30px oklch(0.2 0.02 265 / 60%);
}
[data-vibeui-block="popover-008"] [data-part="panel"]{
width:min(16rem,100vw - 2rem);
position-anchor:--vibeui-popover-008-anchor;
top:anchor(bottom);left:anchor(left);margin-top:0.5rem;
}
[data-vibeui-block="popover-008"] [data-part="nested"]{
width:min(14rem,100vw - 2rem);
position-anchor:--vibeui-popover-008-sub;
top:anchor(top);left:anchor(right);margin-left:0.5rem;
}
[data-vibeui-block="popover-008"] [data-part="panel"]:popover-open,
[data-vibeui-block="popover-008"] [data-part="nested"]:popover-open{display:flex;flex-direction:column;gap:0.125rem}
@supports not (anchor-name: --a){
[data-vibeui-block="popover-008"] [data-part="panel"]{position:absolute;inset:auto;top:calc(100% + 0.5rem);left:0}
[data-vibeui-block="popover-008"] [data-part="nested"]{position:absolute;inset:auto;top:calc(100% + 0.5rem);left:0;margin-left:0}
}
[data-vibeui-block="popover-008"] [data-part="caption"]{
margin:0.125rem 0.375rem 0.375rem;
font-size:0.6875rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;
color:var(--vibeui-popover-008-muted);
}
[data-vibeui-block="popover-008"] [data-part="row"]{
appearance:none;cursor:pointer;border:0;background:transparent;
display:flex;align-items:center;gap:0.5rem;width:100%;box-sizing:border-box;
padding:0.4375rem 0.5rem;border-radius:0.5rem;
color:inherit;font:inherit;font-size:0.8125rem;text-align:left;
text-decoration:none;
transition:background-color .14s ease;
}
[data-vibeui-block="popover-008"] [data-part="row"]:hover{background:var(--vibeui-popover-008-hover)}
[data-vibeui-block="popover-008"] [data-part="row"]:focus-visible{outline:2px solid var(--vibeui-popover-008-accent);outline-offset:-2px}
[data-vibeui-block="popover-008"] [data-part="row"][data-sub]{anchor-name:--vibeui-popover-008-sub}
[data-vibeui-block="popover-008"] [data-part="row"][data-sub]::after{content:"›";margin-left:auto;color:var(--vibeui-popover-008-muted);font-size:1rem;line-height:1}
[data-vibeui-block="popover-008"] [data-part="mark"]{
flex:none;width:1.125rem;text-align:center;color:var(--vibeui-popover-008-muted);
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="popover-008"] *{animation:none!important;transition:none!important}}
`

const DEFAULT_LEVELS = ["Только чтение", "Комментирование", "Редактирование"]

/**
 * Поповер с вложенным вторым поповером: родитель не закрывается при открытии ребёнка.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Popover008({
  label = "Поделиться",
  title = "Доступ к документу",
  nestedLabel = "Уровень доступа",
  levels = DEFAULT_LEVELS,
  className,
  style,
  ...props
}: Popover008Props) {
  const id = useId().replace(/:/g, "")

  return (
    <>
      <style href="vibeui-popover-008" precedence="medium">
        {STYLES}
      </style>
      <div
        {...props}
        data-vibeui-block="popover-008"
        className={className}
        style={style as CSSProperties}
      >
        <button type="button" data-part="trigger" popoverTarget={`${id}-panel`}>
          <span aria-hidden="true">↗</span>
          {label}
        </button>
        <div
          data-part="panel"
          id={`${id}-panel`}
          popover="auto"
          aria-label={title}
        >
          <p data-part="caption">{title}</p>
          <button type="button" data-part="row">
            <span data-part="mark" aria-hidden="true">
              ⧉
            </span>
            Скопировать ссылку
          </button>
          <button type="button" data-part="row">
            <span data-part="mark" aria-hidden="true">
              ✉
            </span>
            Пригласить по почте
          </button>
          <button
            type="button"
            data-part="row"
            data-sub=""
            popoverTarget={`${id}-nested`}
          >
            <span data-part="mark" aria-hidden="true">
              ⚙
            </span>
            {nestedLabel}
          </button>
          <div
            data-part="nested"
            id={`${id}-nested`}
            popover="auto"
            aria-label={nestedLabel}
          >
            <p data-part="caption">{nestedLabel}</p>
            {levels.map((level, index) => (
              <button type="button" data-part="row" key={level}>
                <span data-part="mark" aria-hidden="true">
                  {index === 0 ? "✓" : ""}
                </span>
                {level}
              </button>
            ))}
          </div>
        </div>
      </div>
    </>
  )
}