0
# Navigation Components
1

2
Components for creating navigation structures, user flows, and application routing interfaces.
3

4
## Capabilities
5

6
### App Navigation
7

8
Primary application navigation components for headers, sidebars, and main navigation structures.
9

10
```typescript { .api }
11
/** Application top bar component with Material Design styling */
12
const VAppBar: Component;
13

14
/** Side navigation drawer with sliding functionality */
15
const VNavigationDrawer: Component;
16

17
/** Bottom navigation bar for mobile-first navigation */
18
const VBottomNavigation: Component;
19

20
/** Application toolbar component */
21
const VToolbar: Component;
22

23
/** System status bar component */
24
const VSystemBar: Component;
25
```
26

27
**Usage Examples:**
28

29
```typescript
30
// App bar with navigation
31
<template>
32
  <v-app-bar>
33
    <v-app-bar-nav-icon @click="drawer = !drawer" />
34
    <v-toolbar-title>My App</v-toolbar-title>
35
    <v-spacer />
36
    <v-btn icon="mdi-magnify" />
37
    <v-btn icon="mdi-heart" />
38
    <v-btn icon="mdi-dots-vertical" />
39
  </v-app-bar>
40
</template>
41

42
// Navigation drawer
43
<template>
44
  <v-navigation-drawer v-model="drawer" :rail="rail">
45
    <v-list>
46
      <v-list-item
47
        v-for="item in items"
48
        :key="item.title"
49
        :prepend-icon="item.icon"
50
        :title="item.title"
51
        :to="item.route"
52
      />
53
    </v-list>
54
  </v-navigation-drawer>
55
</template>
56

57
// Bottom navigation
58
<template>
59
  <v-bottom-navigation v-model="activeTab">
60
    <v-btn value="home">
61
      <v-icon>mdi-home</v-icon>
62
      Home
63
    </v-btn>
64
    <v-btn value="search">
65
      <v-icon>mdi-magnify</v-icon>
66
      Search
67
    </v-btn>
68
    <v-btn value="profile">
69
      <v-icon>mdi-account</v-icon>
70
      Profile
71
    </v-btn>
72
  </v-bottom-navigation>
73
</template>
74
```
75

76
### Tab Navigation
77

78
Tab-based navigation components for organizing content into distinct sections.
79

80
```typescript { .api }
81
/** Tab navigation component with Material Design styling */
82
const VTabs: Component;
83

84
/** Individual tab item component */
85
const VTab: Component;
86

87
/** Tab content window container */
88
const VWindow: Component;
89

90
/** Individual tab content panel */
91
const VWindowItem: Component;
92
```
93

94
**Usage Examples:**
95

96
```typescript
97
// Tabs with content windows
98
<template>
99
  <div>
100
    <v-tabs v-model="activeTab" bg-color="primary">
101
      <v-tab value="tab1">Tab 1</v-tab>
102
      <v-tab value="tab2">Tab 2</v-tab>
103
      <v-tab value="tab3">Tab 3</v-tab>
104
    </v-tabs>
105
    
106
    <v-window v-model="activeTab">
107
      <v-window-item value="tab1">
108
        <v-container>Tab 1 content</v-container>
109
      </v-window-item>
110
      <v-window-item value="tab2">
111
        <v-container>Tab 2 content</v-container>
112
      </v-window-item>
113
      <v-window-item value="tab3">
114
        <v-container>Tab 3 content</v-container>
115
      </v-window-item>
116
    </v-window>
117
  </div>
118
</template>
119

120
// Vertical tabs
121
<template>
122
  <v-tabs direction="vertical" v-model="activeTab">
123
    <v-tab value="overview">Overview</v-tab>
124
    <v-tab value="details">Details</v-tab>
125
    <v-tab value="settings">Settings</v-tab>
126
  </v-tabs>
127
</template>
128
```
129

130
### Breadcrumb Navigation
131

132
Hierarchical navigation showing the user's location within the application structure.
133

