Skip to main content
logo regione lombardia

Bootstrap Regione Lombardia

Versione di Bootstrap Italia per la Regione Lombardia per lo sviluppo di applicazioni web per la PA

Header

Header

Header applicativi Web.

Area di intestazione principale di un sito o servizio che presenta l’identità visiva e il menu di navigazione primaria.

Il logotipo di Regione Lombardia si trova nella topbar per lasciare spazio al logo dell’applicativo.
In questo modo la brand identity del sito rimane riconoscibile sottolineando la sua affiliazione con l’ecosistema digitale.

Se le voci di menu di primo livello non sono più di 5, sono disposte orizzontalmente nell’header.
Solo se necessario l’header può ospitare fino a un massimo di tre logotipi.
In caso l’applicativo non abbia un logo può essere usato un acronimo e/o il nome dell’applicativo.

logo regione lombardia
Nome applicativo


logo regione lombardia
Nome applicativo



Il Menu orizzontale è il menu principale di navigazione. Esso può contenere, oltre a semplici link, il menu dropdown ed il megamenu.

Su desktop il menu è sempre visualizzato e a scorrimento in basso e rimane posizionato fisso sotto la barra istituzionale. Se la pagina scorre, il menu si sposta di conseguenza, rimanendo sotto la barra istituzionale.
Questa tipologia di menu viene preferita al menu verticale quando le voci del menu sono poche e le label sono brevi.

Su smartphone la visualizzazione del menu orizzontale è comandata dal bottone hamburger nella barra istituzionale e le voci sono visualizzate in verticale per questioni di spazio. In questo caso il pannello comparirà con uno scorrimento laterale da sinistra ed oscuramento della pagina sottostante.

Si vedano le voci menu orizzontale e form nella pagina degli esempi per una migliore comprensione del possibile utilizzo.

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
97
98
99
100
101
102
103
104
105
106
107
108

      <div class="it-header-navbar-wrapper it25-menu-orizzontale" id="header-nav-wrapper">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <!--start nav-->
            <nav class="navbar navbar-expand-lg has-megamenu" aria-label="Navigazione principale">
              <button class="custom-navbar-toggler" type="button" aria-controls="navdochead03" aria-label="Mostra/Nascondi la navigazione" data-bs-toggle="navbarcollapsible" data-bs-target="#navdochead03">
                <svg class="icon icon-primary">
                  <use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-burger"></use>
                </svg>
              </button>
              <div class="navbar-collapsable" id="navdochead03" tabindex="-1">
                <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 justify-content-lg-between">
                  <ul class="navbar-nav">
  <li class="nav-item active"><a class="nav-link active" href="#" aria-current="page"><span>Link 1 (attivo)</span></a></li>
  <li class="nav-item"><a class="nav-link disabled" href="#" aria-disabled="true"><span>Link 2 (disabilitato)</span></a></li>
  <li class="nav-item"><a class="nav-link" href="#"><span>Link 3</span></a></li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="mainNavDropdowndochead03">
      <span>Menu Dropdown</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="mainNavDropdowndochead03">
      <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>
          <li><span class="divider"></span></li>
          <li><a class="dropdown-item list-item" href="#"><span>Link lista 4</span></a></li>
        </ul>
      </div>
    </div>
  </li>
  <!-- megamenu -->
  <li class="nav-item dropdown megamenu">
    <button type="button" class="nav-link dropdown-toggle px-lg-2 px-xl-3" data-bs-toggle="dropdown" aria-expanded="false" id="megamenudochead03" data-focus-mouse="false">
        <span>Megamenu</span><svg role="img" class="icon icon-xs ms-1"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-expand"></use></svg>
    </button>
    <div class="dropdown-menu" role="region" aria-labelledby="megamenudochead03">
      <div class="megamenu pb-5 pt-3 py-lg-0">
        <div class="row">
          <div class="col-xs-12 col-lg-4 px-0">
            <div class="row">
              <div class="col-12 it-vertical it-description pb-lg-3">
                <div class="description-content ps-4 ps-sm-5 ms-3">
                    <h4 class="fw-normal">Argomenti</h4>
                  <p>
                    Testo utile a fornire una descrizione dei contenuti della sezione <strong>megamenu</strong>.
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 col-lg-4">
            <div class="link-list-wrapper">
              <ul class="link-list">
                <li class="border-bottom">
                  <a class="dropdown-item list-item" href="#"><span>Link lista 1</span></a>
                </li>
                <li class="border-bottom">
                  <a class="dropdown-item list-item" href="#"><span>Link lista 2</span></a>
                </li>
                <li class="border-bottom">
                  <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 class="border-bottom">
                  <a class="dropdown-item list-item active" href="#"><span>Link attivo</span></a>
                </li>
                <li class="border-bottom">
                  <a class="dropdown-item list-item disabled" href="#"><span>Link disabilitato</span></a>
                </li>
                <li class="border-bottom">
                  <a class="dropdown-item list-item" href="#"><span>Link lista 6</span></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>


                </div>
              </div>
            </nav>
          </div>
        </div>
      </div>
    </div>

