0
# Navigation Components
1

2
Navigation components for menus, breadcrumbs, tabs, and navigation bars.
3

4
## Capabilities
5

6
### Navbar
7

8
Responsive navigation header with support for branding, navigation, and more.
9

10
```typescript { .api }
11
/**
12
 * Navbar component for page navigation
13
 * @param variant - Color theme variant
14
 * @param expand - Breakpoint for navbar expansion
15
 * @param fixed - Fixed positioning
16
 * @param sticky - Sticky positioning
17
 */
18
function Navbar(props: NavbarProps): JSX.Element;
19

20
interface NavbarProps extends React.HTMLAttributes<HTMLElement> {
21
  /** Color theme variant */
22
  variant?: "light" | "dark";
23
  /** Breakpoint at which navbar expands */
24
  expand?: boolean | "sm" | "md" | "lg" | "xl" | "xxl";
25
  /** Fixed positioning */
26
  fixed?: "top" | "bottom";
27
  /** Sticky positioning */
28
  sticky?: "top" | "bottom";
29
  /** Background color */
30
  bg?: string;
31
  /** Component used for the root node */
32
  as?: React.ElementType;
33
  /** Bootstrap CSS class prefix */
34
  bsPrefix?: string;
35
}
36
```
37

38
### NavbarBrand
39

40
Brand component for navbar branding.
41

42
```typescript { .api }
43
/**
44
 * NavbarBrand component for branding
45
 * @param href - Link URL for brand
46
 */
47
function NavbarBrand(props: NavbarBrandProps): JSX.Element;
48

49
interface NavbarBrandProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
50
  /** Link URL */
51
  href?: string;
52
  /** Component used for the root node */
53
  as?: React.ElementType;
54
  /** Bootstrap CSS class prefix */
55
  bsPrefix?: string;
56
}
57
```
58

59
### NavbarToggle
60

61
Toggle button for collapsible navbar content.
62

63
```typescript { .api }
64
/**
65
 * NavbarToggle component for mobile navigation
66
 * @param children - Custom toggle content
67
 */
68
function NavbarToggle(props: NavbarToggleProps): JSX.Element;
69

70
interface NavbarToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
71
  /** Custom toggle content */
72
  children?: React.ReactNode;
73
  /** Accessibility label */
74
  "aria-label"?: string;
75
  /** Component used for the root node */
76
  as?: React.ElementType;
77
  /** Bootstrap CSS class prefix */
78
  bsPrefix?: string;
79
}
80
```
81

82
### NavbarCollapse
83

84
Collapsible content wrapper for navbar.
85

86
```typescript { .api }
87
/**
88
 * NavbarCollapse component for collapsible content
89
 */
90
function NavbarCollapse(props: NavbarCollapseProps): JSX.Element;
91

92
interface NavbarCollapseProps extends React.HTMLAttributes<HTMLDivElement> {
93
  /** Component used for the root node */
94
  as?: React.ElementType;
95
  /** Bootstrap CSS class prefix */
96
  bsPrefix?: string;
97
}
98
```
99

100
**Navbar Usage Examples:**
101

102
```typescript
103
import { Navbar, Nav, Container } from "react-bootstrap";
104

105
// Basic navbar
106
<Navbar bg="light" expand="lg">
107
  <Container>
108
    <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
109
    <Navbar.Toggle aria-controls="navbar-nav" />
110
    <Navbar.Collapse id="navbar-nav">
111
      <Nav className="me-auto">
112
        <Nav.Link href="#home">Home</Nav.Link>
113
        <Nav.Link href="#about">About</Nav.Link>
114
      </Nav>
115
    </Navbar.Collapse>
116
  </Container>
117
</Navbar>
118

119
// Dark navbar with sticky positioning
120
<Navbar bg="dark" variant="dark" sticky="top" expand="md">
121
  <Navbar.Brand>My App</Navbar.Brand>
122
  <Nav className="me-auto">
123
    <Nav.Link href="#features">Features</Nav.Link>
124
    <Nav.Link href="#pricing">Pricing</Nav.Link>
125
  </Nav>
126
</Navbar>
127
```
128

