0
# Interactive Components
1

2
Interactive elements including dropdowns, collapse components, carousels, accordion components, and other user-interactive features.
3

4
## Capabilities
5

6
### Dropdown
7

8
Dropdown container component for creating toggleable contextual overlays.
9

10
```javascript { .api }
11
/**
12
 * Dropdown container component
13
 * @param props.disabled - Disable dropdown interactions
14
 * @param props.direction - Dropdown direction ('up', 'down', 'left', 'right')
15
 * @param props.group - Apply button group styling
16
 * @param props.isOpen - Control dropdown visibility (required)
17
 * @param props.nav - Apply navigation styling
18
 * @param props.inNavbar - Optimize for navbar usage
19
 * @param props.tag - HTML element to render as (default: 'div')
20
 * @param props.toggle - Function to toggle dropdown (required)
21
 * @param props.className - Additional CSS classes
22
 * @param props.cssModule - CSS Module mapping object
23
 * @param props.children - DropdownToggle and DropdownMenu components
24
 */
25
function Dropdown(props: {
26
  disabled?: boolean;
27
  direction?: 'up' | 'down' | 'left' | 'right';
28
  group?: boolean;
29
  isOpen: boolean;
30
  nav?: boolean;
31
  inNavbar?: boolean;
32
  tag?: React.ElementType;
33
  toggle: () => void;
34
  className?: string;
35
  cssModule?: object;
36
  children?: React.ReactNode;
37
}): JSX.Element;
38
```
39

40
### DropdownToggle
41

42
Dropdown toggle button that triggers dropdown visibility.
43

44
```javascript { .api }
45
/**
46
 * Dropdown toggle button
47
 * @param props.caret - Show dropdown caret icon
48
 * @param props.color - Button color theme
49
 * @param props.disabled - Disable the toggle
50
 * @param props.outline - Use outline button style
51
 * @param props.size - Button size ('sm' or 'lg')
52
 * @param props.split - Render as split button
53
 * @param props.tag - HTML element to render as
54
 * @param props.nav - Apply navigation styling
55
 * @param props.className - Additional CSS classes
56
 * @param props.cssModule - CSS Module mapping object
57
 * @param props.children - Toggle button content
58
 */
59
function DropdownToggle(props: {
60
  caret?: boolean;
61
  color?: string;
62
  disabled?: boolean;
63
  outline?: boolean;
64
  size?: 'sm' | 'lg';
65
  split?: boolean;
66
  tag?: React.ElementType;
67
  nav?: boolean;
68
  className?: string;
69
  cssModule?: object;
70
  children?: React.ReactNode;
71
  [key: string]: any;
72
}): JSX.Element;
73
```
74

75
### DropdownMenu
76

77
Dropdown menu container for dropdown items and content.
78

79
```javascript { .api }
80
/**
81
 * Dropdown menu container  
82
 * @param props.tag - HTML element to render as (default: 'div')
83
 * @param props.children - DropdownItem components
84
 * @param props.right - Align menu to the right (deprecated, use end)
85
 * @param props.end - Align menu to the end
86
 * @param props.flip - Enable flip behavior
87
 * @param props.className - Additional CSS classes
88
 * @param props.cssModule - CSS Module mapping object
89
 */
90
function DropdownMenu(props: {
91
  tag?: React.ElementType;
92
  children?: React.ReactNode;
93
  right?: boolean;
94
  end?: boolean;
95
  flip?: boolean;
96
  className?: string;
97
  cssModule?: object;
98
}): JSX.Element;
99
```
100

101
### DropdownItem
102

103
Individual dropdown menu item component.
104

105
```javascript { .api }
106
/**
107
 * Individual dropdown menu item
108
 * @param props.active - Mark item as active
109
 * @param props.disabled - Disable the item
110
 * @param props.divider - Render as divider line
111
 * @param props.header - Render as header text
112
 * @param props.toggle - Function to close dropdown on click
113
 * @param props.tag - HTML element to render as
114
 * @param props.className - Additional CSS classes
115
 * @param props.cssModule - CSS Module mapping object
116
 * @param props.children - Item content
117
 */
118
function DropdownItem(props: {
119
  active?: boolean;
120
  disabled?: boolean;
121
  divider?: boolean;
122
  header?: boolean;
123
  toggle?: () => void;
124
  tag?: React.ElementType;
125
  className?: string;
126
  cssModule?: object;
127
  children?: React.ReactNode;
128
  [key: string]: any;
129
}): JSX.Element;
130
```
131

132
### Collapse
133

134
Bootstrap collapse component for showing/hiding content with animation.
135