Hamburger button

Se le voci di menu di primo livello sono più di 5, vanno collocate in un menù verticale a comparsa, comandato da un hamburger button.

logo regione lombardia
Esplora i siti di Regione
Nome applicativo
Cerca

logo regione lombardia
Esplora i siti di Regione
Nome applicativo
Cerca



Il Menu verticale può incorporare liste semplici e liste innestate.

Si utilizza quando si ha l’esigenza di trattare in forma di lista le voci del menu, quindi all’interno di applicativi con molte sezioni cui si deve dare accesso in qualsiasi punto della navigazione.
Lo si preferisce per garantire la leggibilità delle voci nella lista, che può scorrere per una visualizzazione completa.

Questo tipo di menu è sempre collocato a sinistra dello schermo; può essere utilizzato in modalità a scomparsa o sidebar.
Si vedano le voci menu verticale e sidebar nella pagina degli esempi per una migliore comprensione del possibile utilizzo.

Semplice

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
97
98
99
100
101

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4 it25-sidebar">
      <nav class="collapse it25-vertical-menu" id="it25-main-nav_remove-me">
  <div class="sidebar-wrapper">
    <div class="sidebar-linklist-wrapper">
      <div class="link-list-wrapper">
        <ul class="link-list">
          <li>
            <a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
          </li>
          <li>
            <a class="list-item medium active" href="#"><span>Link attivo</span></a>
          </li>
          <li>
            <a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
          </li>
          <li>
            <a class="list-item medium disabled" href="#"><span>Disabilitato</span></a>
          </li>
          <li>
            <a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
          </li>
          <li>
            <a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
          </li>
          <li>
            <a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
          </li>
          <li>
            <a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
          </li>
          <li>
            <a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
          </li>
          <li>
            <a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
          </li>
          <li>
            <a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
          </li>
          <li>
            <a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
          </li>
          <li>
            <a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
          </li>
          <li>
            <a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
          </li>
          <li>
            <a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
          </li>
          <li>
            <a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
          </li>
          <li>
            <a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
          </li>
          <li>
            <a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
          </li>
          <li>
            <a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
          </li>
          <li>
            <a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
          </li>
          <li>
            <a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
          </li>
          <li>
            <a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
          </li>
          <li>
            <a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
          </li>
          <li>
            <a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
          </li>
          <li>
            <a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
          </li>
          <li>
            <a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
          </li>
          <li>
            <a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
          </li>
          <li>
            <a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

      </div>
    </div>
  </div>

