> For the complete documentation index, see [llms.txt](https://docs.quantumbyte.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/6.breadcumb.md).

# Breadcumbs

### Breadcrumbs Props <a href="#breadcrumbs-props" id="breadcrumbs-props"></a>

| Name             | Type   | Default        | Description                 |
| ---------------- | ------ | -------------- | --------------------------- |
| component        | string | 'div'          | Component's HTML Element    |
| fontSizeIos      | string | 'text-\[17px]' | Font size in iOS theme      |
| fontSizeMaterial | string | 'text-\[14px]' | Font size in Material theme |

### BreadcrumbsItem Props

| Name                      | Type    | Default                                                                         | Description                                                                |
| ------------------------- | ------- | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| active                    | boolean | false                                                                           | Marks breadcrumb item as active/current (usually last item in breadcrumbs) |
| colors                    | object  |                                                                                 | Object with Tailwind CSS colors classes                                    |
| colors.bgIos              | string  | ''                                                                              |                                                                            |
| colors.bgMaterial         | string  | 'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'           |                                                                            |
| colors.textActiveIos      | string  | 'text-black dark:text-white'                                                    |                                                                            |
| colors.textActiveMaterial | string  | 'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container' |                                                                            |
| colors.textIos            | string  | 'text-black text-opacity-55 dark:text-white dark:text-opacity-55'               |                                                                            |
| colors.textMaterial       | string  | 'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container' |                                                                            |
| component                 | string  | 'div'                                                                           | Component's HTML Element                                                   |

### BreadcrumbsCollapsed Props

| Name                 | Type   | Default                                                               | Description                             |
| -------------------- | ------ | --------------------------------------------------------------------- | --------------------------------------- |
| colors               | object |                                                                       | Object with Tailwind CSS colors classes |
| colors.bgIos         | string | 'bg-black bg-opacity-15 dark:bg-white dark:bg-opacity-15'             |                                         |
| colors.bgMaterial    | string | 'bg-md-light-secondary-container dark:bg-md-dark-secondary-container' |                                         |
| colors.dotBgIos      | string | 'bg-black dark:bg-white'                                              |                                         |
| colors.dotBgMaterial | string | 'bg-md-light-primary dark:bg-md-dark-primary'                         |                                         |
| component            | string | 'div'                                                                 | Component's HTML Element                |

### Examples

{% tabs %}
{% tab title="Vue" %}

```typescript
<template>
  <i-page>
    <i-navbar title="Breadcrumbs" />

    <i-block strong inset>
      <p>
        Breadcrumbs allow users to ieep track and maintain awareness of their
        locations within the app or website. They should be used for large sites
        and apps with hierarchically arranged pages.
      </p>
    </i-block>

    <i-block-title>Basic</i-block-title>
    <i-block strong-ios outline-ios>
      <i-breadcrumbs>
        <i-breadcrumbs-item>
          <i-link>Home</i-link>
        </i-breadcrumbs-item>
        <i-breadcrumbs-separator />
        <i-breadcrumbs-item>
          <i-link>Catalog</i-link>
        </i-breadcrumbs-item>
        <i-breadcrumbs-separator />
        <i-breadcrumbs-item active>Phones</i-breadcrumbs-item>
      </i-breadcrumbs>
    </i-block>

    <i-block-title>Scrollable</i-block-title>
    <i-block-header
      >Breadcrumbs will be scrollable if they don't fit the
      screen</i-block-header
    >
    <i-block strong-ios outline-ios>
      <i-breadcrumbs>
        <i-breadcrumbs-item>
          <i-link>Home</i-link>
        </i-breadcrumbs-item>
        <i-breadcrumbs-separator />
        <i-breadcrumbs-item>
          <i-link>Catalog</i-link>
        </i-breadcrumbs-item>
        <i-breadcrumbs-separator />
        <i-breadcrumbs-item>
          <i-link>Phones</i-link>
        </i-breadcrumbs-item>
        <i-breadcrumbs-separator />
        <i-breadcrumbs-item>
          <i-link>Apple</i-link>
        </i-breadcrumbs-item>
        <i-breadcrumbs-separator />
        <i-breadcrumbs-item active>iPhone 12</i-breadcrumbs-item>
      </i-breadcrumbs>
    </i-block>

    <i-block-title>Collapsed</i-block-title>
    <i-block strong-ios outline-ios>
      <i-breadcrumbs>
        <i-breadcrumbs-item>
          <i-link>Home</i-link>
        </i-breadcrumbs-item>
        <i-breadcrumbs-separator />
        <i-breadcrumbs-collapsed
          ref="popoverTargetRef"
          @click="() => (popoverOpened = true)"
        />

        <i-breadcrumbs-separator />
        <i-breadcrumbs-item active>iPhone 12</i-breadcrumbs-item>
      </i-breadcrumbs>
    </i-block>
    <i-popover
      :opened="popoverOpened"
      :target="popoverTargetRef"
      style="width: 120px"
      @backdropclick="() => (popoverOpened = false)"
    >
      <i-list nested>
        <i-list-item
          link
          title="Catalog"
          @click="() => (popoverOpened = false)"
        />
        <i-list-item
          link
          title="Phones"
          @click="() => (popoverOpened = false)"
        />
        <i-list-item
          link
          title="Apple"
          @click="() => (popoverOpened = false)"
        />
      </i-list>
    </i-popover>
  </i-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iLink,
    iBlock,
    iBlockTitle,
    iBlockHeader,
    iBreadcrumbs,
    iBreadcrumbsItem,
    iBreadcrumbsSeparator,
    iBreadcrumbsCollapsed,
    iPopover,
    iList,
    iListItem,
  } from 'ina-ui/vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iLink,
      iBlock,
      iBlockTitle,
      iBlockHeader,
      iBreadcrumbs,
      iBreadcrumbsItem,
      iBreadcrumbsSeparator,
      iBreadcrumbsCollapsed,
      iPopover,
      iList,
      iListItem,
    },
    setup() {
      const popoverOpened = ref(false);
      const popoverTargetRef = ref(null);
      return {
        popoverOpened,
        popoverTargetRef,
      };
    },
  };
</script>
```

{% endtab %}

{% tab title="React" %}

```js
import React, { useRef, useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  BlockTitle,
  BlockHeader,
  Block,
  Breadcrumbs,
  BreadcrumbsItem,
  BreadcrumbsSeparator,
  BreadcrumbsCollapsed,
  Popover,
  List,
  ListItem,
  Link,
} from 'ina-ui/react';

export default function BreadcrumbsPage() {
  const isPreview = document.location.href.includes('examplePreview');

  const popoverTargetRef = useRef(null);
  const [popoverOpened, setPopoverOpened] = useState(false);
  return (
    <Page>
      <Navbar
        title="Breadcrumbs"
        />

      <Block strong inset>
        Breadcrumbs allow users to ieep track and maintain awareness of their
        locations within the app or website. They should be used for large sites
        and apps with hierarchically arranged pages.
      </Block>

      <BlockTitle>Basic</BlockTitle>
      <Block strongIos outlineIos>
        <Breadcrumbs>
          <BreadcrumbsItem>
            <Link>Home</Link>
          </BreadcrumbsItem>
          <BreadcrumbsSeparator />
          <BreadcrumbsItem>
            <Link>Catalog</Link>
          </BreadcrumbsItem>
          <BreadcrumbsSeparator />
          <BreadcrumbsItem active>Phones</BreadcrumbsItem>
        </Breadcrumbs>
      </Block>

      <BlockTitle>Scrollable</BlockTitle>
      <BlockHeader>
        Breadcrumbs will be scrollable if they don't fit the screen
      </BlockHeader>
      <Block strongIos outlineIos>
        <Breadcrumbs>
          <BreadcrumbsItem>
            <Link>Home</Link>
          </BreadcrumbsItem>
          <BreadcrumbsSeparator />
          <BreadcrumbsItem>
            <Link>Catalog</Link>
          </BreadcrumbsItem>
          <BreadcrumbsSeparator />
          <BreadcrumbsItem>
            <Link>Phones</Link>
          </BreadcrumbsItem>
          <BreadcrumbsSeparator />
          <BreadcrumbsItem>
            <Link>Apple</Link>
          </BreadcrumbsItem>
          <BreadcrumbsSeparator />
          <BreadcrumbsItem active>iPhone 12</BreadcrumbsItem>
        </Breadcrumbs>
      </Block>

      <BlockTitle>Collapsed</BlockTitle>
      <Block strongIos outlineIos>
        <Breadcrumbs>
          <BreadcrumbsItem>
            <Link>Home</Link>
          </BreadcrumbsItem>
          <BreadcrumbsSeparator />
          <BreadcrumbsCollapsed
            ref={popoverTargetRef}
            onClick={() => setPopoverOpened(true)}
          />
          <BreadcrumbsSeparator />
          <BreadcrumbsItem active>iPhone 12</BreadcrumbsItem>
        </Breadcrumbs>
      </Block>

      <Popover
        opened={popoverOpened}
        className="breadcrumbs-popover"
        style={{ width: '120px' }}
        target={popoverTargetRef.current}
        onBackdropClick={() => setPopoverOpened(false)}
      >
        <List nested>
          <ListItem
            link
            title="Catalog"
            onClick={() => setPopoverOpened(false)}
          />
          <ListItem
            link
            title="Phones"
            onClick={() => setPopoverOpened(false)}
          />
          <ListItem
            link
            title="Apple"
            onClick={() => setPopoverOpened(false)}
          />
        </List>
      </Popover>
    </Page>
  );
}
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/6.breadcumb.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.