Breadcrumbs
Breadcrumbs are a navigation system used to show a user's location in a site or app.Installation
| Install | yarn add @atlaskit/breadcrumbs |
|---|---|
| Source | Bitbucket.org, (opens new window) |
| npm | @atlaskit/breadcrumbs, (opens new window) |
| Bundle | unpkg.com, (opens new window) |
Props
| Description | Additional information to be included in the |
|---|---|
| Type | { [x: string]: any; } |
| Description | The items to be included inside the Breadcrumbs wrapper. |
|---|---|
| Type | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal |
| Description | You should not be accessing this prop under any circumstances.
It is provided by |
|---|---|
| Type | (payload: AnalyticsEventPayload) => UIAnalyticsEvent |
| Description | Controls whether the legacy collapsed breadcrumbs start expanded. {@link https://hello.atlassian.net/browse/ENGHEALTH-58821 Internal documentation for deprecation (no external access)} Only used by the legacy breadcrumbs collapse behavior. The refreshed breadcrumbs collapse responsively and ignore this prop. |
|---|---|
| Type | boolean |
| Description | Text to be used as an accessible label for the ellipsis button that reveals collapsed breadcrumb items in a popup. |
|---|---|
| Type | string |
| Description | Override collapsing of the nav when there are more than the maximum number of items. {@link https://hello.atlassian.net/browse/ENGHEALTH-58821 Internal documentation for deprecation (no external access)} Only used by the legacy breadcrumbs collapse behavior. The refreshed breadcrumbs collapse responsively and ignore this prop. |
|---|---|
| Type | boolean |
| Description | If max items is exceeded, the number of items to show after the ellipsis. {@link https://hello.atlassian.net/browse/ENGHEALTH-58821 Internal documentation for deprecation (no external access)} Only used by the legacy breadcrumbs collapse behavior. The refreshed breadcrumbs automatically choose which items to collapse and ignore this prop. |
|---|---|
| Type | number |
| Description | If max items is exceeded, the number of items to show before the ellipsis. {@link https://hello.atlassian.net/browse/ENGHEALTH-58821 Internal documentation for deprecation (no external access)} Only used by the legacy breadcrumbs collapse behavior. The refreshed breadcrumbs automatically choose which items to collapse and ignore this prop. |
|---|---|
| Type | number |
| Description | Text to be used as label of navigation region that wraps the breadcrumbs. |
|---|---|
| Type | string |
| Description | Set the maximum number of breadcrumbs to display. When there are more than the maximum number, only the first and last will be shown, with an ellipsis in between. {@link https://hello.atlassian.net/browse/ENGHEALTH-58821 Internal documentation for deprecation (no external access)} Only used by the legacy breadcrumbs collapse behavior. The refreshed breadcrumbs collapse based on available space and ignore this prop. |
|---|---|
| Type | number |
| Description | A function to be called when you are in the collapsed view and click the ellipsis. {@link https://hello.atlassian.net/browse/ENGHEALTH-58821 Internal documentation for deprecation (no external access)} Only used by the legacy breadcrumbs collapse behavior. The refreshed breadcrumbs manage collapse responsively and ignore this prop. |
|---|---|
| Type | (event: MouseEvent<Element, globalThis.MouseEvent>, analyticsEvent: UIAnalyticsEvent) => void |
| Description | No description. |
|---|---|
| Type | ((instance: any) => void) | RefObject<any> |
| Description | The size variant of the breadcrumbs. Use |
|---|---|
| Default | 'medium' |
| Type | "medium" | "small" |
| Description | A |
|---|---|
| Type | string |
| Description | No description. |
|---|---|
| Type | (el: HTMLLIElement) => void |
| Description | Additional information to be included in the |
|---|---|
| Type | { [x: string]: any; } |
| Description | No description. |
|---|---|
| Type | boolean | "page" |
| Description | Accessible label applied to the interactive breadcrumb control. |
|---|---|
| Type | string |
| Description | Accessible labelling relationship applied to the interactive breadcrumb control. |
|---|---|
| Type | string |
| Description | Provide a custom component to use instead of the default button. The custom component should accept a className prop so it can be styled and possibly all action handlers.
|
|---|---|
| Type | any |
| Description | You should not be accessing this prop under any circumstances.
It is provided by |
|---|---|
| Type | (payload: AnalyticsEventPayload) => UIAnalyticsEvent |
| Description | An element to display before the breadcrumb. |
|---|---|
| Type | string | number | ReactElement<any, string | JSXElementConstructor<any>> |
| Description | The url or path which the breadcrumb should act as a link to. |
|---|---|
| Type | string |
| Description | An icon to display after the breadcrumb. {@link https://hello.atlassian.net/browse/ENGHEALTH-58821 Internal documentation for deprecation (no external access)}
Use |
|---|---|
| Type | string | number | ReactElement<any, string | JSXElementConstructor<any>> |
| Description | An icon to display before the breadcrumb. Use |
|---|---|
| Type | string | number | ReactElement<any, string | JSXElementConstructor<any>> |
| Description | Handler to be called on click. * |
|---|---|
| Type | (event: MouseEvent<Element, globalThis.MouseEvent>) => void |
| Description | A function to be called when a truncated breadcrumb item's tooltip is shown. |
|---|---|
| Type | () => void |
| Description | No description. |
|---|---|
| Type | ((instance: any) => void) | RefObject<any> |
| Description | No description. |
|---|---|
| Type | "" | "_blank" | "_parent" | "_self" | "_top" |
| Description | A |
|---|---|
| Type | string |
| Description | The text to appear within the breadcrumb as a link. |
|---|---|
| Type | string |
| Description | Advisory text applied to the interactive breadcrumb control. |
|---|---|
| Type | string |
| Description | The maximum width in pixels that an item can have before it is truncated. If this is not set, truncation will only occur when it cannot fit alone on a line. If there is no truncationWidth, tooltips are not provided on truncation. |
|---|---|
| Type | number |