0
# Layout & Navigation
1

2
Panel components, menus, and navigation elements for organizing application structure and user workflows.
3

4
## Capabilities
5

6
### Dialog
7

8
Modal dialog component for displaying content over the main application interface.
9

10
```typescript { .api }
11
/**
12
 * Modal dialog component
13
 * @param props - Dialog configuration options
14
 * @returns JSX element
15
 */
16
function Dialog(props: DialogProps): JSX.Element;
17

18
interface DialogProps {
19
  /** Dialog visibility state */
20
  visible?: boolean;
21
  /** Header content */
22
  header?: React.ReactNode;
23
  /** Footer content */
24
  footer?: React.ReactNode;
25
  /** Hide handler */
26
  onHide?: () => void;
27
  /** Modal backdrop enabled */
28
  modal?: boolean;
29
  /** Closable via close button */
30
  closable?: boolean;
31
  /** Dismissable via backdrop click */
32
  dismissableMask?: boolean;
33
  /** Close on escape key */
34
  closeOnEscape?: boolean;
35
  /** Show header */
36
  showHeader?: boolean;
37
  /** Dialog width */
38
  style?: React.CSSProperties;
39
  /** Content CSS class */
40
  contentClassName?: string;
41
  /** Content style */
42
  contentStyle?: React.CSSProperties;
43
  /** Maximize/minimize enabled */
44
  maximizable?: boolean;
45
  /** Resizable dialog */
46
  resizable?: boolean;
47
  /** Draggable dialog */
48
  draggable?: boolean;
49
  /** Position on screen */
50
  position?: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
51
  /** CSS class name */
52
  className?: string;
53
  /** Passthrough options */
54
  pt?: PassThroughOptions;
55
}
56
```
57

58
**Usage Examples:**
59

60
```typescript
61
import { Dialog } from "primereact/dialog";
62
import { Button } from "primereact/button";
63

64
// Basic dialog
65
<Dialog 
66
  visible={visible} 
67
  onHide={() => setVisible(false)}
68
  header="Confirmation"
69
  style={{ width: '450px' }}
70
>
71
  <p>Are you sure you want to proceed?</p>
72
</Dialog>
73

74
// Dialog with custom footer
75
<Dialog 
76
  visible={visible} 
77
  onHide={() => setVisible(false)}
78
  header="User Details"
79
  footer={
80
    <div>
81
      <Button label="Save" />
82
      <Button label="Cancel" className="p-button-secondary" />
83
    </div>
84
  }
85
>
86
  {/* Dialog content */}
87
</Dialog>
88
```
89

90
### TabView
91

92
Tabbed interface component for organizing content into multiple panels.
93

94
```typescript { .api }
95
/**
96
 * Tabbed interface component
97
 * @param props - TabView configuration options
98
 * @returns JSX element
99
 */
100
function TabView(props: TabViewProps): JSX.Element;
101

102
interface TabViewProps {
103
  /** Active tab index */
104
  activeIndex?: number;
105
  /** Tab change handler */
106
  onTabChange?: (e: TabViewTabChangeEvent) => void;
107
  /** Tab close handler */
108
  onTabClose?: (e: TabViewTabCloseEvent) => void;
109
  /** Render active tab only */
110
  renderActiveOnly?: boolean;
111
  /** Scrollable tabs */
112
  scrollable?: boolean;
113
  /** CSS class name */
114
  className?: string;
115
  /** Passthrough options */
116
  pt?: PassThroughOptions;
117
  /** Child TabPanel components */
118
  children?: React.ReactNode;
119
}
120

121
interface TabViewTabChangeEvent {
122
  originalEvent: React.SyntheticEvent;
123
  index: number;
124
}
125

126
interface TabViewTabCloseEvent {
127
  originalEvent: React.SyntheticEvent;
128
  index: number;
129
}
130

131
/**
132
 * Individual tab panel component
133
 * @param props - TabPanel configuration options
134
 * @returns JSX element
135
 */
136
function TabPanel(props: TabPanelProps): JSX.Element;
137

138
interface TabPanelProps {
139
  /** Tab header text */
140
  header?: React.ReactNode;
141
  /** Left icon */
142
  leftIcon?: string;
143
  /** Right icon */
144
  rightIcon?: string;
145
  /** Closable tab */
146
  closable?: boolean;
147
  /** Disabled tab */
148
  disabled?: boolean;
149
  /** Header template */
150
  headerTemplate?: (options: TabPanelHeaderTemplateOptions) => React.ReactNode;
151
  /** Content template */
152
  contentTemplate?: (options: TabPanelContentTemplateOptions) => React.ReactNode;
153
  /** CSS class name */
154
  className?: string;
155
  /** Header CSS class */
156
  headerClassName?: string;
157
  /** Content CSS class */
158
  contentClassName?: string;
159
  /** Child content */
160
  children?: React.ReactNode;
161
}
162

163
interface TabPanelHeaderTemplateOptions {
164
  className: string;
165
  titleClassName: string;
166
  onClick: (e: React.MouseEvent) => void;
167
  leftIconElement: React.ReactNode;
168
  titleElement: React.ReactNode;
169
  rightIconElement: React.ReactNode;
170
  element: React.ReactNode;
171
  props: TabPanelProps;
172
  index: number;
173
  selected: boolean;
174
  ariaControls: string;
175
}
176
```
177

