Menu

Maintainer:
NikitaCG
GitHub
size
groupLabel
itemChildren
itemTheme
itemDisabled
itemSelected
itemActive
itemHref
import {Menu} from '@gravity-ui/uikit';

Компонент Menu позволяет легко создавать представления для списков действий.

Он включает в себя специальные компоненты для элементов (Menu.Item) и групп (Menu.Group), которые можно комбинировать для создания более сложных меню.

<Menu>
    <Menu.Item>First</Menu.Item>
    <Menu.Item>Second</Menu.Item>
</Menu>

Size (размер)

Позволяет задать размер меню. Значение по умолчанию — m.

<Menu size="s">
    <Menu.Item>First</Menu.Item>
    <Menu.Item>Second</Menu.Item>
</Menu>
<Menu size="m">
    <Menu.Item>First</Menu.Item>
    <Menu.Item>Second</Menu.Item>
</Menu>
<Menu size="l">
    <Menu.Item>First</Menu.Item>
    <Menu.Item>Second</Menu.Item>
</Menu>
<Menu size="xl">
    <Menu.Item>First</Menu.Item>
    <Menu.Item>Second</Menu.Item>
</Menu>

Свойства

ИмяОписаниеТипЗначение по умолчанию
sizeРазмер меню."s" "m" "l" "xl""m"
childrenДочерний элемент.React.ReactNode
classNameHTML-атрибут class.string
styleHTML-атрибут style.React.CSSProperties
qaАтрибут data-qa в HTML, используется для тестирования.string

Отвечает за рендеринг элементов меню.

Иконка

Для отображения иконки в начале или в конце элемента меню используйте свойства iconStart или iconEnd:

<Menu>
    <Menu.Item iconStart={<Icon size={16} data={GearIcon} />}>Item with icon</Menu.Item>
    <Menu.Item>Item without icon</Menu.Item>
</Menu>
<Menu>
    <Menu.Item iconEnd={<Icon size={16} data={TriangleExclamation} />}>Item with icon</Menu.Item>
    <Menu.Item>Item without icon</Menu.Item>
</Menu>

Состояния

Позволяет включать или отключать (делать неактивными) отдельные элементы меню:

<Menu>
    <Menu.Item disabled>First</Menu.Item>
    <Menu.Item>Second</Menu.Item>
    <Menu.Item selected>Third</Menu.Item>
</Menu>

Theme (тема)

Позволяет изменить тему элемента меню. Тема по умолчанию — normal.

<Menu>
    <Menu.Item theme="danger">First</Menu.Item>
    <Menu.Item theme="normal">Second</Menu.Item>
    <Menu.Item>Third</Menu.Item>
</Menu>

Свойства

ИмяОписаниеТипЗначение по умолчанию
iconStartИконка меню перед текстом элемента.ReactNode
iconEndИконка меню после текста элемента.ReactNode
selectedФлаг выбранного элемента меню.booleanfalse
disabledФлаг отключенного элемента меню.booleanfalse
activeФлаг активного элемента меню.booleanfalse
hrefURL-адрес.string
titleАтрибут заголовка.string
targetАтрибут целевого ресурса.string
relАтрибут rel.string
onClickОбработчик события клика.React.MouseEventHandler
themeТема элемента меню."normal" "danger""normal"
childrenДочерний элемент.React.ReactNode
classNameHTML-атрибут class.string
styleHTML-атрибут style.React.CSSProperties
qaАтрибут data-qa в HTML, используется для тестирования.string
extraPropsДополнительные HTML-атрибуты.Record

В пределах одного меню элементы можно группировать по темам:

<Menu>
    <Menu.Item>First</Menu.Item>
    <Menu.Group label="Group One">
        <Menu.Item>One</Menu.Item>
        <Menu.Item>Two</Menu.Item>
    </Menu.Group>
    <Menu.Group label="Group Two">
        <Menu.Item>One</Menu.Item>
        <Menu.Item>Two</Menu.Item>
    </Menu.Group>
    <Menu.Item>Middle</Menu.Item>
    <Menu.Group label="Group Three">
        <Menu.Item>One</Menu.Item>
        <Menu.Item>Two</Menu.Item>
    </Menu.Group>
    <Menu.Item>Last</Menu.Item>
</Menu>

Свойства

ИмяОписаниеТипЗначение по умолчанию
labelЛейбл группы меню.string
childrenДочерний элемент.React.ReactNode
classNameHTML-атрибут class.string
styleHTML-атрибут style.React.CSSProperties
qaАтрибут data-qa в HTML, используется для тестирования.string