0
# Navigation Components
1

2
UIkit's navigation components provide comprehensive navigation systems including navbars, menus, breadcrumbs, and pagination for site navigation and wayfinding.
3

4
## Capabilities
5

6
### Navbar
7

8
Responsive navigation bar component with multiple sections and dropdown support.
9

10
```css { .api }
11
/* Navbar Container */
12
.uk-navbar-container {
13
  /* Main navbar container with background and padding */
14
  background: #fff;
15
  position: relative;
16
}
17

18
/* Navbar Structure */
19
.uk-navbar {
20
  /* Navbar flex container */
21
  display: flex;
22
  position: relative;
23
}
24

25
.uk-navbar-left { /* Left navbar section */ }
26
.uk-navbar-center { /* Center navbar section */ }  
27
.uk-navbar-right { /* Right navbar section */ }
28

29
/* Navbar Items */
30
.uk-navbar-nav {
31
  /* Navbar navigation list */
32
  display: flex;
33
  margin: 0;
34
  padding: 0;
35
  list-style: none;
36
}
37

38
.uk-navbar-nav > li {
39
  /* Navbar navigation list item */
40
  position: relative;
41
}
42

43
.uk-navbar-nav > li > a {
44
  /* Navbar navigation link */
45
  display: block;
46
  padding: 0 15px;
47
  color: #666;
48
  text-decoration: none;
49
}
50

51
.uk-navbar-item {
52
  /* Generic navbar item (logo, text, etc.) */
53
  display: block;
54
  padding: 0 15px;
55
}
56

57
.uk-navbar-toggle {
58
  /* Mobile navbar toggle button */
59
  display: none;
60
}
61

62
/* Navbar Variants */
63
.uk-navbar-transparent { /* Transparent navbar background */ }
64
.uk-navbar-sticky { /* Sticky navbar behavior */ }
65

66
/* Mobile Navbar */
67
@media (max-width: 959px) {
68
  .uk-navbar-toggle {
69
    display: block;
70
  }
71
}
72
```
73

74
**JavaScript API:**
75

76
```javascript { .api }
77
/**
78
 * Navbar component for responsive navigation behavior
79
 */
80
UIkit.navbar(element: HTMLElement, options?: {
81
  /** Navbar alignment */
82
  align?: 'left' | 'center' | 'right';
83
  /** Dropdown mode */
84
  mode?: 'click' | 'hover';
85
  /** Dropdown duration */
86
  duration?: number;
87
  /** Boundary element */
88
  boundary?: string | HTMLElement;
89
  /** Boundary alignment */
90
  'boundary-align'?: boolean;
91
  /** Dropdown offset */
92
  offset?: number;
93
}): NavbarComponent;
94

95
interface NavbarComponent {
96
  /** Navbar element */
97
  $el: HTMLElement;
98
}
99
```
100

101
**Usage Examples:**
102

103
```html
104
<!-- Basic Navbar -->
105
<nav class="uk-navbar-container" uk-navbar>
106
    <div class="uk-navbar-left">
107
        <a class="uk-navbar-item uk-logo" href="#">Logo</a>
108
        <ul class="uk-navbar-nav">
109
            <li class="uk-active"><a href="#">Active</a></li>
110
            <li><a href="#">Item</a></li>
111
            <li><a href="#">Item</a></li>
112
        </ul>
113
    </div>
114
    <div class="uk-navbar-right">
115
        <ul class="uk-navbar-nav">
116
            <li><a href="#">Login</a></li>
117
        </ul>
118
    </div>
119
</nav>
120

121
<!-- Navbar with Dropdown -->
122
<nav class="uk-navbar-container" uk-navbar>
123
    <div class="uk-navbar-left">
124
        <ul class="uk-navbar-nav">
125
            <li>
126
                <a href="#">Parent</a>
127
                <div class="uk-navbar-dropdown">
128
                    <ul class="uk-nav uk-navbar-dropdown-nav">
129
                        <li class="uk-active"><a href="#">Active</a></li>
130
                        <li><a href="#">Item</a></li>
131
                        <li class="uk-nav-header">Header</li>
132
                        <li><a href="#">Item</a></li>
133
                        <li class="uk-nav-divider"></li>
134
                        <li><a href="#">Item</a></li>
135
                    </ul>
136
                </div>
137
            </li>
138
        </ul>
139
    </div>
140
</nav>
141
```
142

