Paneles laterales de navegación. Usa el bloque BEM .cl-drawer del Kit Digital.
Cerrado
<nav class="cl-drawer" aria-label="Navegación lateral">
<ul class="cl-drawer__list">
<li class="cl-drawer__item">
<button class="cl-drawer__trigger" type="button" aria-expanded="false">
<span class="cl-drawer__leading cl-icon" data-icon="home" aria-hidden="true"></span>
<span class="cl-drawer__label">Inicio</span>
<span class="cl-drawer__chevron cl-icon" data-icon="expand-more" aria-hidden="true"></span>
</button>
</li>
</ul>
</nav>
Con botón cerrar
<nav class="cl-drawer cl-drawer--mobile" aria-label="Navegación lateral">
<button class="cl-drawer__close" type="button" aria-label="Cerrar navegación">
<span class="cl-drawer__close-icon cl-icon" data-icon="arrow-back" aria-hidden="true"></span>
</button>
<ul class="cl-drawer__list">
<li class="cl-drawer__item">
<button class="cl-drawer__trigger" type="button" aria-expanded="false">
<span class="cl-drawer__leading cl-icon" data-icon="home" aria-hidden="true"></span>
<span class="cl-drawer__label">Inicio</span>
<span class="cl-drawer__chevron cl-icon" data-icon="expand-more" aria-hidden="true"></span>
</button>
</li>
</ul>
</nav>
Con subnivel
<nav class="cl-drawer" aria-label="Navegación lateral">
<ul class="cl-drawer__list">
<li class="cl-drawer__item">
<button class="cl-drawer__trigger" type="button" aria-expanded="true">
<span class="cl-drawer__leading cl-icon" data-icon="home" aria-hidden="true"></span>
<span class="cl-drawer__label">Gestión</span>
<span class="cl-drawer__chevron cl-icon" data-icon="expand-more" aria-hidden="true"></span>
</button>
<div class="cl-drawer__submenu">
<ul class="cl-drawer__submenu-list">
<li><a class="cl-drawer__subitem" href="#">Bandeja de entrada</a></li>
<li><a class="cl-drawer__subitem" href="#" aria-current="page">Solicitudes activas</a></li>
</ul>
</div>
</li>
</ul>
</nav>