178
### Menu
179

180
Basic menu component for displaying a list of navigation items.
181

182
```typescript { .api }
183
/**
184
 * Basic menu component
185
 * @param props - Menu configuration options
186
 * @returns JSX element
187
 */
188
function Menu(props: MenuProps): JSX.Element;
189

190
interface MenuProps {
191
  /** Menu items array */
192
  model?: MenuItem[];
193
  /** Popup mode */
194
  popup?: boolean;
195
  /** Popup reference element */
196
  popupAlignment?: 'left' | 'right';
197
  /** Show method for popup */
198
  show?: (event: React.SyntheticEvent) => void;
199
  /** Hide method for popup */
200
  hide?: () => void;
201
  /** CSS class name */
202
  className?: string;
203
  /** Passthrough options */
204
  pt?: PassThroughOptions;
205
}
206

207
interface MenuItem {
208
  /** Item label */
209
  label?: string;
210
  /** Item icon */
211
  icon?: string;
212
  /** Navigation URL */
213
  url?: string;
214
  /** Click handler */
215
  command?: (e: MenuItemCommandEvent) => void;
216
  /** Submenu items */
217
  items?: MenuItem[];
218
  /** Disabled state */
219
  disabled?: boolean;
220
  /** Visible state */
221
  visible?: boolean;
222
  /** Separator item */
223
  separator?: boolean;
224
  /** Custom template */
225
  template?: (item: MenuItem, options: any) => React.ReactNode;
226
  /** CSS class name */
227
  className?: string;
228
  /** CSS style */
229
  style?: React.CSSProperties;
230
}
231

232
interface MenuItemCommandEvent {
233
  originalEvent: React.SyntheticEvent;
234
  item: MenuItem;
235
}
236
```
237

238
### Sidebar
239

240
Slide-out panel component for secondary navigation or content areas.
241

242
```typescript { .api }
243
/**
244
 * Slide-out panel component
245
 * @param props - Sidebar configuration options
246
 * @returns JSX element
247
 */
248
function Sidebar(props: SidebarProps): JSX.Element;
249

250
interface SidebarProps {
251
  /** Sidebar visibility */
252
  visible?: boolean;
253
  /** Hide handler */
254
  onHide?: () => void;
255
  /** Sidebar position */
256
  position?: 'left' | 'right' | 'top' | 'bottom';
257
  /** Full height sidebar */
258
  fullScreen?: boolean;
259
  /** Block scroll when visible */
260
  blockScroll?: boolean;
261
  /** Base z-index value */
262
  baseZIndex?: number;
263
  /** Dismiss on mask click */
264
  dismissable?: boolean;
265
  /** Show close icon */
266
  showCloseIcon?: boolean;
267
  /** Close icon */
268
  closeIcon?: string;
269
  /** Sidebar icons */
270
  icons?: React.ReactNode;
271
  /** Modal mode */
272
  modal?: boolean;
273
  /** CSS class name */
274
  className?: string;
275
  /** Passthrough options */
276
  pt?: PassThroughOptions;
277
  /** Child content */
278
  children?: React.ReactNode;
279
}
280
```
281

282
### Accordion
283

284
Collapsible content panels for organizing related information in expandable sections.
285

286
```typescript { .api }
287
/**
288
 * Collapsible content panels
289
 * @param props - Accordion configuration options
290
 * @returns JSX element
291
 */
292
function Accordion(props: AccordionProps): JSX.Element;
293

294
interface AccordionProps {
295
  /** Active tab indices */
296
  activeIndex?: number | number[];
297
  /** Tab change handler */
298
  onTabChange?: (e: AccordionTabChangeEvent) => void;
299
  /** Multiple tabs open simultaneously */
300
  multiple?: boolean;
301
  /** Expand icon */
302
  expandIcon?: string;
303
  /** Collapse icon */
304
  collapseIcon?: string;
305
  /** CSS class name */
306
  className?: string;
307
  /** Passthrough options */
308
  pt?: PassThroughOptions;
309
  /** Child AccordionTab components */
310
  children?: React.ReactNode;
311
}
312

313
interface AccordionTabChangeEvent {
314
  originalEvent: React.SyntheticEvent;
315
  index: number | number[];
316
}
317

318
/**
319
 * Individual accordion tab component
320
 * @param props - AccordionTab configuration options
321
 * @returns JSX element
322
 */
323
function AccordionTab(props: AccordionTabProps): JSX.Element;
324

325
interface AccordionTabProps {
326
  /** Tab header content */
327
  header?: React.ReactNode;
328
  /** Header template function */
329
  headerTemplate?: (options: AccordionTabHeaderTemplateOptions) => React.ReactNode;
330
  /** Disabled state */
331
  disabled?: boolean;
332
  /** CSS class name */
333
  className?: string;
334
  /** Header CSS class */
335
  headerClassName?: string;
336
  /** Content CSS class */
337
  contentClassName?: string;
338
  /** Child content */
339
  children?: React.ReactNode;
340
}
341
```
342

