Skip to main content

Bootstrap Italia

Il tema Bootstrap 5 per lo sviluppo di applicazioni web per la PA

Paginazione

Paginazione

Documentazione ed esempi del componente di paginazione utile per indicare una serie di contenuti correlati tra più pagine.

Panoramica

I collegamenti della paginazione sono contenuti per praticità in un elemento <nav class="pagination-wrapper"> per dare la possibilità agli screenreader, e altre tecnologie assistive, di identificarli come una sezione di navigazione.

Accessibilità

Poiché è molto probabile che la pagina possa contenere più di un elemento <nav class="pagination-wrapper"> è consigliabile inserire un attributo aria-label con la descrizione del suo scopo. Ad esempio, se il componente di impaginazione viene utilizzato per navigare tra una serie di risultati di ricerca, un’etichetta appropriata potrebbe essere aria-label="Pagine dei risultati di ricerca".

<nav class="pagination-wrapper" aria-label="Esempio di navigazione della pagina">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#">
        <svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-left"></use></svg>
        <span class="visually-hidden">Pagina precedente</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" aria-current="page" href="#" >1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">
        <span class="visually-hidden">Pagina successiva</span>
        <svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-right"></use></svg>
      </a>
    </li>
  </ul>
</nav>

Stato disabilitato e attivo

I link della paginazione assumonono uno stato disabilitato usando la classe .disabled nel tag <li>. Per indicare la pagina attiva corrente utilizzare l’attributo aria-current="page" nel tag <a>, l’aspetto grafico cambierà di conseguenza.

La classe .disabled usa pointer-events: none per provare a disabilitare l’attivazione dei comportamenti di default dei link <a>, ma tale funzionalità non è gestita in alcuni browsers. Oltre a questo, la navigazione attraverso tastiera rimane abilitata, per cui utenti che utilizzano tecnologie assistive saranno comunque in grado di attivare tali link. Per ovviare a questo problema, è possibile aggiungere l’attributo tabindex="-1", e utilizzare JavaScript per disabilitare le loro funzionalità.

È inoltre consigliabile applicare aria-hidden="true" ai link disabilitati per evitare che vengano considerati nel conteggio degli elementi totali in lista fornito dagli screen reader.

In alternativa per la paginazione si può sostituire il link disabilitato con uno <span> avente classe .page-link e contenuto in un <li> con classe .nolink (es.: <li class="page-item"><span class="page-link">1</span></li>).

<nav class="pagination-wrapper" aria-label="Esempio di paginazione">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-hidden="true">
        <svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-left"></use></svg>
        <span class="visually-hidden">Pagina precedente</span>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-current="page">
        <span class="d-inline-block d-sm-none">Pagina </span>1
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-hidden="true">3</a>
    </li>
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-hidden="true">
        <span class="visually-hidden">Pagina successiva</span>
        <svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-right"></use></svg>
      </a>
    </li>
  </ul>
</nav>

Allineamento

Grazie alle utilità di Flexbox, si può allineare facilmente il blocco della paginazione.
Sui dispositivi mobile la paginazione è centrata per default.

Per centrare la navigazione aggiungere la classe justify-content-center al tag <nav>.

<nav class="pagination-wrapper justify-content-center" aria-label="Navigazione centrata">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-hidden="true">
        <svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-left"></use></svg>
        <span class="visually-hidden">Pagina precedente</span>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-current="page">
        <span class="d-inline-block d-sm-none">Pagina </span>1
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">
        <span class="visually-hidden">Pagina successiva</span>
        <svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-right"></use></svg>
      </a>
    </li>
  </ul>
</nav>

Per allineare a destra la navigazione aggiungere la classe justify-content-end al tag <nav>.

<nav class="pagination-wrapper justify-content-end" aria-label="Navigazione allineata a destra">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-hidden="true">
        <svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-left"></use></svg>
        <span class="visually-hidden">Pagina precedente</span>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-current="page">
        <span class="d-inline-block d-sm-none">Pagina </span>1
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">
        <span class="visually-hidden">Pagina successiva</span>
        <svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-right"></use></svg>
      </a>
    </li>
  </ul>
</nav>

Responsive

Con i dovuti accorgimenti sopraelencati e inserendo alcune classi delle utilità display si può trasformare la paginazione in base alla risoluzione del dispositivo in uso dell’utente.

<nav class="pagination-wrapper" aria-label="Esempio di navigazione responsive della pagina">
  <ul class="pagination justify-content-center">
    <li class="page-item">
      <a class="page-link" href="#">
        <svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-left"></use></svg>
        <span class="visually-hidden">Pagina precedente</span>
      </a>
    </li>
    <li class="page-item d-none d-sm-flex">
      <a class="page-link" href="#">9</a>
    </li>
    <li class="page-item d-none d-sm-flex">
      <a class="page-link" href="#">10</a>
    </li>
    <li class="page-item active">
      <a class="page-link" href="#" aria-current="page">
        <span class="d-inline-block d-sm-none">Pagina </span>12
      </a>
    </li>
    <li class="page-item d-none d-sm-flex">
      <a class="page-link" href="#">12</a>
    </li>
    <li class="page-item d-none d-sm-flex">
      <a class="page-link" href="#">13</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">
        <span class="visually-hidden">Pagina successiva</span>
        <svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-right"></use></svg>
      </a>
    </li>
  </ul>
