0
# Navigation Components
1

2
Navigation components including navigation bars, side navigation menus, breadcrumbs, and pagination for application structure and user navigation with responsive behavior and Material Design styling.
3

4
## Capabilities
5

6
### Navigation Bar
7

8
Fixed navigation bar component with responsive behavior and mobile menu support.
9

10
```html { .api }
11
<!-- Basic navbar structure -->
12
<nav>
13
  <div class="nav-wrapper">
14
    <a href="#" class="brand-logo">Logo</a>
15
    <ul id="nav-mobile" class="right hide-on-med-and-down">
16
      <li><a href="sass.html">Sass</a></li>
17
      <li><a href="badges.html">Components</a></li>
18
      <li><a href="collapsible.html">JavaScript</a></li>
19
    </ul>
20
  </div>
21
</nav>
22

23
<!-- Navbar with search -->
24
<nav>
25
  <div class="nav-wrapper">
26
    <form>
27
      <div class="input-field">
28
        <input id="search" type="search" required>
29
        <label class="label-icon" for="search"><i class="material-icons">search</i></label>
30
        <i class="material-icons">close</i>
31
      </div>
32
    </form>
33
  </div>
34
</nav>
35

36
<!-- Navbar with dropdown -->
37
<nav>
38
  <div class="nav-wrapper">
39
    <a href="#" class="brand-logo">Logo</a>
40
    <ul class="right hide-on-med-and-down">
41
      <li><a href="#" class="dropdown-trigger" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
42
    </ul>
43
  </div>
44
</nav>
45
<ul id="dropdown1" class="dropdown-content">
46
  <li><a href="#!">One</a></li>
47
  <li><a href="#!">Two</a></li>
48
  <li class="divider"></li>
49
  <li><a href="#!">Three</a></li>
50
</ul>
51
```
52

53
**CSS Classes:**
54

55
```css { .api }
56
/* Navbar classes */
57
nav {
58
  /* Main navigation container */
59
  background-color: #ee6e73;
60
  height: 64px;
61
  line-height: 64px;
62
}
63

64
.nav-wrapper {
65
  /* Navigation content wrapper */
66
  position: relative;
67
  height: 100%;
68
}
69

70
.brand-logo {
71
  /* Logo/brand text */
72
  position: absolute;
73
  color: #fff;
74
  display: inline-block;
75
  font-size: 2.1rem;
76
  padding: 0;
77
}
78

79
.brand-logo.center {
80
  /* Centered logo */
81
  left: 50%;
82
  transform: translateX(-50%);
83
}
84

85
/* Navigation colors */
86
.nav-colored { /* Custom colored nav */ }
87
.nav-transparent { /* Transparent nav */ }
88
.nav-fixed { /* Fixed position nav */ }
89
.nav-extended { /* Extended height nav */ }
90
```
91

92
### Side Navigation
93

94
Sliding side navigation menu with touch gestures and responsive behavior.
95

96
```javascript { .api }
97
/**
98
 * Side navigation component
99
 * @param el - Sidenav element
100
 * @param options - Configuration options
101
 */
102
class Sidenav {
103
  constructor(el: Element, options?: SidenavOptions);
104
  
105
  static init(els: Element | NodeList, options?: SidenavOptions): Sidenav | Sidenav[];
106
  static getInstance(el: Element): Sidenav;
107
  static get defaults(): SidenavOptions;
108
  
109
  /** Open sidenav */
110
  open(): void;
111
  
112
  /** Close sidenav */
113
  close(): void;
114
  
115
  destroy(): void;
116
  
117
  /** Current open state */
118
  isOpen: boolean;
119
}
120

121
interface SidenavOptions {
122
  /** Edge for sidenav to slide from */
123
  edge?: 'left' | 'right'; // default: 'left'
124
  
125
  /** Allow dragging to open/close */
126
  draggable?: boolean; // default: true
127
  
128
  /** Enter animation duration */
129
  inDuration?: number; // default: 250
130
  
131
  /** Exit animation duration */
132
  outDuration?: number; // default: 200
133
  
134
  /** Prevent page scrolling when open */
135
  preventScrolling?: boolean; // default: true
136
  
137
  /** Callbacks */
138
  onOpenStart?: () => void;
139
  onOpenEnd?: () => void;
140
  onCloseStart?: () => void;
141
  onCloseEnd?: () => void;
142
}
143
```
144

