import {ActionMenu} from '@primer/react-brand'
<ActionMenu onSelect={(newValue) => alert(`Pressed ${newValue}`)}><ActionMenu.Button>Open menu</ActionMenu.Button><ActionMenu.Overlay aria-label="GitHub features"><ActionMenu.Item value="Copilot" selected>Copilot</ActionMenu.Item><ActionMenu.Item value="Codespaces">Codespaces</ActionMenu.Item><ActionMenu.Item value="CodeQL">CodeQL</ActionMenu.Item></ActionMenu.Overlay></ActionMenu>
const App = () => {const [selection, setSelection] = React.useState('Copilot')return (<ActionMenuonSelect={(newValue) => setSelection(newValue)}selectionVariant="single"><ActionMenu.Button>{selection}</ActionMenu.Button><ActionMenu.Overlay aria-label="GitHub features"><ActionMenu.Item value="Copilot" selected={'Copilot' === selection}>Copilot</ActionMenu.Item><ActionMenu.Itemvalue="Codespaces"selected={'Codespaces' === selection}>Codespaces</ActionMenu.Item><ActionMenu.Item value="CodeQL" selected={'CodeQL' === selection}>CodeQL</ActionMenu.Item></ActionMenu.Overlay></ActionMenu>)}render(<App />)
name | type | default | required | description |
---|---|---|---|---|
disabled | boolean | false | false | Controls the ActionMenu active/inactive state |
open | boolean | false | false | Determines whether the ActionMenu is open by default |
onSelect | (newValue: string) => void | false | Callback that is called when an item is selected | |
selectionVariant | 'single' 'none' | 'none' | false | The selection variant of the ActionMenu |
menuAlignment | 'start' 'end' | 'start' | Horizontal alignment of the menu relative to the bottom of the button |
name | type | default | required | description |
---|---|---|---|---|
className | string | Sets a custom class on the element | ||
children | ReactElement | |||
id | string | Sets a custom id |
name | type | default | required | description |
---|---|---|---|---|
aria-label | string | true | Required for describing the relationship between button and menu | |
className | string | Sets a custom class on the element | ||
children | ReactElement | |||
id | string | Sets a custom id |
name | type | default | required | description |
---|---|---|---|---|
className | string | Sets a custom class on the element | ||
children | ReactElement | |||
disabled | boolean | false | false | Allows control over an individual items active/inactive state |
id | string | Sets a custom id | ||
selected | boolean | Indicates the item is selected in single selection mode | ||
value | string | The underlying value passed to the selection handler |