mirror of
https://github.com/directus/directus.git
synced 2026-01-30 13:58:05 -05:00
36 lines
1.5 KiB
Markdown
36 lines
1.5 KiB
Markdown
# Breadcrumb
|
|
|
|
A breadcrumb can help you display on what site you are currently on by displaying a structure like `my / custom / page`.
|
|
|
|
```html
|
|
<v-breadcrumb :items="[{name: 'Collections', to: '/collections'}]" />
|
|
```
|
|
|
|
## Breadcrumb Item
|
|
|
|
An item for the items prop has these 4 options:
|
|
|
|
| Prop | Description |
|
|
| ---------- | --------------------------------------------------------- |
|
|
| `to` | The reroute link |
|
|
| `name` | The name which will be displayed |
|
|
| `icon` | Displays an icon with the given name in front of the name |
|
|
| `disabled` | If the router link should be clickable |
|
|
|
|
## Reference
|
|
|
|
#### Props
|
|
|
|
| Prop | Description | Default | Type |
|
|
| ------- | -------------------------------------------------------- | ---------- | -------------- |
|
|
| `items` | An array of objects which information about each section | `() => []` | `Breadcrumb[]` |
|
|
|
|
#### CSS Variables
|
|
|
|
| Variable | Default |
|
|
| ------------------------------- | --------------------------- |
|
|
| `--v-breadcrumb-color` | `var(--foreground-subdued)` |
|
|
| `--v-breadcrumb-color-hover` | `var(--foreground-normal)` |
|
|
| `--v-breadcrumb-color-disabled` | `var(--foreground-subdued)` |
|
|
| `--v-breadcrumb-divider-color` | `var(--foreground-subdued)` |
|