0
# Interactive Components
1

2
UIkit's interactive components provide JavaScript-powered functionality including modals, dropdowns, accordions, tooltips, and other dynamic user interface elements.
3

4
## Capabilities
5

6
### Modal
7

8
Modal dialog overlay component for displaying content above the main interface.
9

10
```css { .api }
11
/* Modal Structure */
12
.uk-modal {
13
  /* Modal overlay container */
14
  position: fixed;
15
  top: 0;
16
  right: 0;
17
  bottom: 0;
18
  left: 0;
19
  z-index: 1010;
20
  display: none;
21
  overflow-y: auto;
22
  background: rgba(0,0,0,0.6);
23
}
24

25
.uk-modal-dialog {
26
  /* Modal content container */
27
  position: relative;
28
  margin: 50px auto;
29
  max-width: 600px;
30
  background: #fff;
31
  border-radius: 5px;
32
}
33

34
/* Modal Sizes */
35
.uk-modal-container { /* Container-sized modal */ }
36
.uk-modal-full { /* Full-screen modal */ }
37

38
/* Modal Components */
39
.uk-modal-header { /* Modal header section */ }
40
.uk-modal-body { /* Modal body content */ }
41
.uk-modal-footer { /* Modal footer section */ }
42
.uk-modal-title { /* Modal title styling */ }
43
.uk-modal-close { /* Modal close button */ }
44
```
45

46
**JavaScript API:**
47

48
```javascript { .api }
49
/**
50
 * Modal component for overlay dialogs
51
 */
52
UIkit.modal(element: HTMLElement | string, options?: {
53
  /** Keyboard ESC closes modal */
54
  keyboard?: boolean;
55
  /** Background click closes modal */
56
  'bg-close'?: boolean;
57
  /** Modal stacking support */
58
  stack?: boolean;
59
  /** Container element */
60
  container?: boolean | string;
61
  /** Close selector */
62
  'sel-close'?: string;
63
}): ModalComponent;
64

65
interface ModalComponent {
66
  /** Modal element */
67
  $el: HTMLElement;
68
  /** Show modal */
69
  show(): Promise<void>;
70
  /** Hide modal */
71
  hide(): Promise<void>;
72
  /** Toggle modal visibility */
73
  toggle(): Promise<void>;
74
  /** Check if modal is active */
75
  isToggled(): boolean;
76
}
77

78
// Global modal methods
79
UIkit.modal.alert(message: string): Promise<void>;
80
UIkit.modal.confirm(message: string): Promise<boolean>;
81
UIkit.modal.prompt(message: string, value?: string): Promise<string | null>;
82
UIkit.modal.dialog(content: string, options?: object): ModalComponent;
83
```
84

85
**Usage Examples:**
86

87
```html
88
<!-- Basic Modal -->
89
<div id="modal-example" uk-modal>
90
    <div class="uk-modal-dialog uk-modal-body">
91
        <h2 class="uk-modal-title">Headline</h2>
92
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
93
        <p class="uk-text-right">
94
            <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
95
            <button class="uk-button uk-button-primary" type="button">Save</button>
96
        </p>
97
    </div>
98
</div>
99

100
<!-- Trigger Button -->
101
<button class="uk-button uk-button-default" type="button" uk-toggle="target: #modal-example">Open</button>
102

103
<!-- Full Modal -->
104
<div id="modal-full" class="uk-modal-full" uk-modal>
105
    <div class="uk-modal-dialog">
106
        <button class="uk-modal-close-full uk-close-large" type="button" uk-close></button>
107
        <div class="uk-grid-collapse uk-child-width-1-2@s uk-flex-middle" uk-grid>
108
            <div class="uk-background-cover" style="background-image: url('images/photo.jpg');" uk-height-viewport></div>
109
            <div class="uk-padding-large">
110
                <h1>Headline</h1>
111
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
112
            </div>
113
        </div>
114
    </div>
115
</div>
116
```
117