343
### Menubar
344

345
Horizontal navigation menu bar with nested submenus support.
346

347
```typescript { .api }
348
/**
349
 * Horizontal menu bar component
350
 * @param props - Menubar configuration options
351
 * @returns JSX element
352
 */
353
function Menubar(props: MenubarProps): JSX.Element;
354

355
interface MenubarProps {
356
  /** Menu items array */
357
  model?: MenuItem[];
358
  /** Start content template */
359
  start?: React.ReactNode;
360
  /** End content template */
361
  end?: React.ReactNode;
362
  /** CSS class name */
363
  className?: string;
364
  /** Passthrough options */
365
  pt?: PassThroughOptions;
366
}
367
```
368

369
### Splitter
370

371
Resizable panel splitter for creating adjustable layout sections.
372

373
```typescript { .api }
374
/**
375
 * Resizable panel splitter
376
 * @param props - Splitter configuration options
377
 * @returns JSX element
378
 */
379
function Splitter(props: SplitterProps): JSX.Element;
380

381
interface SplitterProps {
382
  /** Split direction */
383
  layout?: 'horizontal' | 'vertical';
384
  /** Gutter size in pixels */
385
  gutterSize?: number;
386
  /** Minimum sizes for panels */
387
  minSizes?: number[];
388
  /** Panel sizes (controlled mode) */
389
  sizes?: number[];
390
  /** Resize end handler */
391
  onResizeEnd?: (e: SplitterResizeEndEvent) => void;
392
  /** Resize handler */
393
  onResize?: (e: SplitterResizeEvent) => void;
394
  /** Resizerestyle */
395
  resizerStyle?: React.CSSProperties;
396
  /** CSS class name */
397
  className?: string;
398
  /** Passthrough options */
399
  pt?: PassThroughOptions;
400
  /** Child SplitterPanel components */
401
  children?: React.ReactNode;
402
}
403

404
interface SplitterResizeEndEvent {
405
  originalEvent: Event;
406
  sizes: number[];
407
}
408

409
interface SplitterResizeEvent {
410
  originalEvent: Event;
411
  sizes: number[];
412
}
413

414
/**
415
 * Individual splitter panel component
416
 * @param props - SplitterPanel configuration options
417
 * @returns JSX element
418
 */
419
function SplitterPanel(props: SplitterPanelProps): JSX.Element;
420

421
interface SplitterPanelProps {
422
  /** Panel size */
423
  size?: number;
424
  /** Minimum size */
425
  minSize?: number;
426
  /** CSS class name */
427
  className?: string;
428
  /** Child content */
429
  children?: React.ReactNode;
430
}
431
```
432

433
### Toolbar
434

435
Action toolbar component for grouping related commands and controls.
436

437
```typescript { .api }
438
/**
439
 * Action toolbar component
440
 * @param props - Toolbar configuration options
441
 * @returns JSX element
442
 */
443
function Toolbar(props: ToolbarProps): JSX.Element;
444

445
interface ToolbarProps {
446
  /** Left side content */
447
  left?: React.ReactNode;
448
  /** Right side content */
449
  right?: React.ReactNode;
450
  /** Start content (alias for left) */
451
  start?: React.ReactNode;
452
  /** End content (alias for right) */
453
  end?: React.ReactNode;
454
  /** CSS class name */
455
  className?: string;
456
  /** Passthrough options */
457
  pt?: PassThroughOptions;
458
}
459
```
460

461
### Steps
462

463
Step indicator component for showing progress through a multi-step process.
464

465
```typescript { .api }
466
/**
467
 * Step indicator component
468
 * @param props - Steps configuration options
469
 * @returns JSX element
470
 */
471
function Steps(props: StepsProps): JSX.Element;
472

473
interface StepsProps {
474
  /** Step items array */
475
  model?: MenuItem[];
476
  /** Active step index */
477
  activeIndex?: number;
478
  /** Step selection handler */
479
  onSelect?: (e: StepsSelectEvent) => void;
480
  /** Read-only mode */
481
  readOnly?: boolean;
482
  /** CSS class name */
483
  className?: string;
484
  /** Passthrough options */
485
  pt?: PassThroughOptions;
486
}
487

488
interface StepsSelectEvent {
489
  originalEvent: React.SyntheticEvent;
490
  item: MenuItem;
491
  index: number;
492
}
493
```
494

495
### BreadCrumb
496

497
Navigation breadcrumb component for showing hierarchical location.
498

499
```typescript { .api }
500
/**
501
 * Navigation breadcrumb component
502
 * @param props - BreadCrumb configuration options
503
 * @returns JSX element
504
 */
505
function BreadCrumb(props: BreadCrumbProps): JSX.Element;
506

507
interface BreadCrumbProps {
508
  /** Breadcrumb items */
509
  model?: MenuItem[];
510
  /** Home item */
511
  home?: MenuItem | null;
512
  /** Separator icon */
513
  separatorIcon?: string;
514
  /** CSS class name */
515
  className?: string;
516
  /** Passthrough options */
517
  pt?: PassThroughOptions;
518
}
519
```