Header - Varianti
Documentazione relativa alle varianti disponibili per la header
Header servizi online
Nelle sezioni dedicate ai servizi online può essere utile una versione differente della header, che riporti solo il brand, senza navigazione.
<header class="row interna pb-2 pt-2 pl-0 pr-0 m-auto container">
<div class="col-6 text-left pl-2">
<a href="#">
<img src="https://cdn.unito.it/unito-loghi/unitoit.svg" alt="Unito.it" width="220" height="49">
</a>
</div>
<div class="col-6 float-right text-right pr-2">
<picture class="d-block float-right">
<source media="(min-width: 992px)" srcset="https://cdn.unito.it/unito-loghi/logo_sigillo.svg" height="121" width="97">
<img src="https://cdn.unito.it/unito-loghi/logo_sigillo_orizzontale.svg" alt="Sigillo dell'Università degli Studi di torino" height="80" width="140" >
</picture>
</div>
</header> <header class="row interna with-nav pb-2 pt-2 pl-0 pr-0 m-auto container">
<div class="col-6 text-left pl-2">
<button class="mt-2 d-block d-lg-none minimal-toggler navbar-toggle collapsed" type="button" aria-controls="nav03" aria-expanded="false" aria-label="Toggle navigation" data-bs-target="#nav02" data-bs-toggle="navbarcollapsible" data-focus-mouse="false">
<svg role="navigation" aria-describedby="my-title" class="icon">
<title id="my-title">my-title</title><use xlink:href="./dist/svg/sprite.svg#it-burger"></use>
</svg>
<span class="visually-hidden">Apri menù</span>
</button>
<a href="#">
<img src="https://cdn.unito.it/unito-loghi/unitoit.svg" alt="Unito.it" width="220" height="49">
</a>
</div>
<div class="col-6 float-right text-right pr-2">
<picture class="d-block float-right">
<source media="(min-width: 992px)" srcset="https://cdn.unito.it/unito-loghi/logo_sigillo.svg" height="121" width="97">
<img src="https://cdn.unito.it/unito-loghi/logo_sigillo_orizzontale.svg" alt="Sigillo dell'Università degli Studi di torino" height="80" width="140" >
</picture>
</div>
<div class="mt-3 it-header-navbar-wrapper">
<div class="container">
<div class="row">
<div class="col-12 ps-0 pe-0">
<!--start nav-->
<nav class="navbar navbar-expand-lg has-megamenu">
<div class="navbar-collapsable" id="nav02" style="display: none;">
<div class="menu-wrapper">
<ul class="navbar-nav">
<li class="nav-item" id="ateneo"><a class="nav-link" href="#"><span>Ateneo </span></a></li>
<li class="nav-item" id="didattica"><a class="nav-link" href="#"><span>Didattica</span></a></li>
<li class="nav-item" id="ricerca"><a class="nav-link" href="#"><span>Ricerca</span> <span class="visually-hidden">current</span></a></li>
<li class="nav-item" id="UniLavoro"><a class="nav-link" href="#"><span>Università e Lavoro</span></a></li>
<li class="nav-item dropdown" id="Internazionalita">
<a class="nav-link dropdown-toggle d-none d-lg-flex" href="#" aria-controls="menu_internazionalita" aria-expanded="false" >
<span>Internazionalità</span>
</a>
<button type="button" aria-expanded="false" aria-controls="menu_internazionalita" aria-label="Internazionalità" ><span class="d-flex d-lg-none">Internazionalità</span></button>
<div class="dropdown-menu" id="menu_internazionalita">
<div class="link-list-wrapper">
<ul class="link-list">
<li><a class="list-item" href="#"><span>Link list 1</span></a></li>
<li><a class="list-item" href="#"><span>Link list 2</span></a></li>
<li><a class="list-item" href="#"><span>Link list 3</span></a></li>
<li><a class="list-item" href="#"><span>Link list 4</span></a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown megamenu" id="servizi">
<a class="nav-link dropdown-toggle d-none d-lg-flex" href="https://www.unito.it" aria-controls="menu_servizi" aria-expanded="false" >
<span>Servizi</span>
</a>
<button id="servizi2" type="button" aria-expanded="false" aria-controls="menu_servizi" aria-label="Servizi" ><span class="d-flex d-lg-none">Servizi</span></button>
<div class="dropdown-menu" id="menu_servizi">
<div class="row link-list-wrapper">
<div class="col-6 col-lg-4 ">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<h3 class="no_toc">Heading 1</h3>
</li>
<li><a class="list-item" href="#"><span>Link list 1</span></a></li>
<li><a class="list-item" href="#"><span>Link list 2</span></a></li>
<li><a class="list-item" href="#"><span>Link list 3</span></a></li>
</ul>
</div>
</div>
<div class="col-6 col-lg-4 ">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<h3 class="no_toc">Heading 2</h3>
</li>
<li><a class="list-item" href="#"><span>Link list 4</span></a></li>
<li><a class="list-item" href="#"><span>Link list 5</span></a></li>
<li><a class="list-item" href="#"><span>Link list 6</span></a></li>
</ul>
</div>
</div>
<div class="col-6 col-lg-4 ">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<h3 class="no_toc">Heading 3</h3>
</li>
<li><a class="list-item" href="#"><span>Link list 7</span></a></li>
<li><a class="list-item" href="#"><span>Link list 8</span></a></li>
<li><a class="list-item" href="#"><span>Link list 9</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</header>Header Minimale
Header minimale con bottone di login
<div class="it-header-center-wrapper minimal theme-light shadow container">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="it-header-center-content-wrapper">
<div class="left-header">
<div class="it-brand-wrapper">
<a href="#">
<img src="https://cdn.unito.it/unito-loghi/unitoit.svg" alt="Unito.it" class="img-fluid" style="max-width: 100px;" width="100" height="22">
</a>
</div>
</div>
<div class="it-right-zone">
<div class="it-access-top-wrapper">
<a class="btn btn-primary btn-sm" href="#">Accedi</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Header minimale con utente loggato
<div class="it-header-center-wrapper minimal theme-light shadow container">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="it-header-center-content-wrapper">
<div class="left-header">
<div class="it-brand-wrapper">
<a href="#">
<img src="https://cdn.unito.it/unito-loghi/unitoit.svg" alt="Unito.it" class="img-fluid" style="max-width: 100px;" width="100" height="22">
</a>
</div>
</div>
<div class="it-right-zone">
<div class="avatar-wrapper avatar-extra-text">
<div class="avatar size-sm">
<img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Giulia Neri">
</div>
<div class="extra-text">
<h4><a href="#">Michela Dotti</a></h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Header Minimale con navigazione a comparsa
In questa variante, la navigazione del sito in uso per la header completa, viene visualizzata a comparsa.
<div class="it-header-center-wrapper minimal theme-light shadow container">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="it-header-center-content-wrapper">
<div class="left-header">
<div class="it-brand-wrapper">
<button class="minimal-toggler navbar-toggle collapsed" type="button" aria-controls="nav03" aria-expanded="false" aria-label="Toggle navigation" data-bs-target="#nav03" data-bs-toggle="navbarcollapsible" data-focus-mouse="false">
<svg role="navigation" aria-describedby="my-title" class="icon">
<title id="my-title">my-title</title><use xlink:href="./dist/svg/sprite.svg#it-burger"></use>
</svg>
<span class="visually-hidden">Apri menù</span>
</button>
<a href="#">
<img src="https://cdn.unito.it/unito-loghi/unitoit.svg" alt="Unito.it" class="img-fluid" style="max-width: 100px;" width="100" height="22">
</a>
</div>
</div>
<div class="it-right-zone">
<div class="it-access-top-wrapper">
<a class="btn btn-primary btn-sm" href="#">Accedi</a>
</div>
</div>
</div>
</div>
<div class="it-header-navbar-wrapper mt-lg-2">
<div class="container">
<div class="row">
<div class="col-12 ps-0 pe-0">
<nav class="navbar navbar-expand-lg has-megamenu">
<div class="navbar-collapsable" id="nav03" aria-expanded="false">
<div class="menu-wrapper">
<ul class="navbar-nav">
<li class="nav-item" id="ateneo2"><a class="nav-link" href="#" data-focus-mouse="false"><span>Ateneo </span></a></li>
<li class="nav-item" id="didattica2"><a class="nav-link" href="#"><span>Didattica</span></a></li>
<li class="nav-item" id="ricerca2"><a class="nav-link" href="#"><span>Ricerca</span> <span class="visually-hidden">current</span></a></li>
<li class="nav-item" id="UniLavoro2"><a class="nav-link" href="#"><span>Università e Lavoro</span></a></li>
<li class="nav-item dropdown" id="Internazionalita">
<a class="nav-link dropdown-toggle d-none d-lg-flex" href="#" aria-controls="menu_internazionalita" aria-expanded="false" ><span>Internazionalità</span></a>
<button type="button" aria-expanded="false" aria-controls="menu_internazionalita" aria-label="Internazionalità" ><span class="d-flex d-lg-none">Internazionalità</span></button>
<div class="dropdown-menu" id="menu_internazionalita">
<div class="link-list-wrapper">
<ul class="link-list">
<li><a class="list-item" href="#" ><span>Link list 1</span></a></li>
<li><a class="list-item" href="#" ><span>Link list 2</span></a></li>
<li><a class="list-item" href="#" ><span>Link list 3</span></a></li>
<li><a class="list-item" href="#" ><span>Link list 4</span></a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div> Header minimale con navigazione sidebar
In questa variante, la navigazione viene veicolata introducendo in pagina un componente di navigazione Sidebar.
La comparsa del menù viene affidata a un bottone introdotto alla sinistra del logo, qualificato con l'attributo data-bs-toggle="collapse".
L'attributo data-bs-target conterrà invece la ID dell'elemeno sidebar di riferimento.
Nell'ambiente della documentazione, che già presenta una sua sidebar, non è possibile una sua visualizzazione, si veda la pagina di esempio e relativo codice html.
<div class="it-header-center-wrapper minimal theme-light shadow container">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="it-header-center-content-wrapper">
<div class="left-header">
<div class="it-brand-wrapper">
<button class="minimal-toggler navbar-toggle collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#id_sidebar" data-focus-mouse="false">
<svg class="icon"><use xlink:href="./dist/svg/sprite.svg#it-burger"></use></svg>
</button>
<a href="#">
<img src="https://cdn.unito.it/unito-loghi/unitoit.svg" alt="Unito.it" class="img-fluid" style="max-width: 100px;" width="100" height="22">
</a>
</div>
</div>
<div class="it-right-zone">
<div class="avatar-wrapper avatar-extra-text">
<div class="avatar size-sm">
<img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Giulia Neri">
</div>
<div class="extra-text">
<h4><a href="#">Michela Dotti</a></h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>