118
```javascript
119
// Programmatic modal usage
120
const modal = UIkit.modal('#modal-example');
121

122
// Show modal
123
modal.show();
124

125
// Hide modal
126
modal.hide();
127

128
// Alert dialog
129
UIkit.modal.alert('Hello World!');
130

131
// Confirmation dialog
132
UIkit.modal.confirm('Are you sure?').then(() => {
133
    console.log('Confirmed');
134
});
135

136
// Prompt dialog
137
UIkit.modal.prompt('Enter your name:', 'Default').then((name) => {
138
    if (name !== null) {
139
        console.log('Name:', name);
140
    }
141
});
142
```
143

144
### Dropdown
145

146
Dropdown positioning component for contextual overlays.
147

148
```css { .api }
149
/* Dropdown Container */
150
.uk-dropdown {
151
  /* Dropdown content container */
152
  display: none;
153
  position: absolute;
154
  z-index: 1020;
155
  min-width: 200px;
156
  padding: 25px;
157
  background: #fff;
158
  border-radius: 4px;
159
  box-shadow: 0 5px 12px rgba(0,0,0,0.15);
160
}
161

162
/* Dropdown Sizes */
163
.uk-dropdown-small { /* Small dropdown */ }
164
.uk-dropdown-large { /* Large dropdown */ }
165

166
/* Dropdown Nav */
167
.uk-dropdown .uk-nav {
168
  /* Navigation inside dropdown */
169
  margin: -10px -15px;
170
}
171
```
172

173
**JavaScript API:**
174

175
```javascript { .api }
176
/**
177
 * Dropdown component for positioned overlays
178
 */
179
UIkit.dropdown(element: HTMLElement | string, options?: {
180
  /** Toggle selector */
181
  toggle?: string | boolean;
182
  /** Dropdown position */
183
  pos?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left-top' | 'left-center' | 'left-bottom' | 'right-top' | 'right-center' | 'right-bottom';
184
  /** Trigger mode */
185
  mode?: 'click' | 'hover';
186
  /** Hover delay */
187
  'delay-show'?: number;
188
  /** Hide delay */
189
  'delay-hide'?: number;
190
  /** Boundary element */
191
  boundary?: string | HTMLElement;
192
  /** Boundary alignment */
193
  'boundary-align'?: boolean;
194
  /** Flip dropdown position */
195
  flip?: boolean | string;
196
  /** Dropdown offset */
197
  offset?: number;
198
  /** Animation */
199
  animation?: string;
200
  /** Animation duration */
201
  duration?: number;
202
}): DropdownComponent;
203

204
interface DropdownComponent {
205
  /** Dropdown element */
206
  $el: HTMLElement;
207
  /** Show dropdown */
208
  show(): Promise<void>;
209
  /** Hide dropdown */
210
  hide(delay?: boolean): Promise<void>;
211
  /** Toggle dropdown visibility */
212
  toggle(): Promise<void>;
213
  /** Check if dropdown is active */
214
  isToggled(): boolean;
215
}
216
```
217

218
**Usage Examples:**
219

220
```html
221
<!-- Basic Dropdown -->
222
<button class="uk-button uk-button-default" type="button">Hover</button>
223
<div uk-dropdown>
224
    <ul class="uk-nav uk-dropdown-nav">
225
        <li class="uk-active"><a href="#">Active</a></li>
226
        <li><a href="#">Item</a></li>
227
        <li class="uk-nav-header">Header</li>
228
        <li><a href="#">Item</a></li>
229
        <li class="uk-nav-divider"></li>
230
        <li><a href="#">Item</a></li>
231
    </ul>
232
</div>
233

234
<!-- Click Dropdown -->
235
<button class="uk-button uk-button-default" type="button">Click</button>
236
<div uk-dropdown="mode: click">
237
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
238
</div>
239

240
<!-- Positioned Dropdown -->
241
<button class="uk-button uk-button-default" type="button">Bottom Right</button>
242
<div uk-dropdown="pos: bottom-right">
243
    <ul class="uk-nav uk-dropdown-nav">
244
        <li><a href="#">Item</a></li>
245
        <li><a href="#">Item</a></li>
246
    </ul>
247
</div>
248
```
249

