Megamenu
Il Megamenu è una variante della componente dropdown.
Presenta un sottomenu contenente elenchi di link relativi ad una voce del menu di navigazione.
Si raccomanda l’utilizzo di questa componente nella forma più semplice e pulita, utilizzando il megamenu classico, con o senza intestazione delle colonne (header).
Megamenu Classico
Il megamenu ha una struttura colonnare in cui ogni colonna richiama al suo interno la componente lista per costruire l’elenco di link desiderato.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<nav class="navbar navbar-expand-lg has-megamenu">
<button
class="custom-navbar-toggler"
type="button"
aria-controls="nav326"
aria-expanded="false"
aria-label="Mostra/Nascondi la navigazione"
data-bs-toggle="navbarcollapsible"
data-bs-target="#nav326"
>
<svg class="icon">
<use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-burger"></use>
</svg>
</button>
<div class="navbar-collapsable" id="nav326">
<div class="overlay"></div>
<div class="close-div">
<button class="btn close-menu" type="button">
<span class="visually-hidden">Nascondi la navigazione</span>
<svg class="icon">
<use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-close-big"></use>
</svg>
</button>
</div>
<div class="menu-wrapper">
<ul class="navbar-nav">
<li class="nav-item dropdown megamenu">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="megamenu326">
<span>Megamenu</span>
<svg class="icon icon-xs">
<use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-expand"></use>
</svg>
</a>
<div class="dropdown-menu" role="region" aria-labelledby="megamenu326">
<div class="row">
<div class="col-12 col-lg-4">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<a class="dropdown-item list-item" href="#"><span>Link lista 1</span></a>
</li>
<li>
<a class="dropdown-item list-item" href="#"><span>Link lista 2</span></a>
</li>
<li>
<a class="dropdown-item list-item" href="#"><span>Link lista 3</span></a>
</li>
</ul>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<a class="dropdown-item list-item active" href="#"><span>Link lista 4</span></a>
</li>
<li>
<a class="dropdown-item list-item disabled" href="#"><span>Link lista 5</span></a>
</li>
<li>
<a class="dropdown-item list-item" href="#"><span>Link lista 6</span></a>
</li>
</ul>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<a class="dropdown-item list-item" href="#"><span>Link lista 7</span></a>
</li>
<li>
<a class="dropdown-item list-item" href="#"><span>Link lista 8</span></a>
</li>
<li>
<a class="dropdown-item list-item" href="#"><span>Link lista 9</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
Megamenu con intestazione delle colonne
Il megamenu con intestazione delle colonne viene utilizzato quando vi sono delle categorie di liste in cui sono raggruppate le voci di menu per facilitare la ricerca dei contenuti.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<nav class="navbar navbar-expand-lg has-megamenu">
<button
class="custom-navbar-toggler"
type="button"
aria-controls="nav327"
aria-expanded="false"
aria-label="Mostra/Nascondi la navigazione"
data-bs-toggle="navbarcollapsible"
data-bs-target="#nav327"
>
<svg class="icon">
<use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-burger"></use>
</svg>
</button>
<div class="navbar-collapsable" id="nav327">
<div class="overlay"></div>
<div class="close-div">
<button class="btn close-menu" type="button">
<span class="visually-hidden">Nascondi la navigazione</span>
<svg class="icon">
<use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-close-big"></use>
</svg>
</button>
</div>
<div class="menu-wrapper">
<ul class="navbar-nav">
<li class="nav-item dropdown megamenu">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="megamenu327">
<span>Megamenu</span>
<svg class="icon icon-xs">
<use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-expand"></use>
</svg>
</a>
<div class="dropdown-menu" role="region" aria-labelledby="megamenu327">
<div class="row">
<div class="col-12 col-lg-4">
<div class="link-list-wrapper">
<span class="link-list-heading text-primary fw-bold">Sezione 1</span>
<ul class="link-list">
<li>
<a class="dropdown-item list-item" href="#"><span>Link lista 1</span></a>
</li>
<li>
<a class="dropdown-item list-item" href="#"><span>Link lista 2</span></a>
</li>
<li>
<a class="dropdown-item list-item" href="#"><span>Link lista 3</span></a>
</li>
</ul>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="link-list-wrapper">
<span class="link-list-heading text-primary fw-bold">Sezione 2</span>
<ul class="link-list">
<li>
<a class="dropdown-item list-item active" href="#"><span>Link lista 4</span></a>
</li>
<li>
<a class="dropdown-item list-item disabled" href="#"><span>Link lista 5</span></a>
</li>
<li>
<a class="dropdown-item list-item" href="#"><span>Link lista 6</span></a>
</li>
</ul>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="link-list-wrapper">
<span class="link-list-heading text-primary fw-bold">Sezione 3</span>
<ul class="link-list">
<li>
<a class="dropdown-item list-item" href="#"><span>Link lista 7</span></a>
</li>
<li>
<a class="dropdown-item list-item" href="#"><span>Link lista 8</span></a>
</li>
<li>
<a class="dropdown-item list-item" href="#"><span>Link lista 9</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>