129
### Nav
130

131
Navigation component for creating navigational elements.
132

133
```typescript { .api }
134
/**
135
 * Nav component for navigation links
136
 * @param variant - Navigation style variant
137
 * @param fill - Fill available space
138
 * @param justify - Justify content
139
 */
140
function Nav(props: NavProps): JSX.Element;
141

142
interface NavProps extends React.HTMLAttributes<HTMLElement> {
143
  /** Navigation style variant */
144
  variant?: "tabs" | "pills" | "underline";
145
  /** Fill available space */
146
  fill?: boolean;
147
  /** Justify content */
148
  justify?: boolean;
149
  /** Active navigation key */
150
  activeKey?: string;
151
  /** Selection handler */
152
  onSelect?: (eventKey: string | null, e: React.SyntheticEvent) => void;
153
  /** Component used for the root node */
154
  as?: React.ElementType;
155
  /** Bootstrap CSS class prefix */
156
  bsPrefix?: string;
157
}
158
```
159

160
### NavLink
161

162
Navigation link component.
163

164
```typescript { .api }
165
/**
166
 * NavLink component for navigation links
167
 * @param active - Active state
168
 * @param disabled - Disabled state
169
 * @param eventKey - Event key for selection
170
 */
171
function NavLink(props: NavLinkProps): JSX.Element;
172

173
interface NavLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
174
  /** Active state */
175
  active?: boolean;
176
  /** Disabled state */
177
  disabled?: boolean;
178
  /** Event key for selection */
179
  eventKey?: string;
180
  /** Component used for the root node */
181
  as?: React.ElementType;
182
  /** Bootstrap CSS class prefix */
183
  bsPrefix?: string;
184
}
185
```
186

187
### NavDropdown
188

189
Dropdown navigation component.
190

191
```typescript { .api }
192
/**
193
 * NavDropdown component for dropdown navigation
194
 * @param title - Dropdown title
195
 * @param id - Unique identifier
196
 */
197
function NavDropdown(props: NavDropdownProps): JSX.Element;
198

199
interface NavDropdownProps extends React.HTMLAttributes<HTMLElement> {
200
  /** Dropdown title */
201
  title: React.ReactNode;
202
  /** Unique identifier */
203
  id: string;
204
  /** Active state */
205
  active?: boolean;
206
  /** Disabled state */
207
  disabled?: boolean;
208
  /** Event key for selection */
209
  eventKey?: string;
210
  /** Bootstrap CSS class prefix */
211
  bsPrefix?: string;
212
}
213
```
214

215
**Nav Usage Examples:**
216

217
```typescript
218
import { Nav } from "react-bootstrap";
219

220
// Tab navigation
221
<Nav variant="tabs" defaultActiveKey="/home">
222
  <Nav.Item>
223
    <Nav.Link href="/home">Home</Nav.Link>
224
  </Nav.Item>
225
  <Nav.Item>
226
    <Nav.Link eventKey="link-1">Option 1</Nav.Link>
227
  </Nav.Item>
228
  <Nav.Item>
229
    <Nav.Link eventKey="link-2">Option 2</Nav.Link>
230
  </Nav.Item>
231
</Nav>
232

233
// Pills navigation
234
<Nav variant="pills" fill>
235
  <Nav.Item>
236
    <Nav.Link eventKey="first">First</Nav.Link>
237
  </Nav.Item>
238
  <Nav.Item>
239
    <Nav.Link eventKey="second">Second</Nav.Link>
240
  </Nav.Item>
241
</Nav>
242

243
// Navigation with dropdown
244
<Nav>
245
  <Nav.Link href="#home">Home</Nav.Link>
246
  <NavDropdown title="Dropdown" id="nav-dropdown">
247
    <NavDropdown.Item eventKey="action1">Action</NavDropdown.Item>
248
    <NavDropdown.Item eventKey="action2">Another action</NavDropdown.Item>
249
    <NavDropdown.Divider />
250
    <NavDropdown.Item eventKey="action3">Something else</NavDropdown.Item>
251
  </NavDropdown>
252
</Nav>
253
```
254

