Grapes homepage1.57.0
  • Guide
  • Tokens
  • Components
    Grapes on GithubGrapes on Figma
    Interaction
    • Button
    • IconButton
    • FloatingActionBar
    • Link
    Icons
    • Icon
    • HighlightIcon
    Form
    • AmountInput
    • Autocomplete
    • AutocompleteMultiple
    • AutocompletePlace
    • CheckboxBox
    • CheckboxField
    • DatePicker
    • FormField
    • Input
    • OptionGroup
    • PasswordInput
    • PhoneInput
    • RadioBox
    • RadioField
    • RadioGroup
    • Select
    • SwitchField
    • TextArea
    • TextInput
    • Upload
    • UploadButton
    Feedback
    • Badge
    • Banner
    • Callout
    • EmptyState
    • Modal
    • ModalSlideshow
    • DeprecatedModalSlideshow
    • PageModal
    • Skeleton
    • Tag
    • Toast
    • Tooltip
    Data display
    • Accordion
    • Avatar
    • Box
    • Calendar
    • CalendarRange
    • CollapsibleList
    • FileCard
    • InfoTip
    • ListBox
    • ListView
    • Panel
    • SidePanel
    • DeprecatedPreview
    • Table
    • Timeline
    • useDateFormatter
    Navigation
    • DropdownItem
    • DropdownMenu
    • Navigation
    • NavigationItem
    • Popover
    • Tabs

    DropdownItem

    View source code
    • Usage
    • Props
    Usage

    The DropdownItem component shouldn't be used as is, but in a DropdownMenu, Autocomplete, AutocompleteMultiple, Select, etc.

    Basic usage

    Word break

    To prevent overflow, any word may be broken at any point if there are no acceptable break point. If you like to change this behavior, please use the className props. For instance, you can revert to the default behavior by passing the TailwindCSS class break-normal.

    Michael Murphy
    <DropdownItem label="Michael Murphy" />
    

    Description

    The helpText prop is used to add a description to the DropdownItem.

    Michael Murphy

    Growth team

    <DropdownItem helpText="Growth team" label="Michael Murphy" />
    

    Highlighted

    The isHighlighted prop is used to highlight the DropdownItem.

    Michael Murphy
    <DropdownItem isHighlighted {...otherProps} />
    

    Selected

    The isSelected prop is used to display the DropdownItem as selected.

    Michael Murphy
    <DropdownItem isSelected {...otherProps} />
    

    Prefix and suffix

    Items can be added inside a DropdownItem with the prefix and suffix props.

    A
    Michael Murphy
    Michael Murphy
    24€
    <>
      <DropdownItem
        prefix={
          <Avatar variant="square" size={24} src="/aurelien.webp" text="Aurelien" />
        }
        {...otherProps}
      />
      <DropdownItem suffix={<span>24€</span>} {...otherProps} />
    </>