0
# Navigation Components
1

2
Navigation bars, breadcrumbs, and navigation list components for creating site navigation and hierarchical navigation structures.
3

4
## Capabilities
5

6
### Navbar
7

8
Bootstrap navigation bar component that provides responsive navigation headers with support for branding, navigation links, and other components.
9

10
```javascript { .api }
11
/**
12
 * Bootstrap navigation bar component
13
 * @param props.light - Use light navbar theme
14
 * @param props.dark - Use dark navbar theme
15
 * @param props.fixed - Fix navbar position ('top' or 'bottom')
16
 * @param props.sticky - Make navbar sticky ('top')
17
 * @param props.color - Background color theme
18
 * @param props.expand - Responsive expansion breakpoint (true, false, 'sm', 'md', 'lg', 'xl')
19
 * @param props.tag - HTML element to render as (default: 'nav')
20
 * @param props.className - Additional CSS classes
21
 * @param props.cssModule - CSS Module mapping object
22
 * @param props.children - Navigation content and components
23
 */
24
function Navbar(props: {
25
  light?: boolean;
26
  dark?: boolean;
27
  fixed?: 'top' | 'bottom';
28
  sticky?: 'top';
29
  color?: string;
30
  expand?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
31
  tag?: React.ElementType;
32
  className?: string;
33
  cssModule?: object;
34
  children?: React.ReactNode;
35
}): JSX.Element;
36
```
37

38
### NavbarBrand
39

40
Navbar brand/logo component for displaying company or site branding within the navbar.
41

42
```javascript { .api }
43
/**
44
 * Navbar brand/logo component
45
 * @param props.tag - HTML element to render as (default: 'a' if href, 'span' otherwise)
46
 * @param props.href - Link URL when rendered as anchor
47
 * @param props.className - Additional CSS classes
48
 * @param props.cssModule - CSS Module mapping object
49
 * @param props.children - Brand content (text, logo, etc.)
50
 */
51
function NavbarBrand(props: {
52
  tag?: React.ElementType;
53
  href?: string;
54
  className?: string;
55
  cssModule?: object;
56
  children?: React.ReactNode;
57
}): JSX.Element;
58
```
59

60
### NavbarToggler
61

62
Collapsible navbar toggle button for mobile navigation menu display.
63

64
```javascript { .api }
65
/**
66
 * Navbar toggle button for collapsible navigation
67
 * @param props.type - Button type (default: 'button')
68
 * @param props.tag - HTML element to render as (default: 'button')
69
 * @param props.className - Additional CSS classes
70
 * @param props.cssModule - CSS Module mapping object
71
 */
72
function NavbarToggler(props: {
73
  type?: string;
74
  tag?: React.ElementType;
75
  className?: string;
76
  cssModule?: object;
77
  [key: string]: any;
78
}): JSX.Element;
79
```
80

81
### NavbarText
82

83
Text wrapper component for non-interactive text content within navbars.
84

85
```javascript { .api }
86
/**
87
 * Navbar text wrapper for non-interactive content
88
 * @param props.tag - HTML element to render as (default: 'span')
89
 * @param props.className - Additional CSS classes
90
 * @param props.cssModule - CSS Module mapping object
91
 * @param props.children - Text content
92
 */
93
function NavbarText(props: {
94
  tag?: React.ElementType;
95
  className?: string;
96
  cssModule?: object;
97
  children?: React.ReactNode;
98
}): JSX.Element;
99
```
100

101
### Nav
102

103
Navigation list component for creating lists of navigation links and content.
104

105
```javascript { .api }
106
/**
107
 * Navigation list component
108
 * @param props.tabs - Apply tab styling
109
 * @param props.pills - Apply pill/button styling
110
 * @param props.vertical - Stack navigation vertically (true or breakpoint string)
111
 * @param props.horizontal - Align navigation horizontally ('center', 'end')
112
 * @param props.justified - Make nav items fill available width
113
 * @param props.fill - Fill and justify nav items
114
 * @param props.navbar - Apply navbar-specific styling
115
 * @param props.card - Apply card-specific navigation styling
116
 * @param props.tag - HTML element to render as (default: 'ul')
117
 * @param props.className - Additional CSS classes
118
 * @param props.cssModule - CSS Module mapping object
119
 * @param props.children - NavItem components and other content
120
 */
121
function Nav(props: {
122
  tabs?: boolean;
123
  pills?: boolean;
124
  vertical?: boolean | string;
125
  horizontal?: 'center' | 'end';
126
  justified?: boolean;
127
  fill?: boolean;
128
  navbar?: boolean;
129
  card?: boolean;
130
  tag?: React.ElementType;
131
  className?: string;
132
  cssModule?: object;
133
  children?: React.ReactNode;
134
}): JSX.Element;
135
```
136