134
```typescript { .api }
135
/** Breadcrumb navigation component showing hierarchical path */
136
const VBreadcrumbs: Component;
137

138
/** Individual breadcrumb item component */
139
const VBreadcrumbsItem: Component;
140

141
/** Breadcrumb divider component */
142
const VBreadcrumbsDivider: Component;
143
```
144

145
**Usage Examples:**
146

147
```typescript
148
// Basic breadcrumbs
149
<template>
150
  <v-breadcrumbs :items="breadcrumbItems">
151
    <template #divider>
152
      <v-icon>mdi-chevron-right</v-icon>
153
    </template>
154
  </v-breadcrumbs>
155
</template>
156

157
<script setup>
158
const breadcrumbItems = [
159
  { title: 'Home', to: '/' },
160
  { title: 'Products', to: '/products' },
161
  { title: 'Electronics', to: '/products/electronics' },
162
  { title: 'Laptops', disabled: true },
163
];
164
</script>
165

166
// Custom breadcrumb styling
167
<template>
168
  <v-breadcrumbs>
169
    <v-breadcrumbs-item>
170
      <v-icon>mdi-home</v-icon>
171
    </v-breadcrumbs-item>
172
    <v-breadcrumbs-divider>/</v-breadcrumbs-divider>
173
    <v-breadcrumbs-item>Category</v-breadcrumbs-item>
174
    <v-breadcrumbs-divider>/</v-breadcrumbs-divider>
175
    <v-breadcrumbs-item>Current Page</v-breadcrumbs-item>
176
  </v-breadcrumbs>
177
</template>
178
```
179

180
### Menu Navigation
181

182
Context menus and dropdown navigation components.
183

184
```typescript { .api }
185
/** Context/dropdown menu component */
186
const VMenu: Component;
187

188
/** Menu list container */
189
const VList: Component;
190

191
/** Individual menu list item */
192
const VListItem: Component;
193

194
/** List item group for selection */
195
const VListGroup: Component;
196

197
/** List item header/subheader */
198
const VListSubheader: Component;
199
```
200

201
**Usage Examples:**
202

203
```typescript
204
// Dropdown menu
205
<template>
206
  <v-menu>
207
    <template #activator="{ props }">
208
      <v-btn v-bind="props">
209
        Menu
210
        <v-icon end>mdi-menu-down</v-icon>
211
      </v-btn>
212
    </template>
213
    
214
    <v-list>
215
      <v-list-item
216
        v-for="item in menuItems"
217
        :key="item.title"
218
        :prepend-icon="item.icon"
219
        :title="item.title"
220
        @click="item.action"
221
      />
222
    </v-list>
223
  </v-menu>
224
</template>
225

226
// Context menu
227
<template>
228
  <div>
229
    <v-menu
230
      v-model="contextMenu"
231
      :position-x="contextMenuX"
232
      :position-y="contextMenuY"
233
      absolute
234
    >
235
      <v-list>
236
        <v-list-item @click="copy">
237
          <v-list-item-title>Copy</v-list-item-title>
238
        </v-list-item>
239
        <v-list-item @click="paste">
240
          <v-list-item-title>Paste</v-list-item-title>
241
        </v-list-item>
242
      </v-list>
243
    </v-menu>
244
    
245
    <div @contextmenu="showContextMenu">
246
      Right-click me
247
    </div>
248
  </div>
249
</template>
250
```
251

252
### Stepper Navigation
253

254
Step-by-step navigation for multi-step processes and wizards.
255

256
```typescript { .api }
257
/** Step-by-step wizard component */
258
const VStepper: Component;
259

260
/** Stepper header containing step indicators */
261
const VStepperHeader: Component;
262

263
/** Individual step indicator */
264
const VStepperItem: Component;
265

266
/** Stepper content window container */
267
const VStepperWindow: Component;
268

269
/** Individual step content panel */
270
const VStepperWindowItem: Component;
271

272
/** Stepper actions container */
273
const VStepperActions: Component;
274
```
275

276
**Usage Examples:**
277

