---
url: "https://vueda.dev/v3/reference/theming/keys/BreadcrumbEllipsis.md"
title: "BreadcrumbEllipsis"
---

# BreadcrumbEllipsis

Source: `client/lib/theme/vueda-tailwind/navigation/index.js`

> Collapsed-step marker. The `interactive` state turns it into the dropdown trigger shape.

Vue component: [BreadcrumbEllipsis](/v3/reference/api/vue/BreadcrumbEllipsis.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/BreadcrumbEllipsis.md#theme-key-BreadcrumbEllipsis-root) | callback | Collapsed-step marker. The `interactive` state turns it into the dropdown trigger shape. |
| [label](/v3/reference/theming/keys/BreadcrumbEllipsis.md#theme-key-BreadcrumbEllipsis-label) | `sr-only` | Screen-reader text for the collapsed-step marker. |

<a id="theme-key-BreadcrumbEllipsis-root"></a>

## root

> Collapsed-step marker. The `interactive` state turns it into the dropdown trigger shape.

Callback:

```javascript
({ interactive }) => ({
            class: [
                "flex size-7 items-center justify-center",
                interactive &&
                    "cursor-pointer rounded-vueda-control transition-colors hover:bg-accent hover:text-foreground active:bg-accent-active focus-visible:focus-ring",
            ],
        })
```

Source: `client/lib/theme/vueda-tailwind/navigation/BreadcrumbEllipsis.theme.js:16`

<a id="theme-key-BreadcrumbEllipsis-label"></a>

## label

> Screen-reader text for the collapsed-step marker.

Default classes:

`sr-only`

Source: `client/lib/theme/vueda-tailwind/navigation/BreadcrumbEllipsis.theme.js:24`