Keyboard Navigation

The keyboard navigation of the DropDownButton is always available.

The DropDownButton supports the following keyboard shortcuts:

SHORTCUTDESCRIPTION
Enter & SpaceOpens the popup, or activates the highlighted item and closes the popup.
Alt+Down ArrowOpens the popup.
Alt+Up ArrowCloses the popup.
EscCloses the popup.
Up Arrow & Left ArrowSets the focus on the previously available item.
Down Arrow & Right ArrowSets the focus on the next available item.
class App extends React.Component {
    render() {
        return (
            <div>
                <DropDownButton text="Edit">
                    <DropDownButtonItem text="Undo" icon="undo" />
                    <DropDownButtonItem text="Redo" icon="redo" disabled={true} />
                    <DropDownButtonItem text="Cut" icon="cut" />
                    <DropDownButtonItem text="Copy" icon="copy" />
                    <DropDownButtonItem text="Paste" icon="paste" />
                </DropDownButton>
            </div>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)

In this article

 /