DropdownMenu·component·@astryxdesign/core

Dropdown Menu Divider

A horizontal rule separating groups of rows in a compound menu. Renders role="separator", so it is never a stop in the arrow-key order. The data-driven equivalent is the `{type: "divider"}` entry in `items`; both modes render this component, so they look and theme identically.

Open in Playground @astryxdesign/core/DropdownMenu

Showcases and examples

7 documented examples · Context from Dropdown Menu

Dropdown Menu

A button that opens a dropdown menu with action items. The menu starts open for preview.

Open Playground ↗

Preview loads on approachPreview loads on approach

Exact source · dropdown-menu-showcase

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';

export default function DropdownMenuShowcase() {
  return (
    <DropdownMenu
      button={{label: 'Actions'}}
      items={[
        {label: 'Edit', onClick: () => {}},
        {label: 'Duplicate', onClick: () => {}},
        {label: 'Delete', onClick: () => {}},
      ]}
    />
  );
}

Usage

A horizontal rule separating groups of rows in a compound menu. Renders role="separator", so it is never a stop in the arrow-key order. The data-driven equivalent is the {type: "divider"} entry in items; both modes render this component, so they look and theme identically.

Typed props

Prop	Type and behavior
`xstyle`	`StyleXStyles` StyleX styles applied after the menu spacing. Must be a stylex.create() value: not an inline style object like style={{}}.

Theming

Targets

astryx-dropdown-menu-divider