143
### Nav
144

145
Flexible navigation lists with multiple styling variants.
146

147
```css { .api }
148
/* Nav Base */
149
.uk-nav {
150
  /* Base navigation list */
151
  margin: 0;
152
  padding: 0;
153
  list-style: none;
154
}
155

156
.uk-nav > li > a {
157
  /* Navigation link styling */
158
  display: block;
159
  text-decoration: none;
160
  color: #999;
161
}
162

163
.uk-nav > li.uk-active > a {
164
  /* Active navigation item */
165
  color: #333;
166
}
167

168
/* Nav Variants */
169
.uk-nav-default { /* Default nav styling */ }
170
.uk-nav-primary { /* Primary nav with accent color */ }
171

172
/* Nav Item Types */
173
.uk-nav-header {
174
  /* Nav section header */
175
  padding: 5px 0;
176
  text-transform: uppercase;
177
  color: #999;
178
  font-size: 11px;
179
}
180

181
.uk-nav-divider {
182
  /* Nav section divider */
183
  margin: 5px 0;
184
  border-top: 1px solid #e5e5e5;
185
}
186

187
/* Nav Sub Lists */
188
.uk-nav-sub {
189
  /* Sub-navigation list */
190
  padding-left: 15px;
191
}
192

193
.uk-nav .uk-nav-sub {
194
  /* Nested sub-navigation */
195
  padding-top: 5px;
196
  padding-bottom: 5px;
197
}
198

199
/* Nav Parent Icon */
200
.uk-nav-parent-icon {
201
  /* Parent item icon indicator */
202
  margin-left: auto;
203
}
204
```
205

206
**Usage Examples:**
207

208
```html
209
<!-- Default Nav -->
210
<ul class="uk-nav uk-nav-default">
211
    <li class="uk-active"><a href="#">Active</a></li>
212
    <li><a href="#">Item</a></li>
213
    <li class="uk-nav-header">Header</li>
214
    <li><a href="#">Item</a></li>
215
    <li class="uk-nav-divider"></li>
216
    <li><a href="#">Item</a></li>
217
</ul>
218

219
<!-- Nav with Sub Items -->
220
<ul class="uk-nav uk-nav-default">
221
    <li class="uk-parent">
222
        <a href="#">Parent</a>
223
        <ul class="uk-nav-sub">
224
            <li><a href="#">Sub item</a></li>
225
            <li><a href="#">Sub item</a></li>
226
        </ul>
227
    </li>
228
</ul>
229

230
<!-- Primary Nav -->
231
<ul class="uk-nav uk-nav-primary">
232
    <li class="uk-active"><a href="#">Active</a></li>
233
    <li><a href="#">Item</a></li>
234
    <li><a href="#">Item</a></li>
235
</ul>
236
```
237

238
### Breadcrumb
239

240
Breadcrumb navigation showing current page location in site hierarchy.
241

242
```css { .api }
243
/* Breadcrumb List */
244
.uk-breadcrumb {
245
  /* Breadcrumb navigation list */
246
  display: flex;
247
  flex-wrap: wrap;
248
  margin: 0;
249
  padding: 0;
250
  list-style: none;
251
}
252

253
.uk-breadcrumb > * {
254
  /* Breadcrumb items */
255
  flex: none;
256
}
257

258
.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
259
  /* Breadcrumb separator */
260
  content: "/";
261
  display: inline-block;
262
  margin: 0 10px;
263
  color: #999;
264
}
265

266
.uk-breadcrumb > :last-child {
267
  /* Current breadcrumb item */
268
  color: #999;
269
}
270

271
.uk-breadcrumb > * > * {
272
  /* Breadcrumb links */
273
  display: inline-block;
274
  text-decoration: none;
275
  color: #333;
276
}
277
```
278