145
**Usage Examples:**
146

147
```html
148
<!-- Sidenav structure -->
149
<ul id="slide-out" class="sidenav">
150
  <li><div class="user-view">
151
    <div class="background">
152
      <img src="images/office.jpg">
153
    </div>
154
    <a href="#user"><img class="circle" src="images/yuna.jpg"></a>
155
    <a href="#name"><span class="white-text name">John Doe</span></a>
156
    <a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
157
  </div></li>
158
  <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
159
  <li><a href="#!">Second Link</a></li>
160
  <li><div class="divider"></div></li>
161
  <li><a class="subheader">Subheader</a></li>
162
  <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
163
</ul>
164

165
<!-- Sidenav trigger -->
166
<a href="#" data-target="slide-out" class="sidenav-trigger">
167
  <i class="material-icons">menu</i>
168
</a>
169
```
170

171
```javascript
172
// Initialize sidenav
173
const elems = document.querySelectorAll('.sidenav');
174
const instances = M.Sidenav.init(elems, {
175
  edge: 'left',
176
  draggable: true,
177
  onOpenEnd: () => console.log('Sidenav opened')
178
});
179

180
// Programmatic control
181
const instance = M.Sidenav.getInstance(document.getElementById('slide-out'));
182
instance.open();
183
```
184

185
### Fixed Sidenav
186

187
Always-visible side navigation for desktop layouts.
188

189
```html
190
<!-- Fixed sidenav structure -->
191
<ul id="slide-out" class="sidenav sidenav-fixed">
192
  <li><a class="waves-effect" href="#!">First Link With Waves</a></li>
193
  <li><a class="waves-effect" href="#!">Second Link With Waves</a></li>
194
</ul>
195
```
196

197
**CSS Classes:**
198

199
```css { .api }
200
/* Sidenav classes */
201
.sidenav {
202
  /* Side navigation menu */
203
  position: fixed;
204
  width: 300px;
205
  left: 0;
206
  top: 0;
207
  height: 100%;
208
  background-color: #fff;
209
  z-index: 999;
210
  transform: translateX(-100%);
211
}
212

213
.sidenav-fixed {
214
  /* Always visible sidenav */
215
  left: 0;
216
  transform: translateX(0);
217
  position: fixed;
218
}
219

220
.sidenav-overlay {
221
  /* Overlay background when sidenav is open */
222
  position: fixed;
223
  top: 0;
224
  left: 0;
225
  right: 0;
226
  height: 120vh;
227
  background-color: rgba(0,0,0,0.5);
228
  z-index: 997;
229
}
230

231
/* Sidenav content classes */
232
.sidenav li > a {
233
  /* Sidenav links */
234
  color: rgba(0,0,0,0.87);
235
  display: block;
236
  font-size: 14px;
237
  font-weight: 500;
238
  height: 48px;
239
  line-height: 48px;
240
  padding: 0 32px;
241
}
242

243
.sidenav .user-view {
244
  /* User info section */
245
  position: relative;
246
  padding: 32px 32px 0;
247
  margin-bottom: 8px;
248
}
249

250
.sidenav .divider {
251
  /* Divider line */
252
  margin: 8px 0 0 0;
253
}
254

255
.sidenav .subheader {
256
  /* Section headers */
257
  color: rgba(0,0,0,0.54);
258
  font-size: 14px;
259
  font-weight: 500;
260
}
261
```
262

263
### Breadcrumbs
264

265
Breadcrumb navigation showing current page location in site hierarchy.
266

