Inputs & Textarea
Pull to Refresh
React Grid Layout
Breadcrumbs show users their location during navigation and allow them to easily move up a level or levels in a hierarchy of pages.
Breadcrumb has seven states available for breadcrumb items — enabled, hover, active, focus, visited, disabled and read-only.
If a breadcrumb bar will exceed the content width one option is to wrap the full breadcrumb trail to allow overflow to the next line.
With trail truncation, a maximum of 5 breadcrumb items are shown by default in the breadcrumb trail. If more than five items are required, then the breadcrumb trail truncates to show the first and last items with an ellipsis shown to indicate further items. Clicking the ellipsis expands all items to show the full breadcrumb bar.
Alternatively, truncation can also be customized to collapse before and after a specified item number.
Note: Breadcrumb does not currently support truncation in UI Toolkit. We are working towards releasing this work in a future version.
Long names can be truncated and the length before truncation can be customized. Avoid wrapping individual items onto two lines. When hovering over the truncated breadcrumb a tooltip that contains the full name is displayed.
Breadcrumbs can be displayed in large, medium and small sizes.