BottomNav
Componente di navigazione per dispositivi mobile.
BottomNav è un componente pensato per la navigazione su dispositivi mobile il cui aspetto ricalca quello di alcune popolari app.
Il componente, di altezza fissa, è ancorato al fondo della pagina e ne occupa tutta la larghezza.
Esempio
È composto da un tag <nav> con classe .bottom-nav e contiene un elenco con tanti elementi quanti sono i link richiesti.
Ogni link <a> contiene un icona con classe .icon e una label contenuta in uno <span> con classe .bottom-nav-label.
Il link <a> attivo possiede una classe .active.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<nav class="bottom-nav">
<ul>
<li>
<a href="#" class="active">
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-comment"></use></svg>
<span class="bottom-nav-label">messaggi</span>
</a>
</li>
<li>
<a href="#">
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-camera"></use></svg>
<span class="bottom-nav-label">immagini</span>
</a>
</li>
<li>
<a href="#">
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-file"></use></svg>
<span class="bottom-nav-label">documenti</span>
</a>
</li>
</ul>
</nav>
I link occupano automaticamente tutto lo spazio orizzontale disponibile. Qui di seguito un esempio con 4 link.
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
<nav class="bottom-nav">
<ul>
<li>
<a href="#" class="active">
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-comment"></use></svg>
<span class="bottom-nav-label">messaggi</span>
</a>
</li>
<li>
<a href="#">
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-camera"></use></svg>
<span class="bottom-nav-label">immagini</span>
</a>
</li>
<li>
<a href="#">
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-file"></use></svg>
<span class="bottom-nav-label">documenti</span>
</a>
</li>
<li>
<a href="#">
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-star-outline"></use></svg>
<span class="bottom-nav-label">preferiti</span>
</a>
</li>
</ul>
</nav>
Badge
Aggiungere uno <span> con classe .bottom-nav-badge all’interno dell’icona per visualizzare dei badge con indicazioni numeriche relative, ad esempio, al numero di messaggi non letti.
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
<nav class="bottom-nav">
<ul>
<li>
<a href="#">
<div class="badge-wrapper"><span class="bottom-nav-badge">1</span></div>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-comment"></use></svg>
<span class="bottom-nav-label">messaggi<span class="visually-hidden">da leggere</span></span>
</a>
</li>
<li>
<a href="#" class="active">
<div class="badge-wrapper"><span class="bottom-nav-badge">2</span></div>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-camera"></use></svg>
<span class="bottom-nav-label">immagini<span class="visually-hidden">da visualizzare</span></span>
</a>
</li>
<li>
<a href="#">
<div class="badge-wrapper"><span class="bottom-nav-badge">42</span></div>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-file"></use></svg>
<span class="bottom-nav-label">documenti<span class="visually-hidden">da esaminare</span></span>
</a>
</li>
<li>
<a href="#">
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-star-outline"></use></svg>
<span class="bottom-nav-label">preferiti</span>
</a>
</li>
<li>
<a href="#">
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-settings"></use></svg>
<span class="bottom-nav-label">preferenze</span>
</a>
</li>
</ul>
</nav>
Alert
Aggiungere uno <span> con classe .bottom-nav-alert all’interno dell’icona per identificare una sezione che richiede attenzione o presenta nuovi contenuti.
Accessibilità
I badge e gli alert sono nascosti agli screen reader. Per garantire l’accessibilità è necessario aggiungere uno <span> con classe .visually-hidden all’interno della label che contenga un testo esplicativo.
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
<nav class="bottom-nav">
<ul>
<li>
<a href="#" class="active">
<div class="badge-wrapper"><span class="bottom-nav-alert"></span></div>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-comment"></use></svg>
<span class="bottom-nav-label">messaggi<span class="visually-hidden">ci sono 42 nuovi messaggi da leggere</span></span>
</a>
</li>
<li>
<a href="#">
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-camera"></use></svg>
<span class="bottom-nav-label">immagini</span>
</a>
</li>
<li>
<a href="#">
<div class="badge-wrapper"><span class="bottom-nav-alert"></span></div>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-file"></use></svg>
<span class="bottom-nav-label">documenti<span class="visually-hidden">ci sono 42 nuovi documenti da esaminare</span></span>
</a>
</li>
<li>
<a href="#">
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-star-outline"></use></svg>
<span class="bottom-nav-label">preferiti</span>
</a>
</li>
<li>
<a href="#">
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-settings"></use></svg>
<span class="bottom-nav-label">preferenze</span>
</a>
</li>
</ul>
</nav>