Keyboard Navigation

The keyboard navigation of the SplitButton is always available.

The SplitButton supports the following keyboard shortcuts:

SHORTCUTDESCRIPTION
Enter & SpaceIf the popup is opened, activates the currently focused item and closes the popup. If the popup is closed, executes the default action of the SplitButton.
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>
                <SplitButton text="Paste">
                    <SplitButtonItem text="Keep Text Only" icon="paste-plain-text" />
                    <SplitButtonItem text="Paste as HTML" icon="paste-as-html" disabled={true} />
                    <SplitButtonItem text="Paste Markdown" icon="paste-markdown" />
                    <SplitButtonItem text="Set Default Paste" icon="copy" />
                </SplitButton>
            </div>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)
In this article
 /