Updated: September 15, 2016

Breadcrumb

Intro

The breadcrumb is a navigation control that shows the navigation path for the currently displayed object. It is used in editors.

All levels besides the currently viewed level are  links.

By clicking a link, users navigate back to the corresponding object in the hierarchy.

If there is not enough space to show the full breadcrumb, it changes automatically to a dropdown control. In this case, the breadcrumb shows only the immediate parent of the current item. The  symbol indicates that further information is available in a list and users can navigate back to other levels through that list. The dropdown list reveals all the links in the breadcrumb chain. The user reads the breadcrumb from bottom to top: the root object is at the bottom of the list, the immediate parent is at the top, and the current item is selected.

Do

  • Use breadcrumb navigation only where there is a hierarchical drilldown from the editor content. For example, from a diagram or a table in the Diagram Editor, or from the outline tree in the Layout Editor.
  • Name each level according to the object that the user will see when navigating to the
  • Use breadcrumb navigation only in the editor toolbar and locate it on the left side of the editor tool bar.

Don’t

  • Don’t show the current level as a link.