267
```html { .api }
268
<!-- Basic breadcrumbs -->
269
<nav>
270
  <div class="nav-wrapper">
271
    <div class="col s12">
272
      <a href="#!" class="breadcrumb">First</a>
273
      <a href="#!" class="breadcrumb">Second</a>
274
      <a href="#!" class="breadcrumb">Third</a>
275
    </div>
276
  </div>
277
</nav>
278

279
<!-- Breadcrumbs with icons -->
280
<nav>
281
  <div class="nav-wrapper">
282
    <div class="col s12">
283
      <a href="#!" class="breadcrumb"><i class="material-icons">home</i>Home</a>
284
      <a href="#!" class="breadcrumb">Library</a>
285
      <a href="#!" class="breadcrumb">Data</a>
286
    </div>
287
  </div>
288
</nav>
289
```
290

291
**CSS Classes:**
292

293
```css { .api }
294
/* Breadcrumb classes */
295
.breadcrumb {
296
  /* Individual breadcrumb item */
297
  font-size: 18px;
298
  color: rgba(255,255,255,0.7);
299
  display: inline-block;
300
  padding: 0 15px;
301
}
302

303
.breadcrumb:before {
304
  /* Separator between breadcrumbs */
305
  content: '\E5CC';
306
  font-family: 'Material Icons';
307
  font-weight: normal;
308
  font-style: normal;
309
  font-size: 25px;
310
  margin: 0 10px 0 8px;
311
  color: rgba(255,255,255,0.7);
312
  vertical-align: top;
313
}
314

315
.breadcrumb:first-child:before {
316
  /* Remove separator from first breadcrumb */
317
  display: none;
318
}
319

320
.breadcrumb:last-child {
321
  /* Active/current breadcrumb */
322
  color: #fff;
323
}
324
```
325

326
### Pagination
327

328
Pagination component for navigating through multiple pages of content.
329

330
```html { .api }
331
<!-- Basic pagination -->
332
<ul class="pagination">
333
  <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
334
  <li class="active"><a href="#!">1</a></li>
335
  <li class="waves-effect"><a href="#!">2</a></li>
336
  <li class="waves-effect"><a href="#!">3</a></li>
337
  <li class="waves-effect"><a href="#!">4</a></li>
338
  <li class="waves-effect"><a href="#!">5</a></li>
339
  <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
340
</ul>
341

342
<!-- Pagination with large numbers -->
343
<ul class="pagination">
344
  <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
345
  <li class="waves-effect"><a class="grey lighten-2" href="#!">1</a></li>
346
  <li class="waves-effect"><a href="#!">...</a></li>
347
  <li class="waves-effect"><a href="#!">12</a></li>
348
  <li class="active teal"><a href="#!">13</a></li>
349
  <li class="waves-effect"><a href="#!">14</a></li>
350
  <li class="waves-effect"><a href="#!">...</a></li>
351
  <li class="waves-effect"><a href="#!">24</a></li>
352
  <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
353
</ul>
354
```
355

356
**CSS Classes:**
357

358
```css { .api }
359
/* Pagination classes */
360
.pagination {
361
  /* Pagination container */
362
  display: flex;
363
  padding-left: 0;
364
  list-style: none;
365
  border-radius: 0.25rem;
366
}
367

368
.pagination li {
369
  /* Pagination item */
370
  display: inline-block;
371
}
372

373
.pagination li.active {
374
  /* Active page indicator */
375
  background-color: #ee6e73;
376
}
377

378
.pagination li.disabled {
379
  /* Disabled pagination item */
380
  pointer-events: none;
381
}
382

383
.pagination li a {
384
  /* Pagination links */
385
  color: #444;
386
  display: block;
387
  font-size: 1.2rem;
388
  font-weight: 500;
389
  line-height: 36px;
390
  padding: 0 12px;
391
  text-decoration: none;
392
}
393

394
.pagination li.active a {
395
  /* Active page link */
396
  color: #fff;
397
}
398

399
.pagination li.disabled a {
400
  /* Disabled page link */
401
  color: #999;
402
}
403
```
404

405
### Navigation Utilities
406

407
Helper classes and JavaScript utilities for navigation components.
408

