0
# Navigation Components
1

2
Navigation and routing components including tabs, navigation bars, pagination, and sidebar navigation.
3

4
## Capabilities
5

6
### NavBar
7

8
Navigation bar component for page headers with title and navigation controls.
9

10
```typescript { .api }
11
import { NavBar } from 'vant';
12

13
interface NavBarProps {
14
  /** Page title */
15
  title?: string;
16
  /** Left text */
17
  leftText?: string;
18
  /** Right text */
19
  rightText?: string;
20
  /** Left arrow */
21
  leftArrow?: boolean;
22
  /** Left disabled */
23
  leftDisabled?: boolean;
24
  /** Right disabled */
25
  rightDisabled?: boolean;
26
  /** Fixed position */
27
  fixed?: boolean;
28
  /** Placeholder */
29
  placeholder?: boolean;
30
  /** Z index */
31
  zIndex?: number | string;
32
  /** Safe area inset top */
33
  safeAreaInsetTop?: boolean;
34
  /** Clickable */
35
  clickable?: boolean;
36
}
37
```
38

39
### Tab & Tabs
40

41
Tab navigation component for organizing content in multiple panels.
42

43
```typescript { .api }
44
import { Tab, Tabs } from 'vant';
45

46
interface TabsProps {
47
  /** Active tab */
48
  modelValue?: string | number;
49
  /** Tab type */
50
  type?: 'line' | 'card';
51
  /** Tab color */
52
  color?: string;
53
  /** Background color */
54
  background?: string;
55
  /** Duration */
56
  duration?: number;
57
  /** Line width */
58
  lineWidth?: number | string;
59
  /** Line height */
60
  lineHeight?: number | string;
61
  /** Animated */
62
  animated?: boolean;
63
  /** Border */
64
  border?: boolean;
65
  /** Ellipsis */
66
  ellipsis?: boolean;
67
  /** Sticky */
68
  sticky?: boolean;
69
  /** Swipeable */
70
  swipeable?: boolean;
71
  /** Lazy render */
72
  lazyRender?: boolean;
73
  /** Scrollspy */
74
  scrollspy?: boolean;
75
  /** Offset top */
76
  offsetTop?: number | string;
77
  /** Swipe threshold */
78
  swipeThreshold?: number | string;
79
  /** Title active color */
80
  titleActiveColor?: string;
81
  /** Title inactive color */
82
  titleInactiveColor?: string;
83
}
84

85
interface TabProps {
86
  /** Tab title */
87
  title?: string;
88
  /** Tab name */
89
  name?: string | number;
90
  /** Badge content */
91
  badge?: string | number;
92
  /** Show badge dot */
93
  dot?: boolean;
94
  /** Disabled state */
95
  disabled?: boolean;
96
  /** Title slot */
97
  titleSlot?: string;
98
  /** Title class */
99
  titleClass?: string;
100
  /** Title style */
101
  titleStyle?: string | object;
102
  /** Show zero badge */
103
  showZeroBadge?: boolean;
104
}
105
```
106

107
### Tabbar & TabbarItem
108

109
Bottom tab bar component for primary navigation.
110

111
```typescript { .api }
112
import { Tabbar, TabbarItem } from 'vant';
113

114
interface TabbarProps {
115
  /** Active tab */
116
  modelValue?: string | number;
117
  /** Fixed position */
118
  fixed?: boolean;
119
  /** Border */
120
  border?: boolean;
121
  /** Z index */
122
  zIndex?: number | string;
123
  /** Active color */
124
  activeColor?: string;
125
  /** Inactive color */
126
  inactiveColor?: string;
127
  /** Route */
128
  route?: boolean;
129
  /** Before change */
130
  beforeChange?: (name: string | number) => boolean | Promise<boolean>;
131
  /** Placeholder */
132
  placeholder?: boolean;
133
  /** Safe area inset bottom */
134
  safeAreaInsetBottom?: boolean;
135
}
136

137
interface TabbarItemProps {
138
  /** Tab name */
139
  name?: string | number;
140
  /** Icon name */
141
  icon?: string;
142
  /** Icon prefix */
143
  iconPrefix?: string;
144
  /** Badge content */
145
  badge?: string | number;
146
  /** Show badge dot */
147
  dot?: boolean;
148
  /** Route info */
149
  to?: string | object;
150
  /** Replace route */
151
  replace?: boolean;
152
}
153
```
154

155
### Pagination
156

157
Pagination component for dividing content across multiple pages.
158

159
```typescript { .api }
160
import { Pagination } from 'vant';
161

162
interface PaginationProps {
163
  /** Current page */
164
  modelValue?: number;
165
  /** Page mode */
166
  mode?: 'multi' | 'simple';
167
  /** Previous text */
168
  prevText?: string;
169
  /** Next text */
170
  nextText?: string;
171
  /** Page count */
172
  pageCount?: number | string;
173
  /** Total items */
174
  totalItems?: number | string;
175
  /** Items per page */
176
  itemsPerPage?: number | string;
177
  /** Show page size */
178
  showPageSize?: number | string;
179
  /** Force ellipses */
180
  forceEllipses?: boolean;
181
}
182
```
183

