@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
31 lines (30 loc) • 1.65 kB
JavaScript
'use client';
import '@ui5/webcomponents/dist/Breadcrumbs.js';
import { withWebComponent } from '../../internal/withWebComponent.js';
/**
* Enables users to navigate between items by providing a list of links to previous steps in the user's navigation path.
* It helps the user to be aware of their location within the application and allows faster navigation.
*
* The last three steps can be accessed as links directly, while the remaining links prior to them are available
* in a drop-down menu.
*
* You can choose the type of separator to be used from a number of predefined options.
*
* ### Keyboard Handling
* The `Breadcrumbs` provides advanced keyboard handling.
*
* - [F4], [Alt] + [Up], [Alt] + [Down], [Space], or [Enter] - If the dropdown arrow is focused - opens/closes the drop-down.
* - [Space],[Enter] - Activates the focused item and triggers the `item-click` event.
* - [Escape] - Closes the drop-down.
* - [Left] - If the drop-down is closed - navigates one item to the left.
* - [Right] - If the drop-down is closed - navigates one item to the right.
* - [Up] - If the drop-down is open - moves focus to the next item.
* - [Down] - If the drop-down is open - moves focus to the previous item.
* - [Home] - Navigates to the first item.
* - [End] - Navigates to the last item.
*
* __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
*/
const Breadcrumbs = withWebComponent('ui5-breadcrumbs', ['design', 'separators'], [], [], ['item-click']);
Breadcrumbs.displayName = 'Breadcrumbs';
export { Breadcrumbs };