Breadcrumbs
Breadcrumbs are a navigation system used to show a user's location in a site or app.Usage
Breadcrumbs are an alternative way to help users orient themselves. They're a useful addition to, but shouldn’t replace, the main navigation on a page.
Use breadcrumbs for nested navigation, with each item acting as a link. They show the hierarchical progress from the highest item level to the lowest, one step at a time. This typically starts with the app landing page and goes to the current page or content.
Parts
- Item name: The section or page within the app, usually a link.
- Separator: The separator is positioned between each item in the list. It provides visual
distinction between individual links using the same font as the rest of the breadcrumbs. Usually
a forward slash symbol
/. - Icon or avatar (optional): Some links may have an icon or avatar before or after the corresponding page title.
Accessibility
- Separators should have the same level of color contrast as the surrounding text.
- Separator characters should not be announced by screen readers.
- When additional breadcrumbs are collapsed into an ellipses, this is treated as a single list item for assistive technologies. The default label is ‘Show more breadcrumbs’.
- Use
isNavigation={false}for any instances of breadcrumbs that aren't used for main navigation areas, like a listing of search results, to reduce noise for users of assistive technologies. - Make sure your breadcrumb items reflect the page or app section titles exactly for screen readers.
Best practices
- Use breadcrumbs when the user is most likely to have landed on the page from an external source.
- Use for large websites and complex apps that have hierarchically arranged pages, so that users who land on the page can quickly know where they are.
- In apps, breadcrumbs can adapt to the state of navigation by being toggled on, off, or auto-collapsing.
- Make sure breadcrumbs don’t visually overwhelm the page.
- Place breadcrumbs at the top left corner of the screen, above the page title.
- In app, avoid using the topmost level of the hierarchy unless the navigation sidebar is collapsed.
Data Center apps
For all new features, we recommend using Atlassian Design System and other Atlaskit components, (opens new window). For existing code, you can continue to use Atlassian User Interface (AUI), (opens new window).
- Use a button to indicate an event, action or next step.