279
**Usage Examples:**
280

281
```html
282
<!-- Basic Breadcrumb -->
283
<ul class="uk-breadcrumb">
284
    <li><a href="#">Home</a></li>
285
    <li><a href="#">Category</a></li>
286
    <li><a href="#">Subcategory</a></li>
287
    <li><span>Current Page</span></li>
288
</ul>
289

290
<!-- Breadcrumb in Page Header -->
291
<header class="uk-section uk-section-small">
292
    <div class="uk-container">
293
        <ul class="uk-breadcrumb">
294
            <li><a href="#">Home</a></li>
295
            <li><a href="#">Blog</a></li>
296
            <li><span>Article Title</span></li>
297
        </ul>
298
        <h1>Article Title</h1>
299
    </div>
300
</header>
301
```
302

303
### Pagination
304

305
Page navigation component for multi-page content.
306

307
```css { .api }
308
/* Pagination List */
309
.uk-pagination {
310
  /* Pagination navigation list */
311
  display: flex;
312
  flex-wrap: wrap;
313
  margin: 0;
314
  padding: 0;
315
  list-style: none;
316
}
317

318
.uk-pagination > * {
319
  /* Pagination items */
320
  flex: none;
321
  position: relative;
322
}
323

324
.uk-pagination > * > * {
325
  /* Pagination links */
326
  display: block;
327
  padding: 5px 10px;
328
  color: #333;
329
  text-decoration: none;
330
  transition: color 0.1s ease-in-out;
331
}
332

333
.uk-pagination > .uk-active > * {
334
  /* Active pagination item */
335
  color: #999;
336
  background: #f8f8f8;
337
}
338

339
.uk-pagination > .uk-disabled > * {
340
  /* Disabled pagination item */
341
  color: #999;
342
}
343

344
/* Pagination Alignment */
345
.uk-pagination-left { /* Left aligned pagination */ }
346
.uk-pagination-right { /* Right aligned pagination */ }
347

348
/* Pagination Previous/Next */
349
.uk-pagination-previous { /* Previous page item */ }
350
.uk-pagination-next { /* Next page item */ }
351
```
352

353
**Usage Examples:**
354

355
```html
356
<!-- Basic Pagination -->
357
<ul class="uk-pagination">
358
    <li><a href="#"><uk-icon icon="chevron-left"></uk-icon></a></li>
359
    <li><a href="#">1</a></li>
360
    <li class="uk-disabled"><span>...</span></li>
361
    <li><a href="#">4</a></li>
362
    <li class="uk-active"><span>5</span></li>
363
    <li><a href="#">6</a></li>
364
    <li><a href="#">8</a></li>
365
    <li class="uk-disabled"><span>...</span></li>
366
    <li><a href="#">20</a></li>
367
    <li><a href="#"><uk-icon icon="chevron-right"></uk-icon></a></li>
368
</ul>
369

370
<!-- Centered Pagination -->
371
<ul class="uk-pagination uk-flex-center">
372
    <li class="uk-pagination-previous"><a href="#">Previous</a></li>
373
    <li class="uk-pagination-next"><a href="#">Next</a></li>
374
</ul>
375
```
376

377
### Tab
378

379
Tab navigation interface for content switching.
380

