Menu item

Import
import { MenuItem } from "reshaped";
import type { MenuItemProps } from "reshaped";
Related components

Works with any type of content, including multiple content slots

Automatically resolves to correct HTML tag
Supports responsive size values


Usage

By default, MenuItem is an action element that renders its children.

States

MenuItem can be used for pickers or selection menus and supports selected property for that case. At the same time, it can also be disabled for user selection.

Sizes

MenuItem comes in 3 sizes: small, medium (default) and large, which change the spacing and dimensions of elements inside it.

MenuItem supports responsive syntax for its size property, which means you can change its size based on the viewport.

Composition

MenuItem can be used to build custom menu elements since it provides startSlot and endSlot. You can use it to build all kinds of layout compositions, from creating simple text menus to implementing complex notification layouts.

Since one of the most frequently used scenarios for the startSlot is to use it for displaying icons - it's supported out of the box. When used, startIcon overrides startSlot property. Both of them can't be displayed simultaneously.

Whenever you use MenuItem as a standalone component, you can enable its border-radius with roundedCorners property.

MenuItem supports responsive syntax for its roundedCorners property, which means you can change it based on the viewport size. That's helpful when you have less space for your menu items on mobile screen and want to make them full-width.

When using MenuItem alonside section titles you would usually want to align the MenuItem content visually. In this case, you can use MenuItem.Aligner utility which will adjust the space automatically based on the size of the MenuItem used inside it.

Accessibility

  • Button click event triggers on both Space and Enter keypress.
Previous
Next