Annidato

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4 it25-sidebar">
        <nav class="collapse it25-vertical-menu" id="it25-main-nav">
  <div class="form-group">
    <div class="input-group">
      <span class="input-group-text">
        <svg class="icon icon-sm" role="presentation"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-search"></use></svg>
      </span>
      <label for="searchField">Cerca</label>
      <input type="text" class="form-control" id="searchField" autocomplete="off">
    </div>
  </div>
  <div class="sidebar-wrapper">
    <div class="sidebar-linklist-wrapper">
      <div class="link-list-wrapper">
        <ul class="link-list">
          <li>
            <a class="list-item large medium right-icon" href="#collapseZero" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapseZero">
              <span class="list-item-title-icon-wrapper">
                <span class="fw-bold">Lorem ipsum dolor</span>
                <svg class="icon icon-sm icon-primary right" role="presentation"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-expand"></use></svg>
              </span>
            </a>
            <ul class="link-sublist collapse" id="collapseZero">
              <li>
                <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
              </li>
              <li>
                <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
              </li>
              <li>
                <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
              </li>
            </ul>
          </li>
          <li>
            <a class="list-item large medium right-icon" href="#collapseUno" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapseUno">
              <span class="list-item-title-icon-wrapper">
                <span class="fw-bold">Lorem ipsum dolor</span>
                <svg class="icon icon-sm icon-primary right" role="presentation"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-expand"></use></svg>
              </span>
            </a>
            <ul class="link-sublist collapse show" id="collapseUno">
              <li>
                <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
              </li>
              <li>
                <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
              </li>
              <li>
                <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
              </li>
            </ul>
          </li>
          <li>
            <a class="list-item large medium right-icon active" href="#collapseDue" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapseDue">
              <span class="list-item-title-icon-wrapper">
                <span class="fw-bold">Lorem ipsum dolor</span>
                <svg class="icon icon-sm icon-primary right" role="presentation"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-expand"></use></svg>
              </span>
            </a>
            <ul class="link-sublist collapse show" id="collapseDue">
              <li>
                <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
              </li>
              <li>
                <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
              </li>
              <li>
                <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
              </li>
            </ul>
          </li>
          <li>
            <a class="list-item large medium right-icon" href="#collapseTre" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapseTre">
              <span class="list-item-title-icon-wrapper">
                <span class="fw-bold">Lorem ipsum dolor</span>
                <svg class="icon icon-sm icon-primary right" role="presentation"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-expand"></use></svg>
              </span>
            </a>
            <ul class="link-sublist collapse show" id="collapseTre">
              <li>
                <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
              </li>
              <li>
                <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
              </li>
              <li>
                <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
              </li>
            </ul>
          </li>
          <li>
            <a class="list-item large medium right-icon" href="#collapseQuattro" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapseQuattro">
              <span class="list-item-title-icon-wrapper">
                <span class="fw-bold">Lorem ipsum dolor</span>
                <svg class="icon icon-sm icon-primary right" role="presentation"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-expand"></use></svg>
              </span>
            </a>
            <ul class="link-sublist collapse show" id="collapseQuattro">
              <li>
                <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
              </li>
              <li>
                <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
              </li>
              <li>
                <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
              </li>
            </ul>
          </li>
          <li>
            <a class="list-item large medium right-icon" href="#collapseCinque" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapseCinque">
              <span class="list-item-title-icon-wrapper">
                <span class="fw-bold">Lorem ipsum dolor</span>
                <svg class="icon icon-sm icon-primary right" role="presentation"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-expand"></use></svg>
              </span>
            </a>
            <ul class="link-sublist collapse show" id="collapseCinque">
              <li>
                <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
              </li>
              <li>
                <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
              </li>
              <li>
                <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

      </div>
    </div>
  </div>

Accesso area privata

La topbar può essere impiegata come toolbar di servizio inserendo voci quali login, cambio lingua, assistenza ecc.

logo regione lombardia
Esplora i siti di Regione
ACCEDI
Nome applicativo

logo regione lombardia
Esplora i siti di Regione
Nome applicativo

Il menu dropdown può contenere link utili per il logout e la gestione del profilo e delle impostazioni utente.



Comportamento scroll

Allo scroll down:

  1. la topbar sparisce
  2. il center header
    • se il menù è orizzontale, sparisce
      e logo e pulsante cerca vengono clonati nella navbar orizzontale
    • se il menu è verticale, diminuisce in altezza.

Scrollando al top della pagina l’header torna alla versione completa.

Per vedere il comportamento dell’header e dei diversi tipi di menù di navigazione, e il loro funzionamento all’interno di pagine complete, si vedano le pagine degli esempi.

Esempi

Nota:
Per ogni link si apre un tab separato in cui compare una pagina intera di esempio.
Può essere utile “staccarla” dalle altre per provare anche vedere la responsività della stessa quando si variano le dimensioni della finestra portandole a livello tablet e smartphone.

menu orizzontale
menu verticale
sidebar

Utilizzo del componente

L’header è costruito sulla base del componente header di bootstrap-italia che è composto da tre parti:

  1. topbar equivalente allo slim header
  2. header centrale
  3. navbar il menu di navigazione che può essere orizzontale, verticale o sidebar.

Il Design System di Regione Lombardia prevede l’utilizzo dell’header di tipo sticky.
Quindi gli attributi html del tag <header> tipicamente sono:

<header class="it-header-wrapper it-header-sticky"
  data-bs-position-type="fixed"
  data-bs-toggle="sticky"
  data-bs-target="#header-nav-wrapper"
  data-bs-sticky-class-name="is-sticky">

