Breadcrumb
<div class="row breadcrumbs internet-breadcrumb" aria-label="Breadcrumb">
<ul class="breadcrumb visible-sm-block visible-md-block visible-lg-block">
<li>
<a href="#">Livello 1</a>
</li>
<li>
<a href="#">Livello 2</a>
</li>
<li>Livello 3</li>
</ul>
</div>
User Experience
La breadcrumb ("briciole di pane") é una tecnica di navigazione utilizzata nelle interfacce utente.
Rappresenta il percorso gerarchico di link per giungere una data pagina all'interno di un sito web.
É un elemento utile per tornare indietro e/o alla pagina iniziale del sito web.
Menu Servizi Online
<!-- Primo livello -->
<button id="trigger-slider-menu" class="pull-left" aria-label="Apre il menù laterale" aria-expanded="false" aria-controls="navigazionesecondaria">
<span class="fa fa-2x fa-outdent"></span>
</button>
<div class="row">
<nav id="navigazionesecondaria" class="col-xs-12 col-sm-4 col-lg-3 slider-menu filtro">
<div class="box-menu-contestuale servizi-online-primo-livello">
<button id="close-slider-menu" class="pull-right" aria-label="Chiude il menù laterale" aria-expanded="true" aria-controls="navigazionesecondaria">
<span class="fa fa-close"></span>
</button>
<section id="sidebar-superiore">
<div class="panel-heading menu">
<h2 class="sidebar-superiore-title">Titolo</h2>
</div>
<ul role="menu">
<li class="selected">
<a class="livello_1" data-toggle="collapse" data-target="#item-1" aria-expanded="false">Primo livello</a>
<ul class="livello_2 collapse" id="item-1" role="menu" aria-expanded="false">
<li><a href="#">Secondo livello</a></li>
<li><a href="#">Secondo livello</a></li>
<li><a href="#">Secondo livello</a></li>
</ul>
</li>
<li><a class="livello_1" href="#">Primo livello</a></li>
<li><a class="livello_1" href="#">Primo livello</a></li>
<li>
<a class="livello_1" data-toggle="collapse" data-target="#item-2" aria-expanded="false">Primo livello</a>
<ul class="livello_2 collapse" id="item-2" role="menu" aria-expanded="false">
<li><a href="#">Secondo livello</a></li>
<li><a href="#">Secondo livello</a></li>
</ul>
</li>
<li>
<a class="livello_1" data-toggle="collapse" data-target="#item-3" aria-expanded="false">Primo livello</a>
<ul class="livello_2 collapse" id="item-3" role="menu" aria-expanded="false">
<li><a href="#">Secondo livello</a></li>
<li><a href="#">Secondo livello</a></li>
<li><a href="#">Secondo livello</a></li>
<li><a href="#">Secondo livello</a></li>
<li><a href="#">Secondo livello</a></li>
<li><a href="#">Secondo livello</a></li>
</ul>
</li>
</ul>
<ul class="fa-ul miniMenuIcon">
<li><span class="fa-li fa fa-question"></span><a href="#">Consulta le FAQ</a></li>
<li><span class="fa-li fa fa-book"></span><a href="#">Manuali operativi</a></li>
<li><span class="fa-li fa fa-download"></span><a href="#">Scarica elemento</a></li>
</ul>
</section>
<section id="sidebar-inferiore">
<div class="sidebar-inferiore-title">Titolo inferiore</div>
<span class="sidebarLinks"><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</a></span>
<span class="sidebarLinks"><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</a></span>
<span class="whitelink">
<a href="#">Lorem ipsum dolor sit amet <strong class="fa fa-angle-double-right"></strong></a>
</span>
</section>
</div>
</nav>
</div>
<!-- Secondo livello -->
<button id="trigger-slider-menu" class="pull-left" aria-label="Apre il menù laterale" aria-expanded="false" aria-controls="navigazionesecondaria">
<span class="fa fa-2x fa-outdent"></span>
</button>
<div class="row">
<nav id="navigazionesecondaria" class="col-xs-12 col-sm-4 col-lg-3 slider-menu filtro">
<div class="box-menu-contestuale servizi-online-secondo-livello">
<button id="close-slider-menu" class="pull-right" aria-label="Chiude il menù laterale" aria-expanded="true" aria-controls="navigazionesecondaria">
<span class="fa fa-close"></span>
</button>
<section id="sidebar-superiore">
<div class="panel-heading menu">
<h2>
<a href="#">
<span class="menu-arrow-webkit glyphicon glyphicon-triangle-left"></span>
Torna alla mia Homepage
</a>
</h2>
</div>
<ul role="menu">
<li>
<a class="livello_1" data-toggle="collapse" data-target="#item-1" aria-expanded="false">Primo livello</a>
<ul class="livello_2 collapse" id="item-1" role="menu" aria-expanded="false">
<li><a href="#">Secondo livello</a></li>
<li class="selected"><a href="#">Secondo livello</a></li>
<li><a href="#">Secondo livello</a></li>
</ul>
</li>
<li><a class="livello_1" href="#">Primo livello</a></li>
<li><a class="livello_1" href="#">Primo livello</a></li>
<li>
<a class="livello_1" data-toggle="collapse" data-target="#item-2" aria-expanded="false">Primo livello</a>
<ul class="livello_2 collapse" id="item-2" role="menu" aria-expanded="false">
<li><a href="#">Secondo livello</a></li>
<li><a href="#">Secondo livello</a></li>
</ul>
</li>
<li>
<a class="livello_1" data-toggle="collapse" data-target="#item-3" aria-expanded="false">Primo livello</a>
<ul class="livello_2 collapse" id="item-3" role="menu" aria-expanded="false">
<li><a href="#">Secondo livello</a></li>
<li><a href="#">Secondo livello</a></li>
<li><a href="#">Secondo livello</a></li>
<li><a href="#">Secondo livello</a></li>
<li><a href="#">Secondo livello</a></li>
<li><a href="#">Secondo livello</a></li>
</ul>
</li>
</ul>
<ul class="fa-ul miniMenuIcon">
<li><span class="fa-li fa fa-question"></span><a href="#">Consulta le FAQ</a></li>
<li><span class="fa-li fa fa-book"></span><a href="#">Manuali operativi</a></li>
<li><span class="fa-li fa fa-download"></span><a href="#">Scarica elemento</a></li>
</ul>
</section>
<section id="sidebar-inferiore">
<div class="sidebar-inferiore-title">Titolo inferiore</div>
<span class="whitelink"><a href="#">Lorem ipsum dolor sit amet <strong class="fa fa-angle-double-right"></strong></a></span>
<span class="whitelink"><a href="#">Lorem ipsum dolor sit amet <strong class="fa fa-angle-double-right"></strong></a></span>
<span class="whitelink"><a href="#">Lorem ipsum dolor sit amet <strong class="fa fa-angle-double-right"></strong></a></span>
</section>
</div>
</nav>
</div>
User Experience
Il menu dei servizi online, si differenzia da quello di portale (reperibile nelle linee guida di integrazione), per la presenza di link esterni alla navigazione del ramo che l'utente sta navigando.
I link vegono distinti da icone ad hoc che possono essere scelte dall'elenco di Font Awesome.
Nella parte inferiore, se necessario, é possibile aggiungere anche un ulteriore box di colore blu. In questa area si possono inserire link di approfondimento con specifiche tematiche, ad esempio normative a supporto.
Un'altra significativa differenza é costituita dalla possibilità di espandere le voci di menu senza cambiare la pagina.
Un'ulteriore differenza con il menu di portale, riguarda il comportamento responsive. Il menu dei servizi online infatti deve essere compresso già alla risoluzione per tablet in modalità portrait (rif. 3. Comportamento responsive).
1. Primo livello:
2. Secondo livello:
3. Comportamento responsive:
