Skip to content

Commit f9c0e89

Browse files
committed
feat(0): add createBreadcrumbs composable
Lightweight breadcrumb navigation composable with: - Path manipulation (push, pop, select, replace) - Navigation methods (first, prev) - Automatic collapse with ellipsis for long paths - v-model support via ref passthrough - Trinity pattern for dependency injection Includes documentation page and 37 tests.
1 parent 86e0ff2 commit f9c0e89

File tree

7 files changed

+905
-9
lines changed

7 files changed

+905
-9
lines changed

.claude/rules/components.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,3 +95,24 @@ export * from './SelectionRoot.vue'
9595
export type { SelectionRootProps, SelectionRootSlotProps } from './SelectionRoot.vue'
9696
export { default as SelectionRoot } from './SelectionRoot.vue'
9797
```
98+
99+
## Z-Index and Layering
100+
101+
When implementing z-index or layering changes:
102+
103+
1. **Verify stacking context** by testing visually in browser
104+
2. **Overlays must appear above content** they're meant to cover, not behind
105+
3. **Check parent stacking contexts** — a high z-index inside a low context won't escape
106+
4. **Document z-index values** used in component comments
107+
108+
**Common issues:**
109+
- Scrim appearing over dialog content instead of behind
110+
- Popovers clipped by overflow:hidden parents
111+
- Multiple overlays fighting for top layer
112+
113+
**Verification checklist for overlay components:**
114+
- [ ] Overlay covers intended content
115+
- [ ] Scrim appears behind modal content
116+
- [ ] Focus trap works correctly
117+
- [ ] Escape key dismisses in correct order
118+
- [ ] Nested overlays stack correctly
Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
title: createBreadcrumbs - Lightweight Path Navigation for Vue 3
3+
meta:
4+
- name: description
5+
content: Lightweight composable for breadcrumb navigation state. Includes path manipulation methods (push, pop, select), computed visible items with collapse, and v-model binding for Vue 3.
6+
- name: keywords
7+
content: createBreadcrumbs, breadcrumbs, navigation, composable, Vue 3, path, trail, hierarchy
8+
features:
9+
category: Composable
10+
label: 'E: createBreadcrumbs'
11+
github: /composables/createBreadcrumbs/
12+
level: 2
13+
related:
14+
- /composables/utilities/create-pagination
15+
---
16+
17+
# createBreadcrumbs
18+
19+
A composable for managing breadcrumb navigation state with path manipulation methods and automatic collapse of middle items when paths get long.
20+
21+
<DocsPageFeatures :frontmatter />
22+
23+
## Usage
24+
25+
The `createBreadcrumbs` composable provides reactive breadcrumb state management with navigation methods and automatic computation of visible items with ellipsis support for long paths.
26+
27+
```ts collapse
28+
import { createBreadcrumbs } from '@vuetify/v0'
29+
30+
const breadcrumbs = createBreadcrumbs({ visible: 4 })
31+
32+
breadcrumbs.register({ text: 'Home' })
33+
breadcrumbs.register({ text: 'Products' })
34+
breadcrumbs.register({ text: 'Electronics' })
35+
breadcrumbs.register({ text: 'Phones' })
36+
breadcrumbs.register({ text: 'iPhone' })
37+
38+
console.log(breadcrumbs.tickets.value)
39+
// [
40+
// { type: 'crumb', value: { text: 'Home', ... }, index: 0 },
41+
// { type: 'ellipsis', value: '…', collapsed: [...] },
42+
// { type: 'crumb', value: { text: 'Phones', ... }, index: 3 },
43+
// { type: 'crumb', value: { text: 'iPhone', ... }, index: 4 }
44+
// ]
45+
46+
// Navigate back
47+
breadcrumbs.prev() // removes iPhone, selects Phones
48+
breadcrumbs.first() // truncates to Home
49+
```
50+
51+
## Architecture
52+
53+
`createBreadcrumbs` manages a path array with automatic collapse:
54+
55+
```mermaid "Breadcrumbs Flow"
56+
flowchart LR
57+
items --> depth
58+
items --> tickets[visible tickets]
59+
visible --> tickets
60+
ellipsis --> tickets
61+
depth --> isRoot
62+
depth --> isEmpty
63+
```
64+
65+
<DocsApi />

apps/docs/src/typed-router.d.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -415,6 +415,13 @@ declare module 'vue-router/auto-routes' {
415415
Record<never, never>,
416416
| never
417417
>,
418+
'/composables/utilities/create-breadcrumbs': RouteRecordInfo<
419+
'/composables/utilities/create-breadcrumbs',
420+
'/composables/utilities/create-breadcrumbs',
421+
Record<never, never>,
422+
Record<never, never>,
423+
| never
424+
>,
418425
'/composables/utilities/create-filter': RouteRecordInfo<
419426
'/composables/utilities/create-filter',
420427
'/composables/utilities/create-filter',
@@ -1009,6 +1016,12 @@ declare module 'vue-router/auto-routes' {
10091016
views:
10101017
| never
10111018
}
1019+
'src/pages/composables/utilities/create-breadcrumbs.md': {
1020+
routes:
1021+
| '/composables/utilities/create-breadcrumbs'
1022+
views:
1023+
| never
1024+
}
10121025
'src/pages/composables/utilities/create-filter.md': {
10131026
routes:
10141027
| '/composables/utilities/create-filter'

0 commit comments

Comments
 (0)