381
```css { .api }
382
/* Tab Navigation */
383
.uk-tab {
384
  /* Tab navigation list */
385
  display: flex;
386
  flex-wrap: wrap;
387
  margin: 0;
388
  padding: 0;
389
  list-style: none;
390
  position: relative;
391
}
392

393
.uk-tab > * {
394
  /* Tab items */
395
  flex: none;
396
  position: relative;
397
}
398

399
.uk-tab > * > a {
400
  /* Tab links */
401
  display: block;
402
  text-decoration: none;
403
  color: #999;
404
  border-bottom: 1px solid transparent;
405
}
406

407
.uk-tab > .uk-active > a {
408
  /* Active tab */
409
  color: #333;
410
  border-bottom-color: #1e87f0;
411
}
412

413
/* Tab Positioning */
414
.uk-tab-bottom { /* Bottom positioned tabs */ }
415
.uk-tab-left { /* Left positioned tabs */ }
416
.uk-tab-right { /* Right positioned tabs */ }
417

418
/* Tab Alignment */
419
.uk-tab-center { /* Center aligned tabs */ }
420
.uk-tab-right { /* Right aligned tabs */ }
421
```
422

423
**JavaScript API:**
424

425
```javascript { .api }
426
/**
427
 * Tab component for content switching
428
 */
429
UIkit.tab(element: HTMLElement, options?: {
430
  /** Tab connection target */
431
  connect?: string;
432
  /** Tab toggle type */
433
  toggle?: string;
434
  /** Active tab class */
435
  active?: number;
436
  /** Animation type */
437
  animation?: string;
438
  /** Animation duration */
439
  duration?: number;
440
  /** Swiping support */
441
  swiping?: boolean;
442
}): TabComponent;
443

444
interface TabComponent {
445
  /** Tab element */
446
  $el: HTMLElement;
447
  /** Show specific tab */
448
  show(index: number): void;
449
}
450
```
451

452
**Usage Examples:**
453

454
```html
455
<!-- Basic Tabs -->
456
<ul class="uk-tab" uk-tab>
457
    <li class="uk-active"><a href="#">Left</a></li>
458
    <li><a href="#">Item</a></li>
459
    <li><a href="#">Item</a></li>
460
</ul>
461

462
<ul class="uk-switcher uk-margin">
463
    <li>Hello!</li>
464
    <li>Hello again!</li>
465
    <li>Bazinga!</li>
466
</ul>
467

468
<!-- Vertical Tabs -->
469
<div class="uk-grid">
470
    <div class="uk-width-auto">
471
        <ul class="uk-tab-left" uk-tab="connect: #component-tab-left">
472
            <li class="uk-active"><a href="#">Active</a></li>
473
            <li><a href="#">Item</a></li>
474
            <li><a href="#">Item</a></li>
475
        </ul>
476
    </div>
477
    <div class="uk-width-expand">
478
        <ul id="component-tab-left" class="uk-switcher">
479
            <li>Content 1</li>
480
            <li>Content 2</li>
481
            <li>Content 3</li>
482
        </ul>
483
    </div>
484
</div>
485
```
486

487
### Subnav
488

489
Sub-navigation component for section-level navigation.
490

491
```css { .api }
492
/* Subnav Base */
493
.uk-subnav {
494
  /* Sub-navigation list */
495
  display: flex;
496
  flex-wrap: wrap;
497
  margin: 0;
498
  padding: 0;
499
  list-style: none;
500
}
501

502
.uk-subnav > * {
503
  /* Subnav items */
504
  flex: none;
505
  position: relative;
506
}
507

508
.uk-subnav > * > * {
509
  /* Subnav links */
510
  display: inline-block;
511
  color: #999;
512
  text-decoration: none;
513
}
514

515
.uk-subnav > .uk-active > * {
516
  /* Active subnav item */
517
  color: #333;
518
}
519

520
/* Subnav Variants */
521
.uk-subnav-divider { /* Subnav with dividers */ }
522
.uk-subnav-pill { /* Pill-styled subnav */ }
523

524
/* Subnav Divider */
525
.uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
526
  content: "|";
527
  display: inline-block;
528
  margin: 0 10px;
529
  color: #e5e5e5;
530
}
531

532
/* Subnav Pills */
533
.uk-subnav-pill > * > * {
534
  padding: 5px 10px;
535
  background: transparent;
536
  border-radius: 500px;
537
}
538

539
.uk-subnav-pill > .uk-active > * {
540
  background-color: #1e87f0;
541
  color: #fff;
542
}
543
```
544

