Unlock faster development with Fidely UI Pro components Coming soon

Menu

A list of options that appears when a user interacts with a button.

Usage

import { Menu } from '@fidely-ui/react'
<Menu.Root>
  <Menu.Trigger />
  <Menu.Positioner>
    <Menu.Content>
      <Menu.Item />

      <Menu.ItemGroup>
        <Menu.Item />
      </Menu.ItemGroup>

      <Menu.Separator />
      <Menu.Arrow>
        <Menu.ArrowTip />
      </Menu.Arrow>

      <Menu.CheckboxItem>✓</Menu.CheckboxItem>

      <Menu.RadioItemGroup>
        <Menu.RadioItem>✓</Menu.RadioItem>
      </Menu.RadioItemGroup>
    </Menu.Content>
  </Menu.Positioner>
</Menu.Root>

Examples

Context menu

Use the Menu.ContextTrigger component to create a context menu.

Menu Group

Use the Menu.ItemGroup component to group related menu items.

Submenu

Here's an example of how to create a submenu.

Danger Item

Here's an example of how to style a menu item that is used to delete an item.

Menu with Avatar

Here's an example that composes the Menu with the Avatar component to display a menu underneath an avatar.

With Checkbox Items

Here's an example of how to create a menu with checkbox items.

With Radio Items

Here's an example of how to create a menu with radio items.

Placement

Use the positioning.placement prop to control the placement of the menu.

import { Menu } from '@fidely-ui/react/menu'

const Demo = () => {
  return (
    <Menu.Root positioning={{ placement: 'right-end' }}>{/* ... */}</Menu.Root>
  )
}

Menu with links

Here's an example of how to style a menu item that is used to delete an item.

When using custom router links, (eg, react-router, next) you need to set the navigate prop on the Menu.Root component.

'use client'

import { Menu } from '@fidely-ui/react/menu'
import { useNavigate } from 'react-router-dom'

const Demo = () => {
  const navigate = useNavigate()

  return (
    <Menu.Root navigate={({ value, node }) => navigate(`/${value}`)}>
      {/* ... */}
    </Menu.Root>
  )
}

Within Dialog

To use the Menu within a Dialog, you need to avoid portalling the Menu.Positioner to the document's body.

/* <Portal> */
<Menu.Positioner>
  <Menu.Content>{/* ... */}</Menu.Content>
</Menu.Positioner>
/* </Portal> */

Guide

Styling highlighted items

Use the _highlighted prop to style menu items when they are hovered or focused with keyboard navigation.

<Menu.Item _highlighted={{ bg: 'amber.5', color: 'white' }}>
  Custom highlighted item
</Menu.Item>

Styling open state

Use the _open prop to style the menu trigger when the menu is open or _closed when closed

<Menu.Trigger asChild>
  <Button _open={{ bg: 'purple.6', color: 'white' }}>Menu</Button>
</Menu.Trigger>

Props

Root

PropTypeDefaultDescription
closeOnSelectbooleantrueWhether to close the menu when an option is selected.
compositebooleantrueWhether the menu is a composed with other composite widgets like a combobox or tabs.
lazyMountbooleanfalseWhether to enable lazy mounting.
skipAnimationOnMountbooleanfalseWhether to allow the initial presence animation.
loopFocusbooleanfalseWhether to loop the keyboard navigation.
typeaheadbooleantrueWhether the pressing printable characters should trigger typeahead navigation.
unmountOnExitbooleanfalseWhether to unmount on exit.
size"sm" | "md" mdThe size of the component
asReact.ElementType-The underlying element to render.
asChildboolean-Use the provided child element as the default rendered element, combining their props and behavior
defaultHighlightedValuestring-The initial highlighted value of the menu item when rendered. Use when you don't need to control the highlighted value of the menu item.
aria-labelstring-The accessibility label for the menu
anchorPointPoint-The positioning point for the menu. Can be set by the context menu trigger or the button trigger
defaultOpenboolean-The initial open state of the menu when rendered. Use when you don't need to control the open state of the menu
highlightedValuestring-The controlled highlighted value of the menu item
idstring-The unique identifier of the machine.
idsPartial<{}>-The ids of the elements in the menu. Useful for composition
immediateboolean-Whether to synchronize the present change immediately or defer it to the next frame
navigate(details: NavigateDetails) => void-Function to navigate to the selected item if it's an anchor element
onEscapeKeyDown(event: KeyboardEvent) => void-Function called when the escape key is pressed
onExitCompleteVoidFunction-Function called when the animation ends in the closed state
onHighlightChange(details: HighlightChangeDetails) => void-Function called when the highlighted menu item changes
onInteractOutside(event: InteractOutsideEvent) => void-Function called when an interaction happens outside the component
onPointerDownOutside(event: PointerDownOutsideEvent) => void-Function called when the pointer is pressed down outside the component
onOpenChange(details: OpenChangeDetails) => void-Function called when the menu opens or closes
onRequestDismiss(event: LayerDismissEvent) => void-Function called when this layer is closed due to a parent layer being closed
onSelect(details: SelectionDetails) => void-Function called when a menu item is selected
openboolean-The controlled open state of the menu
positioningPositioningOptions-The options used to dynamically position the menu
presentboolean-Whether the node is present (controlled by the user)

Item

PropTypeDefaultDescription
valuestring—The unique value of the menu item option, always Required.
asReact.ElementType-The underlying element to render.
asChildboolean-Use the provided child element as the default rendered element, combining their props and behavior
closeOnSelectboolean-Whether the menu should be closed when the option is selected.
onSelectVoidFunction-The function to call when the item is selected
disabledboolean-Whether the menu item is disabled.
valueTextstring—The textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.

On this page