250
```javascript
251
// Programmatic dropdown usage
252
const dropdown = UIkit.dropdown('#dropdown-example', {
253
    mode: 'click',
254
    pos: 'bottom-center'
255
});
256

257
// Show dropdown
258
dropdown.show();
259

260
// Hide dropdown
261
dropdown.hide();
262
```
263

264
### Accordion
265

266
Collapsible content sections component.
267

268
```css { .api }
269
/* Accordion Container */
270
.uk-accordion {
271
  /* Accordion wrapper */
272
  margin: 0;
273
  padding: 0;
274
  list-style: none;
275
}
276

277
/* Accordion Item */
278
.uk-accordion > li {
279
  /* Individual accordion item */
280
  margin-bottom: 20px;
281
}
282

283
.uk-accordion-title {
284
  /* Accordion header/trigger */
285
  display: block;
286
  font-size: 18px;
287
  line-height: 1.4;
288
  color: #333;
289
  cursor: pointer;
290
}
291

292
.uk-accordion-content {
293
  /* Accordion content panel */
294
  margin-top: 20px;
295
}
296

297
/* Accordion States */
298
.uk-open > .uk-accordion-title::after {
299
  /* Open accordion indicator */
300
  content: "";
301
}
302
```
303

304
**JavaScript API:**
305

306
```javascript { .api }
307
/**
308
 * Accordion component for collapsible content
309
 */
310
UIkit.accordion(element: HTMLElement | string, options?: {
311
  /** Active accordion items */
312
  active?: number | false;
313
  /** Animation type */
314
  animation?: boolean;
315
  /** Collapsible all items */
316
  collapsible?: boolean;
317
  /** Allow multiple open items */
318
  multiple?: boolean;
319
  /** Item targets selector */
320
  targets?: string;
321
  /** Toggle selector */
322
  toggle?: string;
323
  /** Content selector */
324
  content?: string;
325
  /** Transition type */
326
  transition?: string;
327
}): AccordionComponent;
328

329
interface AccordionComponent {
330
  /** Accordion element */
331
  $el: HTMLElement;
332
  /** Toggle specific item */
333
  toggle(index: number, animate?: boolean): void;
334
}
335
```
336

337
**Usage Examples:**
338

339
```html
340
<!-- Basic Accordion -->
341
<ul uk-accordion>
342
    <li class="uk-open">
343
        <a class="uk-accordion-title" href="#">Item 1</a>
344
        <div class="uk-accordion-content">
345
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
346
        </div>
347
    </li>
348
    <li>
349
        <a class="uk-accordion-title" href="#">Item 2</a>
350
        <div class="uk-accordion-content">
351
            <p>Ut enim ad minim veniam, quis nostrud exercitation.</p>
352
        </div>
353
    </li>
354
    <li>
355
        <a class="uk-accordion-title" href="#">Item 3</a>
356
        <div class="uk-accordion-content">
357
            <p>Duis aute irure dolor in reprehenderit in voluptate.</p>
358
        </div>
359
    </li>
360
</ul>
361

362
<!-- Multiple Open Accordion -->
363
<ul uk-accordion="multiple: true">
364
    <li class="uk-open">
365
        <a class="uk-accordion-title" href="#">Item 1</a>
366
        <div class="uk-accordion-content">
367
            <p>Content 1</p>
368
        </div>
369
    </li>
370
    <li class="uk-open">
371
        <a class="uk-accordion-title" href="#">Item 2</a>
372
        <div class="uk-accordion-content">
373
            <p>Content 2</p>
374
        </div>
375
    </li>
376
</ul>
377
```
378

379
### Tooltip
380

381
Contextual tooltip component for additional information display.
382

383
```css { .api }
384
/* Tooltip Container */
385
.uk-tooltip {
386
  /* Tooltip content container */
387
  display: none;
388
  position: absolute;
389
  z-index: 1030;
390
  max-width: 200px;
391
  padding: 3px 6px;
392
  background: #666;
393
  border-radius: 3px;
394
  color: #fff;
395
  font-size: 12px;
396
}
397

398
/* Tooltip Arrow */
399
.uk-tooltip::before {
400
  /* Tooltip arrow/pointer */
401
  content: "";
402
  position: absolute;
403
  border: 5px solid transparent;
404
}
405
```
406