cui segue, a seconda del tipo di menù utilizzato:

orizzontale

  {% include html_docs/header/topbar.html %}
  <div class="it-nav-wrapper">
    {% include html_docs/header/center_menu-oriz.html %}
    {% include html_docs/header/navbar_oriz.html %}
  </div>
</header>

verticale

   {% include html_docs/header/topbar.html %}
   {% include html_docs/header/center_menu-vert.html %}
    <div id="it25-menu-vert">
     {% include html_docs/menu-verticale/menu-verticale-annidato.html %}
    </div>
</header>
   {% include html_docs/header/topbar.html %}
   {% include html_docs/header/center_sidebar.html %}
</header>

<main>
  <div class="container-fluid">
    <div class="row flex-xl-nowrap">
      <div class="col-12 col-md-3 col-xl-2 it25-sidebar">
      {% include html_docs/menu-verticale/menu-verticale-annidato.html %}
      </div>
      <div class="col-12 col-md-9">
        <h1>Nome form</h1>
        <form class="my-5 px-5" id="justValidate" action="index.html" method="post">
. . .

In questo caso il menu-verticale-annidato è inserito nel <main> della pagina.

Topbar

La stuttura html della topbar è la seguente:

  <div class="it-header-slim-wrapper it25-top-bar">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <div class="it-header-slim-wrapper-content">
            <a class="navbar-brand" href="#" aria-label="link sito regione lombardia">
              <img src="/bootstrap-lombardia/dist/assets/img/logo-rl-negativo.svg" alt="logo regione lombardia" />
            </a>
            <div class="it-header-slim-right-zone">
              
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

All’interno del <div class="it-header-slim-right-zone"> vanno posti i dropdown adatti all’applicativo:

<div class="nav-item">
  <a href="#" class="d-none d-md-block">Esplora i siti di Regione
    <svg class="icon"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-external-link"></use></svg>
  </a>
</div>

<!-- scelta lingua -->
<div class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Selezione lingua: lingua selezionata</span>
    <span>ITA</span>
    <svg class="icon"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-expand"></use></svg>
  </a>
  <div class="dropdown-menu">
    <div class="row">
      <div class="col-12">
        <div class="link-list-wrapper">
          <ul class="link-list">
            <li><a class="dropdown-item list-item" href="#"><span>ITA<span class="visually-hidden">selezionata</span></span></a></li>
            <li><a class="dropdown-item list-item" href="#"><span>ENG</span></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>



<!-- funzioni per utente loggato -->
<div class="nav-item dropdown d-inline">
  <a aria-expanded="false" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" href="#" data-bs-display="static">
    <span>Nome Cognome</span>
    <svg class="icon icon-white" aria-label="utente">
      <use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-user"></use>
    </svg>
    <svg class="icon icon-white" aria-label="espandi">
      <use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-expand"></use>
    </svg>
  </a>
  <div class="dropdown-menu" data-popper-placement="bottom-end">
    <div class="link-list-wrapper">
      <ul class="link-list">
        <li>
          <a class="list-item" href="#"><span>Impostazioni</span></a>
        </li>
        <li>
          <a class="list-item" href="#"><span>Voce 2</span></a>
        </li>
        <li>
          <a class="list-item" href="#"><span>Voce 3</span></a>
        </li>
        <li>
          <a class="list-item" href="#"><span>Voce 4</span></a>
        </li>
        <li>
          <span class="divider" role="separator"></span>
        </li>
        <li>
          <a class="list-item" href="#">
            <svg class="icon icon-primary">
              <use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-logout"></use>
            </svg>
            <span>Logout</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>



<!-- pulsante login utente -->
<div class="it-access-top-wrapper">
  <a class="btn btn-primary" href="#">ACCEDI
    <svg class="icon icon-white d-inline" aria-label="utente">
      <use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-user"></use>
    </svg>
  </a>
</div>

Center

Il codice per la parte centrale cambia leggermente a seconda del tipo di menù di navigazione pincipale scelto.