</nav>

Funzioni aggiuntive

La paginazione base può essere integrata con elementi aggiuntivi per rendere più fruibile la navigazione quando il numero di pagine è elevato. È inoltre disponibile una versione semplificata ottimizzata per dispositivi mobile.

More

Quando è presente un grande numero di pagine è consigliabile visualizzare unicamente le pagine più prossime a quella corrente, inserendo delle ellissi (…) fra queste e la prima ed ultima pagina. Non essendo collegate a nessuna pagina le ellissi vanno inserite in un tag <span>.

<nav class="pagination-wrapper" aria-label="Esempio di navigazione con ellissi/more">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#">
        <svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-left"></use></svg>
        <span class="visually-hidden">Pagina precedente</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item">
      <span class="page-link">...</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">24</a></li>
    <li class="page-item"><a class="page-link" href="#">25</a></li>
    <li class="page-item active">
      <a class="page-link" href="#" aria-current="page">
        <span class="d-inline-block d-sm-none">Pagina </span>26
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">27</a></li>
    <li class="page-item"><a class="page-link" href="#">28</a></li>
    <li class="page-item">
      <span class="page-link">...</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">50</a></li>
    <li class="page-item">
      <a class="page-link" href="#">
        <span class="visually-hidden">Pagina successiva</span>
        <svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-right"></use></svg>
      </a>
    </li>
  </ul>
</nav>

Changer

La funzionalità di changer permette di scegliere da un dropdown la quantità di record da visualizzare in una pagina.

<nav class="pagination-wrapper" aria-label="Esempio di navigazione con page changer">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#">
        <svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-left"></use></svg>
        <span class="visually-hidden">Pagina precedente</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><span class="page-link">...</span></li>
    <li class="page-item"><a class="page-link" href="#">24</a></li>
    <li class="page-item"><a class="page-link" href="#">25</a></li>
    <li class="page-item active">
      <a class="page-link" href="#" aria-current="page">
        <span class="d-inline-block d-sm-none">Pagina </span>26
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">27</a></li>
    <li class="page-item"><a class="page-link" href="#">28</a></li>
    <li class="page-item"><span class="page-link">...</span></li>
    <li class="page-item"><a class="page-link" href="#">50</a></li>
    <li class="page-item">
      <a class="page-link" href="#">
        <span class="visually-hidden">Pagina successiva</span>
        <svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-right"></use></svg>
      </a>
    </li>
  </ul>
  <div class="dropdown">
    <a class="btn btn-dropdown dropdown-toggle" href="#" role="button" id="pagerChanger" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Salta alla pagina">
    10/pagina
    <svg class="icon icon-primary icon-sm"><use href="/dist/svg/sprites.svg#it-expand"></use></svg>
    </a>
    <div class="dropdown-menu" aria-labelledby="pagerChanger">
      <div class="link-list-wrapper">
        <ul class="link-list">
           <li><a class="list-item active" href="#" aria-current="page"><span>10/pagina</span></a></li>
           <li><a class="dropdown-item list-item" href="#"><span>20/pagina</span></a></li>
           <li><a class="dropdown-item list-item" href="#"><span>30/pagina</span></a></li>
           <li><a class="dropdown-item list-item" href="#"><span>40/pagina</span></a></li>
           <li><a class="dropdown-item list-item" href="#"><span>50/pagina</span></a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

Jump to page

Con l’elemento aggiuntivo “Jump to page” l’utente può specificare un numero di pagina concreto.

<nav class="pagination-wrapper" aria-label="Esempio di navigazione con jump to page">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#">
        <svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-left"></use></svg>
        <span class="visually-hidden">Pagina precedente</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><span class="page-link">...</span></li>
    <li class="page-item"><a class="page-link" href="#">24</a></li>
    <li class="page-item"><a class="page-link" href="#">25</a></li>
    <li class="page-item active">
      <a class="page-link" href="#" aria-current="page">
        <span class="d-inline-block d-sm-none">Pagina </span>26
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">27</a></li>
    <li class="page-item"><a class="page-link" href="#">28</a></li>
    <li class="page-item"><span class="page-link">...</span></li>
    <li class="page-item"><a class="page-link" href="#">50</a></li>
    <li class="page-item">
      <a class="page-link" href="#">
        <span class="visually-hidden">Pagina successiva</span>
        <svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-right"></use></svg>
      </a>
    </li>
  </ul>
  <div class="form-group">
    <input type="text" class="form-control" id="jumpToPage" maxlength="3">
    <label for="jumpToPage"><span aria-hidden="true">Vai a ...</span><span class="visually-hidden">Indica la pagina desiderata</span></label>
  </div>
