import Props from '@ionic-internal/component-api/v8/breadcrumbs/props.md'; import Events from '@ionic-internal/component-api/v8/breadcrumbs/events.md'; import Methods from '@ionic-internal/component-api/v8/breadcrumbs/methods.md'; import Parts from '@ionic-internal/component-api/v8/breadcrumbs/parts.md'; import CustomProps from '@ionic-internal/component-api/v8/breadcrumbs/custom-props.mdx'; import Slots from '@ionic-internal/component-api/v8/breadcrumbs/slots.md';

import EncapsulationPill from '@components/page/api/EncapsulationPill';

Breadcrumbs are navigation items that are used to indicate where a user is on an app or site. They should be used for large sites and apps with hierarchically arranged pages. Breadcrumbs can be collapsed based on the maximum number that can show, and the collapsed indicator can be clicked on to present a popover with more information or expand the collapsed breadcrumbs.

import Basic from '@site/static/usage/v8/breadcrumbs/basic/index.md';

import IconsOnItems from '@site/static/usage/v8/breadcrumbs/icons/icons-on-items/index.md';

import CustomSeparators from '@site/static/usage/v8/breadcrumbs/icons/custom-separators/index.md';

If there are more items than the value of maxItems, the breadcrumbs will be collapsed. By default, only the first and last items will be shown.

import MaxItems from '@site/static/usage/v8/breadcrumbs/collapsing-items/max-items/index.md';

Once the items are collapsed, the number of items to show can be controlled by the itemsBeforeCollapse and itemsAfterCollapse properties.

import ItemsBeforeAfter from '@site/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/index.md';

Clicking the collapsed indicator will fire the ionCollapsedClick event. This can be used to, for example, expand the breadcrumbs.

import ExpandOnClick from '@site/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/index.md';

The ionCollapsedClick event can also be used to present an overlay (in this case, an ion-popover) showing the hidden breadcrumbs.

import PopoverOnClick from '@site/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/index.md';

import Colors from '@site/static/usage/v8/breadcrumbs/theming/colors/index.md';

import CSSProps from '@site/static/usage/v8/breadcrumbs/theming/css-properties/index.md';