0
# Navigation Components
1

2
Navigation components provide user interface patterns for organizing and accessing different sections of applications. These components support hierarchical navigation, tab-based interfaces, and collapsible content organization.
3

4
## Capabilities
5

6
### Tabs
7

8
Tab navigation system for organizing content into switchable panels.
9

10
```typescript { .api }
11
/**
12
 * Tab container for organizing content into switchable panels
13
 */
14
interface Tabs extends HTMLElement {
15
  /** Index of currently selected tab */
16
  selected: number;
17
  /** Tab orientation: horizontal or vertical */
18
  orientation: 'horizontal' | 'vertical';
19

20
  /** Select tab by index */
21
  selectIndex(index: number): void;
22
  /** Focus the tabs component */
23
  focus(): void;
24
}
25

26
/**
27
 * Individual tab within Tabs container
28
 */
29
interface Tab extends HTMLElement {
30
  /** Tab is currently selected */
31
  selected: boolean;
32
  /** Tab is disabled */
33
  disabled: boolean;
34
  /** Tab label text */
35
  label: string;
36

37
  /** Focus this tab */
38
  focus(): void;
39
}
40
```
41

42
### Accordion
43

44
Collapsible content panels for organizing information hierarchically.
45

46
```typescript { .api }
47
/**
48
 * Accordion container with expandable panels
49
 */
50
interface Accordion extends HTMLElement {
51
  /** Index of currently opened panel (null if none) */
52
  opened: number | null;
53
  /** Array of panel items */
54
  items: AccordionPanel[];
55

56
  /** Open panel at specific index */
57
  open(index: number): void;
58
  /** Close currently opened panel */
59
  close(): void;
60
}
61

62
/**
63
 * Individual accordion panel
64
 */
65
interface AccordionPanel extends HTMLElement {
66
  /** Panel is currently opened */
67
  opened: boolean;
68
  /** Panel summary/header text */
69
  summary: string;
70

71
  /** Toggle panel open/close state */
72
  toggle(): void;
73
}
74
```
75

76
### Side Navigation
77

78
Hierarchical side navigation for application structure.
79

80
```typescript { .api }
81
/**
82
 * Side navigation component with collapsible structure
83
 */
84
interface SideNav extends HTMLElement {
85
  /** Navigation can be collapsed */
86
  collapsible: boolean;
87
  /** Navigation is currently collapsed */
88
  collapsed: boolean;
89

90
  /** Collapse the navigation */
91
  collapse(): void;
92
  /** Expand the navigation */
93
  expand(): void;
94
}
95

96
/**
97
 * Navigation item within SideNav
98
 */
99
interface SideNavItem extends HTMLElement {
100
  /** Navigation path or URL */
101
  path: string;
102
  /** Item is currently active */
103
  current: boolean;
104
  /** Item is expanded (for parent items) */
105
  expanded: boolean;
106
  /** Item label text */
107
  label: string;
108
}
109
```
110

111
### Menu Bar
112

113
Horizontal menu bar with dropdown submenus for application navigation and actions.
114

115
```typescript { .api }
116
/**
117
 * Horizontal menu bar with multi-level dropdown support
118
 * Provides consistent navigation and action access
119
 */
120
interface MenuBar extends HTMLElement {
121
  /** Array of root-level menu items */
122
  items: MenuBarItem[];
123
  /** Menu is currently open/expanded */
124
  opened: boolean;
125
  /** Menu bar is disabled */
126
  disabled: boolean;
127
  /** Internationalization configuration */
128
  i18n: MenuBarI18n;
129
  /** Theme variant */
130
  theme: string;
131

132
  /** Close all open menus */
133
  close(): void;
134
  /** Focus the menu bar */
135
  focus(): void;
136
}
137

138
/**
139
 * Menu bar item configuration with hierarchical support
140
 */
141
interface MenuBarItem {
142
  /** Item display text */
143
  text: string;
144
  /** Item tooltip text */
145
  tooltip?: string;
146
  /** Item is disabled */
147
  disabled?: boolean;
148
  /** Item theme variants */
149
  theme?: string | string[];
150
  /** CSS class names */
151
  className?: string;
152
  /** Submenu items */
153
  children?: SubMenuItem[];
154
  /** Custom component for rendering */
155
  component?: HTMLElement | string;
156
}
157

158
/**
159
 * Submenu item configuration
160
 */
161
interface SubMenuItem {
162
  /** Item display text */
163
  text: string;
164
  /** Item is disabled */
165
  disabled?: boolean;
166
  /** Item is checked (for toggle items) */
167
  checked?: boolean;
168
  /** Item theme variants */
169
  theme?: string | string[];
170
  /** CSS class names */
171
  className?: string;
172
  /** Nested submenu items */
173
  children?: SubMenuItem[];
174
  /** Custom component for rendering */
175
  component?: HTMLElement | string;
176
}
177

178
/**
179
 * Menu bar internationalization
180
 */
181
interface MenuBarI18n {
182
  /** Text for overflow menu button */
183
  moreOptions: string;
184
}
185
```
186

187
**Usage Examples:**
188

189
```typescript
190
import '@vaadin/menu-bar';
191

192
// Create menu bar
193
const menuBar = document.createElement('vaadin-menu-bar');
194

195
// Configure menu structure
196
menuBar.items = [
197
  {
198
    text: 'File',
199
    children: [
200
      { text: 'New', children: [
201
        { text: 'Document' },
202
        { text: 'Folder' }
203
      ]},
204
      { text: 'Open' },
205
      { text: 'Save' },
206
      { text: 'Save As...' }
207
    ]
208
  },
209
  {
210
    text: 'Edit',
211
    children: [
212
      { text: 'Cut' },
213
      { text: 'Copy' },
214
      { text: 'Paste' }
215
    ]
216
  },
217
  {
218
    text: 'View',
219
    children: [
220
      { text: 'Zoom In' },
221
      { text: 'Zoom Out' },
222
      { text: 'Full Screen', checked: true }
223
    ]
224
  },
225
  { text: 'Help' }
226
];
227

228
// Listen for item selections
229
menuBar.addEventListener('item-selected', (e) => {
230
  console.log('Selected:', e.detail.value.text);
231
});
232

233
document.body.appendChild(menuBar);
234
```