</nav>

Simple mode

La paginazione in versione “Simple mode” è ottimizzata per i dispositivi mobile. Può essere utilizzata anche su tablet e desktop quando il numero di pagine è ridotto.

<nav class="pagination-wrapper" aria-label="Esempio di navigazione simple mode">
  <ul class="pagination" aria-label="Pagina 1 di 5">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-hidden="true">
        <svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-left"></use></svg>
        <span class="visually-hidden">Pagina precedente</span>
      </a>
    </li>
    <li class="page-item"><span class="page-link" aria-current="page">1</span></li>
    <li class="page-item"><span class="page-link">/</span></li>
    <li class="page-item"><span class="page-link">5</span></li>
    <li class="page-item visually-hidden">
      <a class="page-link" href="#" aria-current="page">Pagina 1 di 5</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">
        <span class="visually-hidden">Pagina successiva</span>
        <svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-right"></use></svg>
      </a>
    </li>
  </ul>
</nav>

Le icone chevron utilizzate come link di navigazione possono essere sostituite da link testuali come “precedente” e “successiva”. In tal caso al tag <a> contenente il testo dovrà essere aggiunta la classe .text. Es: <a class="page-link text" href="#">Precedente</a>. Notare come sia stato inserito il testo “Pagina” in un elemento <span class="visually-hidden"> invisibile su schermo ma enunciabile dagli screen reader per facilitare la comprensione agli utenti che utilizzano tecnologie assistive.

<nav class="pagination-wrapper" aria-label="Esempio di navigazione con link testuali">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link text" href="#"><span class="visually-hidden">Pagina </span>Precedente</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><span class="page-link">...</span></li>
    <li class="page-item"><a class="page-link" href="#">24</a></li>
    <li class="page-item"><a class="page-link" href="#">25</a></li>
    <li class="page-item active">
      <a class="page-link" href="#" aria-current="page">
        <span class="d-inline-block d-sm-none">Pagina </span>26
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">27</a></li>
    <li class="page-item"><a class="page-link" href="#">28</a></li>
    <li class="page-item"><span class="page-link">...</span></li>
    <li class="page-item"><a class="page-link" href="#">50</a></li>
    <li class="page-item">
      <a class="page-link text" href="#"><span class="visually-hidden">Pagina </span>Successiva</a>
    </li>
  </ul>
</nav>

Total number

Aggiungendo al classe .pagination-total al tag <nav> che contiene la paginazione è possibile indicare il numero totale di elementi o il numero totale di elementi per pagina all’interno di un tag <p> collocato priam della chiusura del <nav>.

<nav class="pagination-wrapper pagination-total" aria-label="Esempio di navigazione con total number">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#">
        <svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-left"></use></svg>
        <span class="visually-hidden">Pagina precedente</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><span class="page-link">...</span></li>
    <li class="page-item active">
      <a class="page-link" href="#" aria-current="page">
        <span class="d-inline-block d-sm-none">Pagina </span>24
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">25</a></li>
    <li class="page-item"><a class="page-link" href="#">26</a></li>
    <li class="page-item"><a class="page-link" href="#">27</a></li>
    <li class="page-item"><a class="page-link" href="#">28</a></li>
    <li class="page-item"><span class="page-link">...</span></li>
    <li class="page-item"><a class="page-link" href="#">50</a></li>
    <li class="page-item">
      <a class="page-link" href="#">
        <span class="visually-hidden">Pagina successiva</span>
        <svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-right"></use></svg>
      </a>
    </li>
  </ul>
  <p>Totale 300 elementi </p>
</nav>
<nav class="pagination-wrapper pagination-total" aria-label="Esempio di navigazione con total number">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#">
        <svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-left"></use></svg>
        <span class="visually-hidden">Pagina precedente</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><span class="page-link">...</span></li>
    <li class="page-item active">
      <a class="page-link" href="#" aria-current="page">
        <span class="d-inline-block d-sm-none">Pagina </span>24
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">25</a></li>
    <li class="page-item"><a class="page-link" href="#">26</a></li>
    <li class="page-item"><a class="page-link" href="#">27</a></li>
    <li class="page-item"><a class="page-link" href="#">28</a></li>
    <li class="page-item"><span class="page-link">...</span></li>
    <li class="page-item"><a class="page-link" href="#">50</a></li>
    <li class="page-item">
      <a class="page-link" href="#">
        <span class="visually-hidden">Pagina successiva</span>
        <svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-right"></use></svg>
      </a>
    </li>
  </ul>
  <p>100-110 di 300 elementi</p>
</nav>