407
**JavaScript API:**
408

409
```javascript { .api }
410
/**
411
 * Tooltip component for contextual information
412
 */
413
UIkit.tooltip(element: HTMLElement | string, options?: {
414
  /** Tooltip text */
415
  title?: string;
416
  /** Tooltip position */
417
  pos?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
418
  /** Tooltip offset */
419
  offset?: number | boolean;
420
  /** Show animation */
421
  animation?: string;
422
  /** Animation duration */
423
  duration?: number;
424
  /** Show delay */
425
  delay?: number;
426
  /** CSS class */
427
  cls?: string;
428
  /** Container element */
429
  container?: string | HTMLElement;
430
}): TooltipComponent;
431

432
interface TooltipComponent {
433
  /** Tooltip element */
434
  $el: HTMLElement;
435
  /** Show tooltip */
436
  show(): void;
437
  /** Hide tooltip */
438
  hide(): void;
439
}
440
```
441

442
**Usage Examples:**
443

444
```html
445
<!-- Basic Tooltip -->
446
<button class="uk-button uk-button-default" uk-tooltip="Hello World">Hover</button>
447

448
<!-- Positioned Tooltip -->
449
<button class="uk-button uk-button-default" uk-tooltip="title: Hello World; pos: top-right">Top Right</button>
450

451
<!-- Tooltip with Delay -->
452
<button class="uk-button uk-button-default" uk-tooltip="title: Hello World; delay: 500">Delayed</button>
453
```
454

455
### Offcanvas
456

457
Off-screen panel component for navigation and content.
458

459
```css { .api }
460
/* Offcanvas Container */
461
.uk-offcanvas {
462
  /* Offcanvas overlay */
463
  display: none;
464
  position: fixed;
465
  top: 0;
466
  bottom: 0;
467
  left: 0;
468
  z-index: 1000;
469
}
470

471
.uk-offcanvas-bar {
472
  /* Offcanvas content panel */
473
  position: absolute;
474
  top: 0;
475
  bottom: 0;
476
  left: -270px;
477
  width: 270px;
478
  padding: 20px;
479
  background: #222;
480
  overflow-y: auto;
481
}
482

483
/* Offcanvas Modes */
484
.uk-offcanvas-slide { /* Slide mode */ }
485
.uk-offcanvas-push { /* Push mode */ }
486
.uk-offcanvas-reveal { /* Reveal mode */ }
487

488
/* Offcanvas Flip */
489
.uk-offcanvas-flip .uk-offcanvas-bar {
490
  /* Right-side offcanvas */
491
  left: auto;
492
  right: -270px;
493
}
494
```
495

496
**JavaScript API:**
497

498
```javascript { .api }
499
/**
500
 * Offcanvas component for off-screen panels  
501
 */
502
UIkit.offcanvas(element: HTMLElement | string, options?: {
503
  /** Offcanvas mode */
504
  mode?: 'slide' | 'push' | 'reveal' | 'none';
505
  /** Flip to right side */
506
  flip?: boolean;
507
  /** Overlay background */
508
  overlay?: boolean;
509
  /** Escape key closes */
510
  'esc-close'?: boolean;
511
  /** Background click closes */
512
  'bg-close'?: boolean;
513
  /** Container element */
514
  container?: boolean | string;
515
}): OffcanvasComponent;
516

517
interface OffcanvasComponent {
518
  /** Offcanvas element */
519
  $el: HTMLElement;
520
  /** Show offcanvas */
521
  show(): Promise<void>;
522
  /** Hide offcanvas */
523
  hide(): Promise<void>;
524
  /** Toggle offcanvas visibility */
525
  toggle(): Promise<void>;
526
}
527
```
528

529
**Usage Examples:**
530

