---
description: Компонент, позволяющий реализовать всплывающее меню при нажатии на шапку.
---

<Overview group="navigation">
# PanelHeaderContext [tag:component]

Компонент, позволяющий реализовать всплывающее меню при нажатии на шапку. Может быть полезен для реализации дополнительной навигации
по разделам приложения. Размещайте данный компонент _рядом_ с компонентом [`PanelHeader`](/components/panel-header).

Связанные компоненты:

- [`PanelHeader`](/components/panel-header)

</Overview>

import { FixedLayoutWrapper } from '@/components/wrappers';

<Playground hide>

```jsx
<AdaptivityProvider sizeX="regular">
  <Panel>
    <PanelHeader>
      <PanelHeaderContent>Нажми</PanelHeaderContent>
    </PanelHeader>
    <PanelHeaderContext opened onClose={() => {}}>
      <SimpleCell>Пункт один</SimpleCell>
      <SimpleCell>Пункт два</SimpleCell>
    </PanelHeaderContext>
  </Panel>
</AdaptivityProvider>
```

</Playground>

{/* @example-description: Базовый `PanelHeaderContext` с открытием/закрытием контекстного меню из шапки. */}
<Playground Wrapper={FixedLayoutWrapper}>

```jsx
const [contextOpened, setContextOpened] = React.useState(false);

const toggleContext = () => {
  setContextOpened((prev) => !prev);
};

return (
  <Panel>
    <PanelHeader>
      <PanelHeaderContent onClick={toggleContext}>Нажми</PanelHeaderContent>
    </PanelHeader>
    <PanelHeaderContext opened={contextOpened} onClose={toggleContext}>
      <SimpleCell onClick={() => setContextOpened(false)}>Пункт один</SimpleCell>
      <SimpleCell onClick={() => setContextOpened(false)}>Пункт два</SimpleCell>
    </PanelHeaderContext>
    <Group>
      <div style={{ height: 150 }} />
    </Group>
  </Panel>
);
```

</Playground>

## Контент

Содержимое меню передавайте в свойство `children`. Несмотря на то, что вы можете передать любые компоненты,
для реализации пунктов меню рекомендуется использовать компонент `SimpleCell`.

## Состояния

### Раскрытие

Свойство `opened` позволяет показывать и скрывать компонент.

- `false` — компонент скрыт (по умолчанию);
- `true` — компонент раскрыт.

## Обработчики событий

Свойство `onClose` принимает обработчик скрытия компонента, который будет вызван при завершении анимации.

Компонент обрабатывает любые нажатия внутри своей области. Если нажатие на элементы внутри меню не должно скрывать его, останавливайте всплытие через [`event.stopPropagation()`](https://developer.mozilla.org/ru/docs/Web/API/Event/stopPropagation).

## Свойства и методы [#api]

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `getRootRef` | `Ref<HTMLDivElement>` | `-` |  |
| `**onClose** \*` | `VoidFunction` | `-` | Обработчик закрытия всплывающего элемента. |
| `opened` | `boolean` | `false` | Управление состоянием всплывающего элемента true - элемент открыт, false - элемент закрыт. |