Keyboard Navigation

By default, the keyboard navigation of the PanelBar is enabled.

The PanelBar supports the following keyboard shortcuts:

SHORTCUTDESCRIPTION
Up ArrowHighlights the previous item. If no previous item is available, highlights the last item.
Down ArrowHighlights the next item. If no next item is available, highlights the first item.
Left ArrowCollapses the current item if it is expanded. If the item is not expandable, highlights the parent item.
Right ArrowExpands the current item if it is collapsed. If child items are available, highlights the first item.
Enter & SpaceSelects the highlighted item, or toggles the group of items.
TabFocuses the PanelBar component.
class App extends React.Component {
    render() {
        const items = [
             {id: "0", title: "Projects", children: [
                     {id: "1", title: "New Business Plan" },
                     {id: "2", title: "Sales Forecasts", children: [
                             {id: "3", title: "Q1 Forecast" },
                             {id: "4", title: "Q2 Forecast" },
                             {id: "5", title: "Q3 Forecast" },
                             {id: "6", title: "Q4 Forecast" }
                        ]
                    }
                ]
            },
             {id: "7", title: "Programs", children: [
                     {id: "8", title: "Monday" },
                     {id: "9", title: "Tuesday" },
                     {id: "10", title: "Wednesday" },
                     {id: "11", title: "Thursday" },
                     {id: "12", title: "Friday" }
                ]
            },
             {id: "13", title: "Communication", disabled: true}
        ];

        const components = PanelBarUtils.mapItemsToComponents(items);

        return (
            <PanelBar children={components}/>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)
 /