531
```html
532
<!-- Basic Offcanvas -->
533
<button class="uk-button uk-button-default" type="button" uk-toggle="target: #offcanvas-slide">Open</button>
534

535
<div id="offcanvas-slide" uk-offcanvas>
536
    <div class="uk-offcanvas-bar">
537
        <button class="uk-offcanvas-close" type="button" uk-close></button>
538
        <h3>Title</h3>
539
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
540
    </div>
541
</div>
542

543
<!-- Push Mode Offcanvas -->
544
<div id="offcanvas-push" uk-offcanvas="mode: push; overlay: true">
545
    <div class="uk-offcanvas-bar">
546
        <button class="uk-offcanvas-close" type="button" uk-close></button>
547
        <ul class="uk-nav uk-nav-default">
548
            <li class="uk-active"><a href="#">Active</a></li>
549
            <li><a href="#">Item</a></li>
550
        </ul>
551
    </div>
552
</div>
553
```
554

555
### Toggle
556

557
Element visibility toggle component.
558

559
```javascript { .api }
560
/**
561
 * Toggle component for element visibility
562
 */
563
UIkit.toggle(element: HTMLElement | string, options?: {
564
  /** Target element selector */
565
  target?: string;
566
  /** Toggle mode */
567
  mode?: 'click' | 'hover';
568
  /** CSS class to toggle */
569
  cls?: string;
570
  /** Media query condition */
571
  media?: string;
572
  /** Animation */
573
  animation?: string;
574
  /** Animation duration */
575
  duration?: number;
576
  /** Queued animations */
577
  queued?: boolean;
578
}): ToggleComponent;
579

580
interface ToggleComponent {
581
  /** Toggle element */
582
  $el: HTMLElement;
583
  /** Toggle visibility */
584
  toggle(): Promise<void>;
585
}
586
```
587

588
**Usage Examples:**
589

590
```html
591
<!-- Basic Toggle -->
592
<button class="uk-button uk-button-default" type="button" uk-toggle="target: #toggle-animation">Toggle</button>
593
<div id="toggle-animation">
594
    <p>What's up?</p>
595
</div>
596

597
<!-- Class Toggle -->
598
<button class="uk-button uk-button-default" type="button" uk-toggle="target: #toggle-class; cls: uk-card-primary">Toggle Class</button>
599
<div id="toggle-class" class="uk-card uk-card-default uk-card-body uk-width-1-2">
600
    <p>This card will toggle between default and primary styling.</p>
601
</div>
602

603
<!-- Multiple Targets -->
604
<button class="uk-button uk-button-default" type="button" uk-toggle="target: .toggle">Toggle All</button>
605
<div class="toggle">Target 1</div>
606
<div class="toggle">Target 2</div>
607
```
608

609
### Switcher
610

611
Content switching component for displaying different content panels.
612

613
```javascript { .api }
614
/**
615
 * Switcher component for content switching
616
 */
617
UIkit.switcher(element: HTMLElement | string, options?: {
618
  /** Target switcher content */
619
  connect?: string;
620
  /** Toggle selector */
621
  toggle?: string;
622
  /** Active item index */
623
  active?: number;
624
  /** Animation */
625
  animation?: string;
626
  /** Animation duration */
627
  duration?: number;
628
  /** Swiping support */
629
  swiping?: boolean;
630
}): SwitcherComponent;
631

632
interface SwitcherComponent {
633
  /** Switcher element */
634
  $el: HTMLElement;
635
  /** Show specific item */
636
  show(index: number): void;
637
}
638
```
639

640
**Usage Examples:**
641

642
```html
643
<!-- Basic Switcher -->
644
<ul class="uk-subnav uk-subnav-pill" uk-switcher>
645
    <li><a href="#">Item</a></li>
646
    <li><a href="#">Item</a></li>
647
    <li><a href="#">Item</a></li>
648
</ul>
649

650
<ul class="uk-switcher uk-margin">
651
    <li>Hello!</li>
652
    <li>Hello again!</li>
653
    <li>Bazinga!</li>
654
</ul>
655

656
<!-- Connected Switcher -->
657
<ul class="uk-subnav uk-subnav-pill" uk-switcher="connect: #my-id">
658
    <li><a href="#">Item</a></li>
659
    <li><a href="#">Item</a></li>
660
</ul>
661

662
<ul id="my-id" class="uk-switcher uk-margin">
663
    <li>Connected content 1</li>
664
    <li>Connected content 2</li>
665
</ul>
666
```