136
```javascript { .api }
137
/**
138
 * Bootstrap collapse component
139
 * @param props.isOpen - Control collapse visibility (required)
140
 * @param props.tag - HTML element to render as (default: 'div')
141
 * @param props.className - Additional CSS classes
142
 * @param props.cssModule - CSS Module mapping object
143
 * @param props.navbar - Apply navbar-specific styling
144
 * @param props.delay - Transition delay configuration
145
 * @param props.onOpened - Callback when collapse finishes opening
146
 * @param props.onClosed - Callback when collapse finishes closing
147
 * @param props.children - Collapsible content
148
 */
149
function Collapse(props: {
150
  isOpen: boolean;
151
  tag?: React.ElementType;
152
  className?: string;
153
  cssModule?: object;
154
  navbar?: boolean;
155
  delay?: object;
156
  onOpened?: () => void;
157
  onClosed?: () => void;
158
  children?: React.ReactNode;
159
}): JSX.Element;
160
```
161

162
### Carousel
163

164
Bootstrap carousel/slider component with navigation controls and indicators.
165

166
```javascript { .api }
167
/**
168
 * Bootstrap carousel component
169
 * @param props.activeIndex - Currently active slide index
170
 * @param props.next - Function to go to next slide
171
 * @param props.previous - Function to go to previous slide
172
 * @param props.keyboard - Enable keyboard navigation
173
 * @param props.pause - Pause behavior ('hover' or false)
174
 * @param props.ride - Auto-play behavior ('carousel')
175
 * @param props.interval - Auto-advance interval in milliseconds
176
 * @param props.children - CarouselItem components
177
 * @param props.mouseEnter - Mouse enter handler
178
 * @param props.mouseExit - Mouse exit handler
179
 * @param props.slide - Enable slide animations
180
 * @param props.cssModule - CSS Module mapping object
181
 * @param props.className - Additional CSS classes
182
 * @param props.tag - HTML element to render as (default: 'div')
183
 */
184
function Carousel(props: {
185
  activeIndex?: number;
186
  next?: () => void;
187
  previous?: () => void;
188
  keyboard?: boolean;
189
  pause?: 'hover' | false;
190
  ride?: 'carousel';
191
  interval?: number | false;
192
  children?: React.ReactNode;
193
  mouseEnter?: () => void;
194
  mouseExit?: () => void;
195
  slide?: boolean;
196
  cssModule?: object;
197
  className?: string;
198
  tag?: React.ElementType;
199
}): JSX.Element;
200
```
201

202
### Accordion
203

204
Bootstrap accordion component for creating collapsible content sections.
205

206
```javascript { .api }
207
/**
208
 * Bootstrap accordion container component
209
 * @param props.open - Currently open accordion items (string or array)
210
 * @param props.toggle - Function to toggle accordion items
211
 * @param props.tag - HTML element to render as (default: 'div')
212
 * @param props.className - Additional CSS classes
213
 * @param props.cssModule - CSS Module mapping object
214
 * @param props.stayOpen - Allow multiple items to stay open
215
 * @param props.flush - Remove borders and rounded corners
216
 * @param props.children - AccordionItem components
217
 */
218
function Accordion(props: {
219
  open?: string | string[];
220
  toggle?: (id: string) => void;
221
  tag?: React.ElementType;
222
  className?: string;
223
  cssModule?: object;
224
  stayOpen?: boolean;
225
  flush?: boolean;
226
  children?: React.ReactNode;
227
}): JSX.Element;
228
```
229

230
### AccordionItem
231

232
Individual accordion section component.
233

234
```javascript { .api }
235
/**
236
 * Individual accordion section
237
 * @param props.tag - HTML element to render as (default: 'div')
238
 * @param props.className - Additional CSS classes
239
 * @param props.cssModule - CSS Module mapping object
240
 * @param props.children - AccordionHeader and AccordionBody components
241
 */
242
function AccordionItem(props: {
243
  tag?: React.ElementType;
244
  className?: string;
245
  cssModule?: object;
246
  children?: React.ReactNode;
247
}): JSX.Element;
248
```
249

250
### AccordionHeader
251

252
Accordion item header with toggle functionality.
253

254
```javascript { .api }
255
/**
256
 * Accordion item header component
257
 * @param props.tag - HTML element to render as (default: 'h2')
258
 * @param props.className - Additional CSS classes
259
 * @param props.cssModule - CSS Module mapping object
260
 * @param props.targetId - ID of the accordion body to toggle
261
 * @param props.children - Header content
262
 */
263
function AccordionHeader(props: {
264
  tag?: React.ElementType;
265
  className?: string;
266
  cssModule?: object;
267
  targetId?: string;
268
  children?: React.ReactNode;
269
}): JSX.Element;
270
```
271

272
### AccordionBody
273

274
Accordion collapsible body content.
275

276
```javascript { .api }
277
/**
278
 * Accordion collapsible body component
279
 * @param props.accordionId - ID that matches the header targetId
280
 * @param props.tag - HTML element to render as (default: 'div')
281
 * @param props.className - Additional CSS classes
282
 * @param props.cssModule - CSS Module mapping object
283
 * @param props.children - Accordion body content
284
 */
285
function AccordionBody(props: {
286
  accordionId?: string;
287
  tag?: React.ElementType;
288
  className?: string;
289
  cssModule?: object;
290
  children?: React.ReactNode;
291
}): JSX.Element;
292
```
293