409
```javascript { .api }
410
// Navigation helper utilities
411
declare const M: {
412
  /** Initialize all navigation components */
413
  AutoInit(): void;
414
};
415

416
// Common navigation patterns
417
function initializeNavigation() {
418
  // Initialize dropdowns in navbar
419
  const dropdownElems = document.querySelectorAll('.dropdown-trigger');
420
  M.Dropdown.init(dropdownElems);
421
  
422
  // Initialize sidenav
423
  const sidenavElems = document.querySelectorAll('.sidenav');
424
  M.Sidenav.init(sidenavElems);
425
  
426
  // Initialize collapsible in sidenav
427
  const collapsibleElems = document.querySelectorAll('.collapsible');
428
  M.Collapsible.init(collapsibleElems);
429
}
430
```
431

432
### Responsive Navigation Patterns
433

434
```html
435
<!-- Mobile-responsive navbar -->
436
<nav>
437
  <div class="nav-wrapper">
438
    <a href="#" class="brand-logo">Logo</a>
439
    <a href="#" data-target="mobile-demo" class="sidenav-trigger">
440
      <i class="material-icons">menu</i>
441
    </a>
442
    <ul class="right hide-on-med-and-down">
443
      <li><a href="sass.html">Sass</a></li>
444
      <li><a href="badges.html">Components</a></li>
445
    </ul>
446
  </div>
447
</nav>
448

449
<!-- Mobile sidenav -->
450
<ul class="sidenav" id="mobile-demo">
451
  <li><a href="sass.html">Sass</a></li>
452
  <li><a href="badges.html">Components</a></li>
453
</ul>
454
```
455

456
**Responsive CSS Classes:**
457

458
```css { .api }
459
/* Responsive navigation utilities */
460
.hide-on-small-only { /* Hide on small screens only */ }
461
.hide-on-med-and-down { /* Hide on medium and small screens */ }
462
.hide-on-med-and-up { /* Hide on medium and large screens */ }
463
.hide-on-med-only { /* Hide on medium screens only */ }
464
.hide-on-large-only { /* Hide on large screens only */ }
465

466
.show-on-small { /* Show on small screens only */ }
467
.show-on-medium { /* Show on medium screens only */ }
468
.show-on-large { /* Show on large screens only */ }
469
.show-on-medium-and-up { /* Show on medium and large screens */ }
470
.show-on-medium-and-down { /* Show on medium and small screens */ }
471

472
.sidenav-trigger {
473
  /* Mobile menu trigger button */
474
  display: none;
475
}
476

477
@media only screen and (max-width: 992px) {
478
  .sidenav-trigger {
479
    display: block;
480
  }
481
}
482
```
483

484
## Common Navigation Patterns
485

486
### Multi-level Navigation
487

488
```html
489
<!-- Navbar with nested dropdowns -->
490
<nav>
491
  <div class="nav-wrapper">
492
    <ul class="left">
493
      <li>
494
        <a class="dropdown-trigger" href="#!" data-target="dropdown1">
495
          Categories<i class="material-icons right">arrow_drop_down</i>
496
        </a>
497
      </li>
498
    </ul>
499
  </div>
500
</nav>
501

502
<ul id="dropdown1" class="dropdown-content">
503
  <li><a href="#!">Web Design</a></li>
504
  <li><a href="#!">Web Development</a></li>
505
  <li class="divider"></li>
506
  <li><a href="#!">Mobile Apps</a></li>
507
</ul>
508
```
509

510
### Sticky Navigation
511

512
```css
513
/* Sticky navigation */
514
.navbar-fixed {
515
  position: relative;
516
  height: 56px;
517
  z-index: 997;
518
}
519

520
.navbar-fixed nav {
521
  position: fixed;
522
  top: 0;
523
  left: 0;
524
  right: 0;
525
  z-index: 998;
526
}
527
```
528

529
### Navigation with Search
530

531
```html
532
<!-- Expandable search in navbar -->
533
<nav>
534
  <div class="nav-wrapper">
535
    <form>
536
      <div class="input-field">
537
        <input id="search" type="search" required>
538
        <label class="label-icon" for="search">
539
          <i class="material-icons">search</i>
540
        </label>
541
        <i class="material-icons">close</i>
542
      </div>
543
    </form>
544
  </div>
545
</nav>
546
```
547

548
### ScrollSpy
549