orizzontale

    <div class="it-header-center-wrapper">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">

            <div class="it-header-center-content-wrapper d-flex justify-content-between">

              <div class="it25-left-zone d-flex justify-content-start">
                <div class="it-brand-wrapper d-flex">
                  
                  <a href="#">
                    <img src="/bootstrap-lombardia/dist/assets/img/logo_inlombardia.svg" alt="logo in lombardia" class="it25-header-logo" />
                  </a>
                  
                  <div class="it-brand-text">
                    <div class="it-brand-title d-inline">
                    
                      <span class="it25-text-logo">Text Logo </span>
                    
                     <span class="it25-app-name d-none d-md-inline">Nome applicativo</span>
                     </div>
                  </div>
                </div>
              </div>

              <div class="it-right-zone">
                
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>

verticale

    <div class="it-header-center-wrapper it25-header-menu-vert py-1" id="header-nav-wrapper">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="it-header-center-content-wrapper d-flex justify-content-between">

              <div class="it25-left-zone  d-flex justify-content-start">
                <div class="it25-hamburger-btn-wrapper">
                  <button
                    id="btn-hamburger"
                    class="btn btn-xs"
                    type="button"
                    aria-controls="it25-main-nav"
                    aria-expanded="false"
                    aria-label="Apri menù"
                    data-bs-toggle="collapse"
                    data-bs-target="#it25-main-nav"
                  >
                    <svg class="icon icon-sm icon-primary" role="presentation">
                      <use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-burger"></use>
                    </svg>
                  </button>
                </div>

                <div class="it-brand-wrapper d-flex justify-content-start">
                  
                  <a href="#">
                    <img src="/bootstrap-lombardia/dist/assets/img/logo_inlombardia.svg" alt="logo in lombardia" class="it25-header-logo" />
                  </a>
                  
                  <div class="it-brand-text">
                    <div class="it-brand-title d-inline">
                    
                      <span class="it25-text-logo">Text Logo </span>
                    
                    <span class="it25-app-name d-none d-md-inline">Nome applicativo</span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="it-right-zone">
                <div class="it-search-wrapper">
                  <span class="d-none d-md-block">Cerca</span>
                  <a class="search-link rounded-icon" aria-label="Cerca nel sito" href="#">
                    <svg class="icon icon-sm"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-search"></use></svg>
                  </a>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="it-header-center-wrapper it25-header-sidebar" id="header-nav-wrapper">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="it-header-center-content-wrapper d-flex justify-content-between">

              <div class="it25-left-zone  d-flex justify-content-start">
                <div class="it25-hamburger-btn-wrapper">
                  <button
                    id="btn-hamburger"
                    class="custom-navbar-toggler btn btn-xs d-md-none"
                    type="button"
                    aria-controls="it25-main-nav"
                    aria-expanded="false"
                    aria-label="Apri menù"
                    data-bs-toggle="collapse"
                    data-bs-target="#it25-main-nav"
                  >
                    <svg class="icon icon-primary" role="presentation">
                      <use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-burger"></use>
                    </svg>
                  </button>
                </div>

                <div class="it-brand-wrapper d-flex justify-content-start">
                  
                  <a href="#">
                    <img src="/bootstrap-lombardia/dist/assets/img/logo_inlombardia.svg" alt="logo in lombardia" class="it25-header-logo" />
                  </a>
                  
                  <div class="it-brand-text">
                    <div class="it-brand-title d-inline">
                    
                      <span class="it25-text-logo">Text Logo </span>
                    
                    <span class="it25-app-name d-none d-md-inline">Nome applicativo</span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="it-right-zone">
                <div class="it-search-wrapper">
                  <span class="d-none d-md-block">Cerca</span>
                  <a class="search-link rounded-icon" aria-label="Cerca nel sito" href="#">
                    <svg class="icon icon-sm"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-search"></use></svg>
                  </a>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>

Nota: Nel caso non esistano né logo né acronimo, e quindi l’unica cosa che compare nel center sia il nome dell’applicativo, vanno tolte le classi d-none d-md-inline dal tag

<span class="it25-app-name d-inline">Nome applicativo</span>

e sostituite con d-inline, in modo che il nome applicativo compaia anche sugli schermi di piccole dimensioni.
Naturalmente, se il nome apllicativo è molto lungo, si può decidere di visualizzarne, sugli schermi piccoli, una versione abbreviata sempre giocando sulle classi Display

Attivazione

Per attivare il funzionamento di tutti i tipi di menù, è necessario invocare la funzione :

bootstrap.it25Header()

Breaking change

Nuovo Header

  • Cambiamento struttura
  • Comportamento di default: riduzione dimensioni allo scroll verso il basso.
  • Duplicazione del logo applicativo nella navbar del menu orizzontale.