Vai al contenuto principale

Bootstrap Italia

Interfacce Web Accessibili per la PA

BottomNav

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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/dist/svg/sprites.svg#it-settings"></use></svg>
        <span class="bottom-nav-label">Preferenze</span>
      </a>
    </li>
  </ul>
</nav>

Properties

Il selettore da utilizzare per le sovrascrittura delle property è bottom-nav. La descrizione delle custom properties è in inglese perché risiede nei files .scss dei componenti.

Properties statiche

Variabile CSS Descrizione (Inglese) Predefinito
--bsi-bottom-nav-height 96px
--bsi-bottom-nav-list-height 64px
--bsi-bottom-nav-item-margin var(--bsi-spacing-xxs)
--bsi-bottom-nav-link-color var(--bsi-color-text-secondary)
--bsi-bottom-nav-link-color-active var(--bsi-color-text-primary)
--bsi-bottom-nav-icon-color var(--bsi-icon-secondary)
--bsi-bottom-nav-icon-color-active var(--bsi-icon-primary)
--bsi-bottom-nav-icon-font-size 1.35rem
--bsi-bottom-nav-icon-height var(--bsi-spacing-l)
--bsi-bottom-nav-label-margin-top 6px
--bsi-bottom-nav-label-font-size var(--bsi-label-font-size-xs)
--bsi-bottom-nav-label-font-weight var(--bsi-font-weight-solid)
--bsi-bottom-nav-badge-bg var(--bsi-color-background-primary)
--bsi-bottom-nav-badge-border-color var(--bsi-color-background-inverse)
--bsi-bottom-nav-badge-color var(--bsi-color-text-inverse)
--bsi-bottom-nav-badge-font-size 0.625rem
--bsi-bottom-nav-badge-radius var(--bsi-radius-rounded)
--bsi-bottom-nav-alert-size 12px
--bsi-bottom-nav-shadow-height 360px
--bsi-bottom-nav-shadow-top var(--bsi-spacing-l)
--bsi-bottom-nav-shadow-opacity 0.18
--bsi-bottom-nav-shadow-transform translateY(-50%) scalex(1.4) scaleY(0.12)
--bsi-bottom-nav-shadow-background radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 60%)