550
ScrollSpy component for automatically highlighting navigation items based on scroll position, ideal for table of contents, section navigation, and single-page applications.
551

552
```javascript { .api }
553
/**
554
 * ScrollSpy component for scroll-based navigation highlighting
555
 * @param el - Element to track (usually content sections with IDs)
556
 * @param options - Configuration options
557
 */
558
class ScrollSpy {
559
  constructor(el: Element, options?: ScrollSpyOptions);
560
  
561
  /** Initialize scrollspy instances */
562
  static init(els: Element | NodeList, options?: ScrollSpyOptions): ScrollSpy | ScrollSpy[];
563
  
564
  /** Get existing scrollspy instance */
565
  static getInstance(el: Element): ScrollSpy;
566
  
567
  /** Get default options */
568
  static get defaults(): ScrollSpyOptions;
569
  
570
  /** Destroy scrollspy instance */
571
  destroy(): void;
572
  
573
  /** ScrollSpy element */
574
  el: Element;
575
  
576
  /** Configuration options */
577
  options: ScrollSpyOptions;
578
  
579
  /** Unique instance ID */
580
  id: number;
581
  
582
  /** Current tick ID for tracking */
583
  tickId: number;
584
}
585

586
interface ScrollSpyOptions {
587
  /** Throttle delay for scroll events (ms) */
588
  throttle?: number; // default: 100
589
  
590
  /** Offset from viewport top for activation */
591
  scrollOffset?: number; // default: 200
592
  
593
  /** CSS class applied to active navigation elements */
594
  activeClass?: string; // default: 'active'
595
  
596
  /** Function to find navigation element for given section ID */
597
  getActiveElement?: (id: string) => string; // default: 'a[href="#' + id + '"]'
598
}
599
```
600

601
**Usage Examples:**
602

603
```html
604
<!-- Content sections with IDs -->
605
<section id="introduction" class="scrollspy">
606
  <h2>Introduction</h2>
607
  <p>Content for introduction section...</p>
608
</section>
609

610
<section id="features" class="scrollspy">
611
  <h2>Features</h2>
612
  <p>Content for features section...</p>
613
</section>
614

615
<section id="installation" class="scrollspy">
616
  <h2>Installation</h2>
617
  <p>Content for installation section...</p>
618
</section>
619

620
<!-- Navigation that will be highlighted -->
621
<ul class="section-nav">
622
  <li><a href="#introduction">Introduction</a></li>
623
  <li><a href="#features">Features</a></li>
624
  <li><a href="#installation">Installation</a></li>
625
</ul>
626
```
627

628
```javascript
629
// Initialize scrollspy
630
const elems = document.querySelectorAll('.scrollspy');
631
const instances = M.ScrollSpy.init(elems, {
632
  scrollOffset: 100,
633
  throttle: 50,
634
  activeClass: 'current'
635
});
636

637
// Custom active element selector
638
M.ScrollSpy.init(elems, {
639
  scrollOffset: 150,
640
  getActiveElement: function(id) {
641
    return `.nav-item[data-target="${id}"]`;
642
  }
643
});
644

645
// Table of contents scrollspy
646
const sections = document.querySelectorAll('h2[id]');
647
M.ScrollSpy.init(sections, {
648
  scrollOffset: 50,
649
  activeClass: 'highlighted'
650
});
651
```
652

653
**Features:**
654

655
- Automatically highlights navigation links based on scroll position
656
- Smooth scrolling when clicking navigation links
657
- Customizable offset for controlling when sections become active
658
- Throttled scroll events for better performance
659
- Supports custom active element selectors
660
- Works with any navigation pattern (lists, tabs, custom elements)
661

662
### Tab Navigation
663

664
```html
665
<!-- Tab-style navigation -->
666
<div class="row">
667
  <div class="col s12">
668
    <ul class="tabs">
669
      <li class="tab col s3"><a href="#test1">Test 1</a></li>
670
      <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
671
      <li class="tab col s3"><a href="#test3">Test 3</a></li>
672
      <li class="tab col s3"><a href="#test4">Test 4</a></li>
673
    </ul>
674
  </div>
675
</div>
676
```