278
```typescript
279
// Linear stepper
280
<template>
281
  <v-stepper v-model="currentStep">
282
    <v-stepper-header>
283
      <v-stepper-item
284
        :complete="currentStep > 1"
285
        step="1"
286
        title="Select campaign settings"
287
      />
288
      <v-divider />
289
      <v-stepper-item
290
        :complete="currentStep > 2"
291
        step="2"
292
        title="Create an ad group"
293
      />
294
      <v-divider />
295
      <v-stepper-item
296
        step="3"
297
        title="Create an ad"
298
      />
299
    </v-stepper-header>
300

301
    <v-stepper-window v-model="currentStep">
302
      <v-stepper-window-item :value="1">
303
        <v-card>
304
          <v-card-text>Step 1 content</v-card-text>
305
        </v-card>
306
      </v-stepper-window-item>
307
      <v-stepper-window-item :value="2">
308
        <v-card>
309
          <v-card-text>Step 2 content</v-card-text>
310
        </v-card>
311
      </v-stepper-window-item>
312
      <v-stepper-window-item :value="3">
313
        <v-card>
314
          <v-card-text>Step 3 content</v-card-text>
315
        </v-card>
316
      </v-stepper-window-item>
317
    </v-stepper-window>
318

319
    <v-stepper-actions
320
      @click:next="nextStep"
321
      @click:prev="prevStep"
322
    />
323
  </v-stepper>
324
</template>
325

326
// Non-linear stepper
327
<template>
328
  <v-stepper v-model="currentStep" non-linear>
329
    <v-stepper-header>
330
      <v-stepper-item
331
        v-for="step in steps"
332
        :key="step.value"
333
        :complete="step.complete"
334
        :step="step.value"
335
        :title="step.title"
336
        :editable="step.editable"
337
      />
338
    </v-stepper-header>
339
  </v-stepper>
340
</template>
341
```
342

343
### Pagination Navigation
344

345
Page-based navigation for large data sets and content collections.
346

347
```typescript { .api }
348
/** Pagination navigation component */
349
const VPagination: Component;
350
```
351

352
**Usage Examples:**
353

354
```typescript
355
// Basic pagination
356
<template>
357
  <v-pagination
358
    v-model="currentPage"
359
    :length="totalPages"
360
    @update:model-value="loadPage"
361
  />
362
</template>
363

364
// Pagination with custom styling
365
<template>
366
  <v-pagination
367
    v-model="page"
368
    :length="pageCount"
369
    :total-visible="7"
370
    color="primary"
371
    variant="elevated"
372
    density="comfortable"
373
  />
374
</template>
375

376
// Pagination with previous/next buttons
377
<template>
378
  <v-pagination
379
    v-model="page"
380
    :length="pages"
381
    prev-icon="mdi-menu-left"
382
    next-icon="mdi-menu-right"
383
  />
384
</template>
385
```
386

387
## Types
388

389
```typescript { .api }
390
// Navigation-related types
391
interface NavigationItem {
392
  title: string;
393
  icon?: string;
394
  to?: string;
395
  href?: string;
396
  target?: string;
397
  exact?: boolean;
398
  disabled?: boolean;
399
  children?: NavigationItem[];
400
}
401

402
interface BreadcrumbItem {
403
  title: string;
404
  to?: string;
405
  href?: string;
406
  disabled?: boolean;
407
  exact?: boolean;
408
}
409

410
interface StepperStep {
411
  value: number;
412
  title: string;
413
  subtitle?: string;
414
  complete?: boolean;
415
  editable?: boolean;
416
  error?: boolean;
417
  icon?: string;
418
}
419

420
// Tab-related types
421
interface TabItem {
422
  title: string;
423
  value: any;
424
  disabled?: boolean;
425
  href?: string;
426
  to?: string;
427
  icon?: string;
428
  prependIcon?: string;
429
  appendIcon?: string;
430
}
431

432
// Menu-related types
433
interface MenuItem {
434
  title: string;
435
  value?: any;
436
  props?: Record<string, any>;
437
  children?: MenuItem[];
438
}
439
```