137
### NavItem
138

139
Navigation item wrapper component for individual navigation items.
140

141
```javascript { .api }
142
/**
143
 * Navigation item wrapper
144
 * @param props.tag - HTML element to render as (default: 'li')
145
 * @param props.active - Mark item as active/current
146
 * @param props.className - Additional CSS classes
147
 * @param props.cssModule - CSS Module mapping object
148
 * @param props.children - Navigation link or other content
149
 */
150
function NavItem(props: {
151
  tag?: React.ElementType;
152
  active?: boolean;
153
  className?: string;
154
  cssModule?: object;
155
  children?: React.ReactNode;
156
}): JSX.Element;
157
```
158

159
### NavLink
160

161
Navigation link component for creating clickable navigation links.
162

163
```javascript { .api }
164
/**
165
 * Navigation link component
166
 * @param props.disabled - Disable the link
167
 * @param props.active - Mark link as active/current
168
 * @param props.href - Link URL
169
 * @param props.tag - HTML element to render as (default: 'a')
170
 * @param props.innerRef - Ref forwarding
171
 * @param props.className - Additional CSS classes
172
 * @param props.cssModule - CSS Module mapping object
173
 * @param props.children - Link text/content
174
 */
175
function NavLink(props: {
176
  disabled?: boolean;
177
  active?: boolean;
178
  href?: string;
179
  tag?: React.ElementType;
180
  innerRef?: React.Ref;
181
  className?: string;
182
  cssModule?: object;
183
  children?: React.ReactNode;
184
  [key: string]: any;
185
}): JSX.Element;
186
```
187

188
### Breadcrumb
189

190
Bootstrap breadcrumb navigation component for showing hierarchical navigation paths.
191

192
```javascript { .api }
193
/**
194
 * Bootstrap breadcrumb navigation
195
 * @param props.tag - HTML element for wrapper (default: 'nav')
196
 * @param props.listTag - HTML element for list (default: 'ol')
197
 * @param props.className - Additional CSS classes for wrapper
198
 * @param props.listClassName - Additional CSS classes for list
199
 * @param props.cssModule - CSS Module mapping object
200
 * @param props.children - BreadcrumbItem components
201
 */
202
function Breadcrumb(props: {
203
  tag?: React.ElementType;
204
  listTag?: React.ElementType;
205
  className?: string;
206
  listClassName?: string;
207
  cssModule?: object;
208
  children?: React.ReactNode;
209
}): JSX.Element;
210
```
211

212
### BreadcrumbItem
213

214
Individual breadcrumb item component for creating breadcrumb navigation links.
215

216
```javascript { .api }
217
/**
218
 * Individual breadcrumb item
219
 * @param props.active - Mark item as active/current (no link)
220
 * @param props.tag - HTML element to render as (default: 'li')
221
 * @param props.href - Link URL for non-active items
222
 * @param props.className - Additional CSS classes
223
 * @param props.cssModule - CSS Module mapping object
224
 * @param props.children - Breadcrumb text/content
225
 */
226
function BreadcrumbItem(props: {
227
  active?: boolean;
228
  tag?: React.ElementType;
229
  href?: string;
230
  className?: string;
231
  cssModule?: object;
232
  children?: React.ReactNode;
233
  [key: string]: any;
234
}): JSX.Element;
235
```
236

237
## Usage Examples
238

239
### Complete Navbar Example
240