255
### Breadcrumb
256

257
Navigation component showing the current page's location within a hierarchy.
258

259
```typescript { .api }
260
/**
261
 * Breadcrumb component for hierarchical navigation
262
 */
263
function Breadcrumb(props: BreadcrumbProps): JSX.Element;
264

265
interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
266
  /** Component used for the root node */
267
  as?: React.ElementType;
268
  /** Bootstrap CSS class prefix */
269
  bsPrefix?: string;
270
}
271
```
272

273
### BreadcrumbItem
274

275
Individual breadcrumb item.
276

277
```typescript { .api }
278
/**
279
 * BreadcrumbItem component for individual breadcrumb items
280
 * @param active - Active state
281
 * @param href - Link URL
282
 */
283
function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element;
284

285
interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLElement> {
286
  /** Active state */
287
  active?: boolean;
288
  /** Link URL */
289
  href?: string;
290
  /** Link target */
291
  target?: string;
292
  /** Link title */
293
  title?: string;
294
  /** Component used for the root node */
295
  as?: React.ElementType;
296
  /** Bootstrap CSS class prefix */
297
  bsPrefix?: string;
298
}
299
```
300

301
**Breadcrumb Usage Examples:**
302

303
```typescript
304
import { Breadcrumb } from "react-bootstrap";
305

306
<Breadcrumb>
307
  <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
308
  <Breadcrumb.Item href="#">Library</Breadcrumb.Item>
309
  <Breadcrumb.Item active>Data</Breadcrumb.Item>
310
</Breadcrumb>
311
```
312

313
### Pagination
314

315
Pagination component for navigating through pages.
316

317
```typescript { .api }
318
/**
319
 * Pagination component for page navigation
320
 * @param size - Size variant
321
 */
322
function Pagination(props: PaginationProps): JSX.Element;
323

324
interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
325
  /** Size variant */
326
  size?: "sm" | "lg";
327
  /** Component used for the root node */
328
  as?: React.ElementType;
329
  /** Bootstrap CSS class prefix */
330
  bsPrefix?: string;
331
}
332
```
333

334
### PageItem
335

336
Individual pagination item.
337

338
```typescript { .api }
339
/**
340
 * PageItem component for individual pagination items
341
 * @param disabled - Disabled state
342
 * @param active - Active state
343
 */
344
function PageItem(props: PageItemProps): JSX.Element;
345

346
interface PageItemProps extends React.HTMLAttributes<HTMLElement> {
347
  /** Disabled state */
348
  disabled?: boolean;
349
  /** Active state */
350
  active?: boolean;
351
  /** Link URL */
352
  href?: string;
353
  /** Component used for the root node */
354
  as?: React.ElementType;
355
  /** Bootstrap CSS class prefix */
356
  bsPrefix?: string;
357
}
358
```
359

360
**Pagination Usage Examples:**
361

362
```typescript
363
import { Pagination } from "react-bootstrap";
364

365
<Pagination>
366
  <Pagination.First />
367
  <Pagination.Prev />
368
  <Pagination.Item>{1}</Pagination.Item>
369
  <Pagination.Ellipsis />
370
  <Pagination.Item active>{10}</Pagination.Item>
371
  <Pagination.Item>{11}</Pagination.Item>
372
  <Pagination.Item>{12}</Pagination.Item>
373
  <Pagination.Ellipsis />
374
  <Pagination.Item>{20}</Pagination.Item>
375
  <Pagination.Next />
376
  <Pagination.Last />
377
</Pagination>
378
```