0
# Navigation Components
1

2
Navigation elements including menus, breadcrumbs, steps, and dock-style navigation with hierarchical support and customizable styling.
3

4
## Capabilities
5

6
### Menu Components
7

8
#### Menubar
9
Horizontal menu bar with dropdown submenus and keyboard navigation.
10

11
```typescript { .api }
12
/**
13
 * Horizontal menu bar component
14
 */
15
import Menubar from "primevue/menubar";
16

17
interface MenubarProps extends BaseComponentProps {
18
  model?: MenuItem[];
19
  exact?: boolean;
20
}
21
```
22

23
#### Menu
24
Vertical dropdown menu with nested items and templating support.
25

26
```typescript { .api }
27
/**
28
 * Vertical dropdown menu
29
 */
30
import Menu from "primevue/menu";
31

32
interface MenuProps extends BaseComponentProps {
33
  model?: MenuItem[];
34
  popup?: boolean;
35
  appendTo?: string;
36
  baseZIndex?: number;
37
  autoZIndex?: boolean;
38
  exact?: boolean;
39
  tabindex?: number;
40
}
41
```
42

43
#### ContextMenu
44
Right-click context menu with positioning and nested items.
45

46
```typescript { .api }
47
/**
48
 * Right-click context menu
49
 */
50
import ContextMenu from "primevue/contextmenu";
51

52
interface ContextMenuProps extends BaseComponentProps {
53
  model?: MenuItem[];
54
  appendTo?: string;
55
  baseZIndex?: number;
56
  autoZIndex?: boolean;
57
  exact?: boolean;
58
  tabindex?: number;
59
}
60
```
61

62
### Process Navigation
63

64
#### Steps
65
Step indicator component for process navigation with linear progression.
66

67
```typescript { .api }
68
/**
69
 * Step indicator for process navigation
70
 */
71
import Steps from "primevue/steps";
72

73
interface StepsProps extends BaseComponentProps {
74
  model?: MenuItem[];
75
  activeIndex?: number;
76
  readonly?: boolean;
77
  exact?: boolean;
78
}
79
```
80

81
#### Breadcrumb
82
Navigation breadcrumb trail with separators and home icon.
83

84
```typescript { .api }
85
/**
86
 * Breadcrumb navigation trail
87
 */
88
import Breadcrumb from "primevue/breadcrumb";
89

90
interface BreadcrumbProps extends BaseComponentProps {
91
  model?: MenuItem[];
92
  home?: MenuItem;
93
  exact?: boolean;
94
}
95
```
96

97
**Usage Example:**
98

99
```vue
100
<template>
101
  <Breadcrumb :home="home" :model="items" />
102
</template>
103

104
<script setup>
105
import { ref } from 'vue';
106
import Breadcrumb from 'primevue/breadcrumb';
107

108
const home = ref({
109
  icon: 'pi pi-home',
110
  route: '/'
111
});
112

113
const items = ref([
114
  { label: 'Computer' },
115
  { label: 'Notebook' },
116
  { label: 'Accessories' },
117
  { label: 'Backpacks' },
118
  { label: 'Item' }
119
]);
120
</script>
121
```
122

123
#### PanelMenu
124
Accordion-style menu component with collapsible navigation sections.
125

126
```typescript { .api }
127
/**
128
 * Accordion-style panel menu
129
 */
130
import PanelMenu from "primevue/panelmenu";
131

132
interface PanelMenuProps extends BaseComponentProps {
133
  model?: MenuItem[];
134
  expandedKeys?: object;
135
  exact?: boolean;
136
}
137
```
138

139
**Usage Example:**
140

141
```vue
142
<template>
143
  <PanelMenu :model="menuItems" />
144
</template>
145

146
<script setup>
147
import { ref } from 'vue';
148
import PanelMenu from 'primevue/panelmenu';
149

150
const menuItems = ref([
151
  {
152
    label: 'Documents',
153
    icon: 'pi pi-fw pi-file',
154
    items: [
155
      { label: 'New', icon: 'pi pi-fw pi-plus', url: '#/new' },
156
      { label: 'Search', icon: 'pi pi-fw pi-search', url: '#/search' }
157
    ]
158
  },
159
  {
160
    label: 'Profile',
161
    icon: 'pi pi-fw pi-user',
162
    items: [
163
      { label: 'Settings', icon: 'pi pi-fw pi-cog', url: '#/settings' },
164
      { label: 'Logout', icon: 'pi pi-fw pi-sign-out', url: '#/logout' }
165
    ]
166
  }
167
]);
168
</script>
169
```
170

171
#### TieredMenu
172
Multi-level hierarchical menu with cascading submenus.
173

174
```typescript { .api }
175
/**
176
 * Multi-level tiered menu component
177
 */
178
import TieredMenu from "primevue/tieredmenu";
179

180
interface TieredMenuProps extends BaseComponentProps {
181
  model?: MenuItem[];
182
  popup?: boolean;
183
  appendTo?: string;
184
  baseZIndex?: number;
185
  autoZIndex?: boolean;
186
  exact?: boolean;
187
  disabled?: boolean;
188
  tabindex?: number;
189
}
190
```
191

192
**Usage Example:**
193

194
```vue
195
<template>
196
  <Button type="button" label="Show Menu" @click="toggle" />
197
  <TieredMenu ref="menu" :model="items" :popup="true" />
198
</template>
199

200
<script setup>
201
import { ref } from 'vue';
202
import TieredMenu from 'primevue/tieredmenu';
203
import Button from 'primevue/button';
204

205
const menu = ref();
206

207
const items = ref([
208
  {
209
    label: 'File',
210
    icon: 'pi pi-fw pi-file',
211
    items: [
212
      {
213
        label: 'New',
214
        icon: 'pi pi-fw pi-plus',
215
        items: [
216
          { label: 'Document', icon: 'pi pi-fw pi-file' },
217
          { label: 'Image', icon: 'pi pi-fw pi-image' }
218
        ]
219
      },
220
      { label: 'Open', icon: 'pi pi-fw pi-external-link' }
221
    ]
222
  },
223
  {
224
    label: 'Edit',
225
    icon: 'pi pi-fw pi-pencil',
226
    items: [
227
      { label: 'Copy', icon: 'pi pi-fw pi-copy' },
228
      { label: 'Paste', icon: 'pi pi-fw pi-clipboard' }
229
    ]
230
  }
231
]);
232

233
const toggle = (event) => {
234
  menu.value.toggle(event);
235
};
236
</script>
237
```
238

239
## Types
240

241
```typescript { .api }
242
// Menu item click event
243
interface MenuItemCommandEvent {
244
  originalEvent: Event;
245
  item: MenuItem;
246
}
247
```