241
```jsx
242
import { 
243
  Navbar, 
244
  NavbarBrand, 
245
  NavbarToggler, 
246
  Nav, 
247
  NavItem, 
248
  NavLink,
249
  Collapse 
250
} from 'reactstrap';
251

252
function NavigationBar() {
253
  const [isOpen, setIsOpen] = useState(false);
254
  const toggle = () => setIsOpen(!isOpen);
255

256
  return (
257
    <Navbar color="light" light expand="md">
258
      <NavbarBrand href="/">My App</NavbarBrand>
259
      <NavbarToggler onClick={toggle} />
260
      <Collapse isOpen={isOpen} navbar>
261
        <Nav className="me-auto" navbar>
262
          <NavItem>
263
            <NavLink href="/products/">Products</NavLink>
264
          </NavItem>
265
          <NavItem>
266
            <NavLink href="/about/">About</NavLink>
267
          </NavItem>
268
          <NavItem>
269
            <NavLink href="/contact/">Contact</NavLink>
270
          </NavItem>
271
        </Nav>
272
      </Collapse>
273
    </Navbar>
274
  );
275
}
276
```
277

278
### Tab Navigation
279

280
```jsx
281
import { Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap';
282

283
function TabNavigation() {
284
  const [activeTab, setActiveTab] = useState('1');
285

286
  return (
287
    <div>
288
      <Nav tabs>
289
        <NavItem>
290
          <NavLink
291
            className={activeTab === '1' ? 'active' : ''}
292
            onClick={() => setActiveTab('1')}
293
          >
294
            Tab 1
295
          </NavLink>
296
        </NavItem>
297
        <NavItem>
298
          <NavLink
299
            className={activeTab === '2' ? 'active' : ''}
300
            onClick={() => setActiveTab('2')}
301
          >
302
            Tab 2
303
          </NavLink>
304
        </NavItem>
305
      </Nav>
306
      <TabContent activeTab={activeTab}>
307
        <TabPane tabId="1">
308
          <p>Content for Tab 1</p>
309
        </TabPane>
310
        <TabPane tabId="2">
311
          <p>Content for Tab 2</p>
312
        </TabPane>
313
      </TabContent>
314
    </div>
315
  );
316
}
317
```
318

319
### Pill Navigation
320

321
```jsx
322
function PillNavigation() {
323
  return (
324
    <Nav pills>
325
      <NavItem>
326
        <NavLink href="#" active>Active Pill</NavLink>
327
      </NavItem>
328
      <NavItem>
329
        <NavLink href="#">Pill Link</NavLink>
330
      </NavItem>
331
      <NavItem>
332
        <NavLink href="#" disabled>Disabled Pill</NavLink>
333
      </NavItem>
334
    </Nav>
335
  );
336
}
337
```
338

339
### Vertical Navigation
340

341
```jsx
342
function VerticalNavigation() {
343
  return (
344
    <Nav vertical pills>
345
      <NavItem>
346
        <NavLink href="#" active>Dashboard</NavLink>
347
      </NavItem>
348
      <NavItem>
349
        <NavLink href="#">Profile</NavLink>
350
      </NavItem>
351
      <NavItem>
352
        <NavLink href="#">Messages</NavLink>
353
      </NavItem>
354
      <NavItem>
355
        <NavLink href="#">Settings</NavLink>
356
      </NavItem>
357
    </Nav>
358
  );
359
}
360
```
361

362
### Breadcrumb Navigation
363

364
```jsx
365
import { Breadcrumb, BreadcrumbItem } from 'reactstrap';
366

367
function BreadcrumbNavigation() {
368
  return (
369
    <Breadcrumb>
370
      <BreadcrumbItem>
371
        <a href="/">Home</a>
372
      </BreadcrumbItem>
373
      <BreadcrumbItem>
374
        <a href="/products/">Products</a>
375
      </BreadcrumbItem>
376
      <BreadcrumbItem>
377
        <a href="/products/electronics/">Electronics</a>
378
      </BreadcrumbItem>
379
      <BreadcrumbItem active>
380
        Smartphones
381
      </BreadcrumbItem>
382
    </Breadcrumb>
383
  );
384
}
385
```
386

387
### Dark Navbar
388

389
```jsx
390
function DarkNavbar() {
391
  return (
392
    <Navbar dark color="dark" expand="md">
393
      <NavbarBrand href="/">Dark Theme</NavbarBrand>
394
      <Nav className="me-auto" navbar>
395
        <NavItem>
396
          <NavLink href="/home/">Home</NavLink>
397
        </NavItem>
398
        <NavItem>
399
          <NavLink href="/features/">Features</NavLink>
400
        </NavItem>
401
      </Nav>
402
    </Navbar>
403
  );
404
}
405
```