545
**Usage Examples:**
546

547
```html
548
<!-- Basic Subnav -->
549
<ul class="uk-subnav">
550
    <li class="uk-active"><a href="#">Active</a></li>
551
    <li><a href="#">Item</a></li>
552
    <li><a href="#">Item</a></li>
553
</ul>
554

555
<!-- Subnav with Dividers -->
556
<ul class="uk-subnav uk-subnav-divider">
557
    <li class="uk-active"><a href="#">Active</a></li>
558
    <li><a href="#">Item</a></li>
559
    <li><a href="#">Item</a></li>
560
</ul>
561

562
<!-- Pill Subnav -->
563
<ul class="uk-subnav uk-subnav-pill">
564
    <li class="uk-active"><a href="#">Active</a></li>
565
    <li><a href="#">Item</a></li>
566
    <li><a href="#">Item</a></li>
567
</ul>
568
```
569

570
### Icon Navigation
571

572
Icon-based navigation components.
573

574
```css { .api }
575
/* Icon Nav */
576
.uk-iconnav {
577
  /* Icon navigation list */
578
  display: flex;
579
  flex-wrap: wrap;
580
  margin: 0;
581
  padding: 0;
582
  list-style: none;
583
}
584

585
.uk-iconnav > * {
586
  /* Icon nav items */
587
  flex: none;
588
}
589

590
.uk-iconnav > * > * {
591
  /* Icon nav links */
592
  display: block;
593
  color: #999;
594
  text-decoration: none;
595
}
596

597
.uk-iconnav > .uk-active > * {
598
  /* Active icon nav item */
599
  color: #333;
600
}
601

602
/* Icon Nav Vertical */
603
.uk-iconnav-vertical {
604
  /* Vertical icon navigation */
605
  flex-direction: column;
606
}
607

608
/* Dot Nav */
609
.uk-dotnav {
610
  /* Dot navigation for sliders/galleries */
611
  display: flex;
612
  flex-wrap: wrap;
613
  margin: 0;
614
  padding: 0;
615
  list-style: none;
616
}
617

618
.uk-dotnav > * {
619
  /* Dot nav items */
620
  flex: none;
621
  position: relative;
622
}
623

624
.uk-dotnav > * > * {
625
  /* Dot nav links */
626
  display: block;
627
  width: 10px;
628
  height: 10px;
629
  border-radius: 50%;
630
  background: rgba(0,0,0,0.2);
631
}
632

633
.uk-dotnav > .uk-active > * {
634
  /* Active dot */
635
  background: rgba(0,0,0,0.7);
636
}
637
```
638

639
**Usage Examples:**
640

641
```html
642
<!-- Icon Navigation -->
643
<ul class="uk-iconnav">
644
    <li><a href="#" uk-icon="icon: home"></a></li>
645
    <li><a href="#" uk-icon="icon: user"></a></li>
646
    <li><a href="#" uk-icon="icon: cog"></a></li>
647
</ul>
648

649
<!-- Dot Navigation -->
650
<ul class="uk-dotnav">
651
    <li class="uk-active"><a href="#"></a></li>
652
    <li><a href="#"></a></li>
653
    <li><a href="#"></a></li>
654
    <li><a href="#"></a></li>
655
</ul>
656

657
<!-- Vertical Icon Nav -->
658
<ul class="uk-iconnav uk-iconnav-vertical">
659
    <li><a href="#" uk-icon="icon: facebook"></a></li>
660
    <li><a href="#" uk-icon="icon: twitter"></a></li>
661
    <li><a href="#" uk-icon="icon: instagram"></a></li>
662
</ul>
663
```