294
### Offcanvas
295

296
Bootstrap offcanvas component for slide-out sidebars and panels.
297

298
```javascript { .api }
299
/**
300
 * Bootstrap offcanvas sidebar component
301
 * @param props.autoFocus - Auto focus on open (default: true)
302
 * @param props.backdrop - Show backdrop and close on click (default: true)
303
 * @param props.backdropClassName - CSS class for backdrop element
304
 * @param props.backdropTransition - Backdrop transition configuration
305
 * @param props.container - Container element for portal (default: 'body')
306
 * @param props.direction - Slide direction (default: 'start')
307
 * @param props.fade - Enable fade transition (default: true)
308
 * @param props.innerRef - Ref for dialog element
309
 * @param props.isOpen - Control offcanvas visibility (required)
310
 * @param props.keyboard - Close on Escape key (default: true)
311
 * @param props.labelledBy - ID of labelling element for ARIA
312
 * @param props.offcanvasTransition - Offcanvas transition configuration
313
 * @param props.onClosed - Callback when offcanvas closes
314
 * @param props.onEnter - Callback when entering
315
 * @param props.onExit - Callback when exiting
316
 * @param props.onOpened - Callback when offcanvas opens
317
 * @param props.returnFocusAfterClose - Return focus to trigger after close (default: true)
318
 * @param props.role - ARIA role (default: 'dialog')
319
 * @param props.scrollable - Allow body scrolling when open (default: false)
320
 * @param props.style - Inline styles
321
 * @param props.toggle - Function to toggle offcanvas
322
 * @param props.trapFocus - Trap focus within offcanvas (default: false)
323
 * @param props.unmountOnClose - Unmount on close (default: true)
324
 * @param props.zIndex - Z-index value (default: 1050)
325
 * @param props.className - Additional CSS classes
326
 * @param props.cssModule - CSS Module mapping object
327
 * @param props.children - Offcanvas content (OffcanvasHeader, OffcanvasBody)
328
 */
329
function Offcanvas(props: {
330
  autoFocus?: boolean;
331
  backdrop?: boolean;
332
  backdropClassName?: string;
333
  backdropTransition?: object;
334
  container?: string | Element | (() => Element);
335
  direction?: 'start' | 'end' | 'top' | 'bottom';
336
  fade?: boolean;
337
  innerRef?: React.Ref;
338
  isOpen: boolean;
339
  keyboard?: boolean;
340
  labelledBy?: string;
341
  offcanvasTransition?: object;
342
  onClosed?: () => void;
343
  onEnter?: () => void;
344
  onExit?: () => void;
345
  onOpened?: () => void;
346
  returnFocusAfterClose?: boolean;
347
  role?: string;
348
  scrollable?: boolean;
349
  style?: React.CSSProperties;
350
  toggle?: () => void;
351
  trapFocus?: boolean;
352
  unmountOnClose?: boolean;
353
  zIndex?: number | string;
354
  className?: string;
355
  cssModule?: object;
356
  children?: React.ReactNode;
357
}): JSX.Element;
358
```
359

360
## Usage Examples
361

362
### Basic Dropdown
363

364
```jsx
365
import { 
366
  Dropdown, 
367
  DropdownToggle, 
368
  DropdownMenu, 
369
  DropdownItem 
370
} from 'reactstrap';
371

372
function BasicDropdown() {
373
  const [dropdownOpen, setDropdownOpen] = useState(false);
374

375
  return (
376
    <Dropdown isOpen={dropdownOpen} toggle={() => setDropdownOpen(!dropdownOpen)}>
377
      <DropdownToggle caret>
378
        Dropdown
379
      </DropdownToggle>
380
      <DropdownMenu>
381
        <DropdownItem>Action</DropdownItem>
382
        <DropdownItem>Another Action</DropdownItem>
383
        <DropdownItem divider />
384
        <DropdownItem>Something else here</DropdownItem>
385
      </DropdownMenu>
386
    </Dropdown>
387
  );
388
}
389
```
390

391
### Collapse Example
392

393
```jsx
394
import { Button, Collapse, Card, CardBody } from 'reactstrap';
395

396
function CollapseExample() {
397
  const [isOpen, setIsOpen] = useState(false);
398

399
  return (
400
    <div>
401
      <Button color="primary" onClick={() => setIsOpen(!isOpen)}>
402
        Toggle
403
      </Button>
404
      <Collapse isOpen={isOpen}>
405
        <Card>
406
          <CardBody>
407
            This content will collapse and expand!
408
          </CardBody>
409
        </Card>
410
      </Collapse>
411
    </div>
412
  );
413
}
414
```