mirror of
https://github.com/lingble/twenty.git
synced 2025-11-27 19:33:44 +00:00
a5989a470c
* Begin docs improvement * Keep improving documentation * Upgrade Docusarus * Fix broken links
769 lines
16 KiB
Plaintext
769 lines
16 KiB
Plaintext
---
|
|
title: Menu Item
|
|
sidebar_position: 3
|
|
sidebar_custom_props:
|
|
icon: TbMenu
|
|
---
|
|
|
|
import Tabs from '@theme/Tabs';
|
|
import TabItem from '@theme/TabItem';
|
|
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
|
|
import menuItemCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemCode.js'
|
|
import menuItemCommandCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemCommandCode.js'
|
|
import menuItemDraggableCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemDraggableCode.js'
|
|
import menuItemMultiSelectAvatarCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemMultiSelectAvatarCode.js'
|
|
import menuItemMultiSelectCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemMultiSelectCode.js'
|
|
import menuItemNavigateCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemNavigateCode.js'
|
|
import menuItemSelectAvatarCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemSelectAvatarCode.js'
|
|
import menuItemSelectCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemSelectCode.js'
|
|
import menuItemSelectColorCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemSelectColorCode.js'
|
|
import menuItemToggleCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemToggleCode.js'
|
|
|
|
A versatile menu item designed to be used in a menu or navigation list.
|
|
|
|
<Tabs>
|
|
<TabItem value="usage" label="Usage" default>
|
|
|
|
<SandpackEditor
|
|
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItem']}
|
|
componentCode={menuItemCode}
|
|
/>
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="props" label="Props">
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Props</th>
|
|
<th>Type</th>
|
|
<th>Description</th>
|
|
<th>Default</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>LeftIcon</td>
|
|
<td>IconComponent</td>
|
|
<td>An optional left icon displayed before the text in the menu item</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>accent</td>
|
|
<td>string</td>
|
|
<td>Specifies the accent color of the menu item. Options include: `default`, `danger`, and `placeholder`</td>
|
|
<td>default</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>text</td>
|
|
<td>string</td>
|
|
<td>The text content of the menu item</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>iconButtons</td>
|
|
<td>array</td>
|
|
<td>An array of objects representing additional icon buttons associated with the menu item</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>isTooltipOpen</td>
|
|
<td>boolean</td>
|
|
<td>Controls the visibility of the tooltip associated with the menu item</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>testId</td>
|
|
<td>string</td>
|
|
<td>The data-testid attribute for testing purposes</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>onClick</td>
|
|
<td>function</td>
|
|
<td>Callback function triggered when the menu item is clicked</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>className</td>
|
|
<td>string</td>
|
|
<td>Optional name for additional styling</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
</TabItem>
|
|
|
|
</Tabs>
|
|
|
|
## Variants
|
|
|
|
The different variants of the menu item component include the following:
|
|
|
|
### Command
|
|
|
|
A command-style menu item within a menu to indicate keyboard shortcuts.
|
|
|
|
<Tabs>
|
|
<TabItem value="usage" label="Usage" default>
|
|
|
|
<SandpackEditor
|
|
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemCommand']}
|
|
componentCode={menuItemCommandCode}
|
|
/>
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="props" label="Props">
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Props</th>
|
|
<th>Type</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>LeftIcon</td>
|
|
<td>IconComponent</td>
|
|
<td>An optional left icon displayed before the text in the menu item</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>text</td>
|
|
<td>string</td>
|
|
<td>The text content of the menu item</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>firstHotKey</td>
|
|
<td>string</td>
|
|
<td>The first keyboard shortcut associated with the command</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>secondHotKey</td>
|
|
<td>string</td>
|
|
<td>The second keyboard shortcut associated with the command</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>isSelected</td>
|
|
<td>boolean</td>
|
|
<td>Indicates whether the menu item is selected or highlighted</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>onClick</td>
|
|
<td>function</td>
|
|
<td>Callback function triggered when the menu item is clicked</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>className</td>
|
|
<td>string</td>
|
|
<td>Optional name for additional styling</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
</TabItem>
|
|
|
|
</Tabs>
|
|
|
|
### Draggable
|
|
|
|
A draggable menu item component designed to be used in a menu or list where items can be dragged, and additional actions can be performed through icon buttons.
|
|
|
|
<Tabs>
|
|
<TabItem value="usage" label="Usage" default>
|
|
|
|
<SandpackEditor
|
|
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemDraggable']}
|
|
componentCode={menuItemDraggableCode}
|
|
/>
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="props" label="Props">
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Props</th>
|
|
<th>Type</th>
|
|
<th>Description</th>
|
|
<th>Default</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>LeftIcon</td>
|
|
<td>IconComponent</td>
|
|
<td>An optional left icon displayed before the text in the menu item</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>accent</td>
|
|
<td>string</td>
|
|
<td>The accent color of the menu item. It can either be `default`, `placeholder`, and `danger`</td>
|
|
<td>default</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>iconButtons</td>
|
|
<td>array</td>
|
|
<td>An array of objects representing additional icon buttons associated with the menu item</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>isTooltipOpen</td>
|
|
<td>boolean</td>
|
|
<td>Controls the visibility of the tooltip associated with the menu item</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>onClick</td>
|
|
<td>function</td>
|
|
<td>Callback function to be triggered when the link is clicked</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>text</td>
|
|
<td>string</td>
|
|
<td>The text content of the menu item</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>isDragDisabled</td>
|
|
<td>boolean</td>
|
|
<td>Indicates whether dragging is disabled</td>
|
|
<td>`false`</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>className</td>
|
|
<td>string</td>
|
|
<td>Optional name for additional styling</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
</TabItem>
|
|
|
|
</Tabs>
|
|
|
|
### Multi Select
|
|
|
|
Provides a way to implement multi-select functionality with an associated checkbox.
|
|
|
|
<Tabs>
|
|
<TabItem value="usage" label="Usage" default>
|
|
|
|
<SandpackEditor
|
|
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemMultiSelect']}
|
|
componentCode={menuItemMultiSelectCode}
|
|
/>
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="props" label="Props">
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Props</th>
|
|
<th>Type</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>LeftIcon</td>
|
|
<td>IconComponent</td>
|
|
<td>An optional left icon displayed before the text in the menu item</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>text</td>
|
|
<td>string</td>
|
|
<td>The text content of the menu item</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>selected</td>
|
|
<td>boolean</td>
|
|
<td>Indicates whether the menu item is selected (checked)</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>onSelectChange</td>
|
|
<td>function</td>
|
|
<td>Callback function triggered when the checkbox state changes</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>className</td>
|
|
<td>string</td>
|
|
<td>Optional name for additional styling</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
</TabItem>
|
|
|
|
</Tabs>
|
|
|
|
### Multi Select Avatar
|
|
|
|
A multi-select menu item with an avatar, a checkbox for selection, and textual content.
|
|
|
|
<Tabs>
|
|
<TabItem value="usage" label="Usage" default>
|
|
|
|
<SandpackEditor
|
|
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar']}
|
|
componentCode={menuItemMultiSelectAvatarCode}
|
|
/>
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="props" label="Props">
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Props</th>
|
|
<th>Type</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>avatar</td>
|
|
<td>`ReactNode`</td>
|
|
<td>The avatar or icon to be displayed on the left side of the menu item</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>text</td>
|
|
<td>string</td>
|
|
<td>The text content of the menu item</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>selected</td>
|
|
<td>boolean</td>
|
|
<td>Indicates whether the menu item is selected (checked)</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>onSelectChange</td>
|
|
<td>function</td>
|
|
<td>Callback function triggered when the checkbox state changes</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>className</td>
|
|
<td>string</td>
|
|
<td>Optional name for additional styling</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
</TabItem>
|
|
|
|
</Tabs>
|
|
|
|
### Navigate
|
|
|
|
A menu item featuring an optional left icon, textual content, and a right-chevron icon.
|
|
|
|
<Tabs>
|
|
<TabItem value="usage" label="Usage" default>
|
|
|
|
<SandpackEditor
|
|
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemNavigate']}
|
|
componentCode={menuItemNavigateCode}
|
|
/>
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="props" label="Props">
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Props</th>
|
|
<th>Type</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>LeftIcon</td>
|
|
<td>IconComponent</td>
|
|
<td>An optional left icon displayed before the text in the menu item</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>text</td>
|
|
<td>string</td>
|
|
<td>The text content of the menu item</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>onClick</td>
|
|
<td>function</td>
|
|
<td>Callback function to be triggered when the menu item is clicked</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>className</td>
|
|
<td>string</td>
|
|
<td>Optional name for additional styling</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
</TabItem>
|
|
|
|
</Tabs>
|
|
|
|
### Select
|
|
|
|
A selectable menu item, featuring optional left content (icon and text) and an indicator (check icon) for the selected state.
|
|
|
|
<Tabs>
|
|
<TabItem value="usage" label="Usage" default>
|
|
|
|
<SandpackEditor
|
|
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemSelect']}
|
|
componentCode={menuItemSelectCode}
|
|
/>
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="props" label="Props">
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Props</th>
|
|
<th>Type</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>LeftIcon</td>
|
|
<td>IconComponent</td>
|
|
<td>An optional left icon displayed before the text in the menu item</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>text</td>
|
|
<td>string</td>
|
|
<td>The text content of the menu item</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>selected</td>
|
|
<td>boolean</td>
|
|
<td>Indicates whether the menu item is selected (checked)</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>disabled</td>
|
|
<td>boolean</td>
|
|
<td>Indicates whether the menu item is disabled</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>hovered</td>
|
|
<td>boolean</td>
|
|
<td>Indicates whether the menu item is currently being hovered over</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>onClick</td>
|
|
<td>function</td>
|
|
<td>Callback function to be triggered when the menu item is clicked</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>className</td>
|
|
<td>string</td>
|
|
<td>Optional name for additional styling</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
</TabItem>
|
|
|
|
</Tabs>
|
|
|
|
### Select Avatar
|
|
|
|
A selectable menu item with an avatar, featuring optional left content (avatar and text) and an indicator (check icon) for the selected state.
|
|
|
|
<Tabs>
|
|
<TabItem value="usage" label="Usage" default>
|
|
|
|
<SandpackEditor
|
|
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemSelectAvatar']}
|
|
componentCode={menuItemSelectAvatarCode}
|
|
/>
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="props" label="Props">
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Props</th>
|
|
<th>Type</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>avatar</td>
|
|
<td>`ReactNode`</td>
|
|
<td>The avatar or icon to be displayed on the left side of the menu item</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>text</td>
|
|
<td>string</td>
|
|
<td>The text content of the menu item</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>selected</td>
|
|
<td>boolean</td>
|
|
<td>Indicates whether the menu item is selected (checked)</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>disabled</td>
|
|
<td>boolean</td>
|
|
<td>Indicates whether the menu item is disabled</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>hovered</td>
|
|
<td>boolean</td>
|
|
<td>Indicates whether the menu item is currently being hovered over</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>testId</td>
|
|
<td>string</td>
|
|
<td>The data-testid attribute for testing purposes</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>onClick</td>
|
|
<td>function</td>
|
|
<td>Callback function to be triggered when the menu item is clicked</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>className</td>
|
|
<td>string</td>
|
|
<td>Optional name for additional styling</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
</TabItem>
|
|
|
|
</Tabs>
|
|
|
|
### Select Color
|
|
|
|
A selectable menu item with a color sample for scenarios where you want users to choose a color from a menu.
|
|
|
|
<Tabs>
|
|
<TabItem value="usage" label="Usage" default>
|
|
|
|
<SandpackEditor
|
|
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemSelectColor']}
|
|
componentCode={menuItemSelectColorCode}
|
|
/>
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="props" label="Props">
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Props</th>
|
|
<th>Type</th>
|
|
<th>Description</th>
|
|
<th>Default</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>color</td>
|
|
<td>string</td>
|
|
<td>The theme color to be displayed as a sample in the menu item. Options include: `green`, `turquoise`, `sky`, `blue`, `purple`, `pink`, `red`, `orange`, `yellow`, and `gray`</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>selected</td>
|
|
<td>boolean</td>
|
|
<td>Indicates whether the menu item is selected (checked)</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>disabled</td>
|
|
<td>boolean</td>
|
|
<td>Indicates whether the menu item is disabled</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>hovered</td>
|
|
<td>boolean</td>
|
|
<td>Indicates whether the menu item is currently being hovered over</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>variant</td>
|
|
<td>string</td>
|
|
<td>The variant of the color sample. It can either be `default` or `pipeline`</td>
|
|
<td>default</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>onClick</td>
|
|
<td>function</td>
|
|
<td>Callback function to be triggered when the menu item is clicked</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>className</td>
|
|
<td>string</td>
|
|
<td>Optional name for additional styling</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
</TabItem>
|
|
|
|
</Tabs>
|
|
|
|
### Toggle
|
|
|
|
A menu item with an associated toggle switch to allow users to enable or disable a specific feature
|
|
|
|
<Tabs>
|
|
<TabItem value="usage" label="Usage" default>
|
|
|
|
<SandpackEditor
|
|
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemToggle']}
|
|
componentCode={menuItemToggleCode}
|
|
/>
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="props" label="Props">
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Props</th>
|
|
<th>Type</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>LeftIcon</td>
|
|
<td>IconComponent</td>
|
|
<td>An optional left icon displayed before the text in the menu item</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>text</td>
|
|
<td>string</td>
|
|
<td>The text content of the menu item</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>toggled</td>
|
|
<td>boolean</td>
|
|
<td>Indicates whether the toggle switch is in the "on" or "off" state</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>onToggleChange</td>
|
|
<td>function</td>
|
|
<td>Callback function triggered when the toggle switch state changes</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>toggleSize</td>
|
|
<td>string</td>
|
|
<td>The size of the toggle switch. It can be either 'small' or 'medium'</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>className</td>
|
|
<td>string</td>
|
|
<td>Optional name for additional styling</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
</TabItem>
|
|
|
|
</Tabs>
|