184
### IndexBar & IndexAnchor
185

186
Index bar component for quick navigation through sorted lists.
187

188
```typescript { .api }
189
import { IndexBar, IndexAnchor } from 'vant';
190

191
interface IndexBarProps {
192
  /** Index list */
193
  indexList?: string[] | number[];
194
  /** Z index */
195
  zIndex?: number | string;
196
  /** Sticky */
197
  sticky?: boolean;
198
  /** Sticky offset top */
199
  stickyOffsetTop?: number;
200
  /** Highlight color */
201
  highlightColor?: string;
202
  /** Teleport */
203
  teleport?: string | Element;
204
}
205

206
interface IndexAnchorProps {
207
  /** Anchor index */
208
  index?: string | number;
209
}
210
```
211

212
### Sidebar & SidebarItem
213

214
Sidebar navigation component for secondary navigation.
215

216
```typescript { .api }
217
import { Sidebar, SidebarItem } from 'vant';
218

219
interface SidebarProps {
220
  /** Active key */
221
  modelValue?: string | number;
222
}
223

224
interface SidebarItemProps {
225
  /** Item title */
226
  title?: string;
227
  /** Route info */
228
  to?: string | object;
229
  /** Replace route */
230
  replace?: boolean;
231
  /** Badge content */
232
  badge?: string | number;
233
  /** Show badge dot */
234
  dot?: boolean;
235
  /** Disabled state */
236
  disabled?: boolean;
237
}
238
```
239

240
### Grid & GridItem
241

242
Grid layout component for organizing content in a grid structure.
243

244
```typescript { .api }
245
import { Grid, GridItem } from 'vant';
246

247
interface GridProps {
248
  /** Column number */
249
  columnNum?: number | string;
250
  /** Icon size */
251
  iconSize?: string | number;
252
  /** Gutter */
253
  gutter?: number | string;
254
  /** Border */
255
  border?: boolean;
256
  /** Center content */
257
  center?: boolean;
258
  /** Square */
259
  square?: boolean;
260
  /** Clickable */
261
  clickable?: boolean;
262
  /** Direction */
263
  direction?: 'horizontal' | 'vertical';
264
  /** Reverse */
265
  reverse?: boolean;
266
}
267

268
interface GridItemProps {
269
  /** Item text */
270
  text?: string;
271
  /** Item icon */
272
  icon?: string;
273
  /** Icon prefix */
274
  iconPrefix?: string;
275
  /** Icon color */
276
  iconColor?: string;
277
  /** Badge content */
278
  badge?: string | number;
279
  /** Show badge dot */
280
  dot?: boolean;
281
  /** Route info */
282
  to?: string | object;
283
  /** Replace route */
284
  replace?: boolean;
285
}
286
```
287

288
### TreeSelect
289

290
Tree select component for hierarchical data selection.
291

292
```typescript { .api }
293
import { TreeSelect } from 'vant';
294

295
interface TreeSelectProps {
296
  /** Selected main item */
297
  mainActiveIndex?: number | string;
298
  /** Selected items */
299
  activeId?: string | number | Array<string | number>;
300
  /** Tree data */
301
  items?: TreeSelectItem[];
302
  /** Height */
303
  height?: number | string;
304
  /** Max selected count */
305
  max?: number | string;
306
}
307

308
interface TreeSelectItem {
309
  /** Item text */
310
  text: string;
311
  /** Item id */
312
  id?: string | number;
313
  /** Item badge */
314
  badge?: string | number;
315
  /** Show badge dot */
316
  dot?: boolean;
317
  /** Disabled state */
318
  disabled?: boolean;
319
  /** Child items */
320
  children?: TreeSelectItem[];
321
}
322
```
323

324
### ActionBar, ActionBarIcon & ActionBarButton
325

326
Bottom action bar for e-commerce and action-heavy interfaces.
327

328
```typescript { .api }
329
import { ActionBar, ActionBarIcon, ActionBarButton } from 'vant';
330

331
interface ActionBarProps {
332
  /** Placeholder */
333
  placeholder?: boolean;
334
  /** Safe area inset bottom */
335
  safeAreaInsetBottom?: boolean;
336
}
337

338
interface ActionBarIconProps {
339
  /** Icon name */
340
  icon?: string;
341
  /** Icon color */
342
  color?: string;
343
  /** Icon text */
344
  text?: string;
345
  /** Badge content */
346
  badge?: string | number;
347
  /** Show badge dot */
348
  dot?: boolean;
349
  /** Icon prefix */
350
  iconPrefix?: string;
351
  /** Route info */
352
  to?: string | object;
353
  /** Replace route */
354
  replace?: boolean;
355
}
356

357
interface ActionBarButtonProps {
358
  /** Button type */
359
  type?: 'default' | 'primary' | 'warning' | 'danger';
360
  /** Button text */
361
  text?: string;
362
  /** Button color */
363
  color?: string;
364
  /** Icon */
365
  icon?: string;
366
  /** Disabled state */
367
  disabled?: boolean;
368
  /** Loading state */
369
  loading?: boolean;
370
  /** Route info */
371
  to?: string | object;
372
  /** Replace route */
373
  replace?: boolean;
374
}
375
```