Marco del sistema · sidebar
Menú lateral
Aprobado2026-10-02 · Aprobado por el founder en la revisión visual.
Navegación principal de la empresa: Principal (Inicio, Kōdo, Contactos), Tu negocio (apps instaladas) y abajo Ajustes y la persona.
Vista · datos de ejemplo
Anatomía
- Logo animado del kit (icono de 30 px de alto)
- Botón para recoger
- Buscador con Ctrl K
- Secciones con etiqueta de sistema
- Ítem activo con fondo naranja suave y línea de 2 px
- Árbol de submenús con líneas finas
- Ajustes y tarjeta de la persona al pie
Sí
- Abierto 256 px, recogido 72 px y se recuerda por persona
- Iconos sólo del kit
No
- No armes el logo con texto: es un archivo
- No uses negrita para el ítem activo
HTML exacto
<aside class="nu-lateral" aria-label="Menú">
<div class="nu-lateral__cabeza">
<a class="nu-lateral__logo" href="/start">
<img src="https://branding.nuevauno.com/logos/nuevauno-logo-light.anim.svg" alt="nuevauno" height="30">
</a>
<button type="button" class="nu-lateral__recoger" aria-label="Recoger el menú">
<span class="nu-icono nu-icono--chico" data-icono="sidebar"></span>
</button>
</div>
<button type="button" class="nu-lateral__buscar">
<span class="nu-icono nu-icono--chico" data-icono="search"></span>
<span class="nu-lateral__buscar-texto">Buscar</span>
<span class="nu-lateral__teclas"><kbd>Ctrl</kbd><kbd>K</kbd></span>
</button>
<nav class="nu-lateral__lista">
<div class="nu-menu__grupo">
<div class="nu-menu__seccion">Principal</div>
<a class="nu-menu__item" href="/start" data-activo="true">
<span class="nu-icono" data-icono="nuevauno_dashboard"></span><span class="nu-menu__texto">Inicio</span>
</a>
<a class="nu-menu__item" href="/kodo">
<span class="nu-menu__kodo"><img src="https://branding.nuevauno.com/kodo/kodo-mark.svg" alt="" width="20" height="20"></span><span class="nu-menu__texto">Kōdo</span>
</a>
<a class="nu-menu__item" href="/contacts">
<span class="nu-icono" data-icono="contacts"></span><span class="nu-menu__texto">Contactos</span>
</a>
</div>
<div class="nu-menu__grupo">
<div class="nu-menu__seccion">Tu negocio</div>
<a class="nu-menu__item" href="/dispatch">
<span class="nu-icono" data-icono="nuevauno_packing_lists"></span><span class="nu-menu__texto">Guías</span>
<span class="nu-menu__flecha"><span class="nu-icono nu-icono--chico" data-icono="next"></span></span>
</a>
<a class="nu-menu__item" href="/invoices">
<span class="nu-icono" data-icono="account"></span><span class="nu-menu__texto">Facturas</span>
<span class="nu-menu__flecha"><span class="nu-icono nu-icono--chico" data-icono="next"></span></span>
</a>
<div class="nu-menu__app" data-abierto="true">
<a class="nu-menu__item" href="/site" data-con-arbol="true">
<span class="nu-icono" data-icono="nuevauno_website"></span><span class="nu-menu__texto">Sitio web</span>
</a>
<button type="button" class="nu-menu__abrir" aria-label="Cerrar Sitio web" aria-expanded="true">
<span class="nu-icono nu-icono--chico" data-icono="next"></span>
</button>
<ul class="nu-menu__arbol">
<li><a class="nu-menu__sub" href="/site" data-activo="true">Escritorio</a></li>
<li class="nu-menu__subseccion">Contenido</li>
<li><a class="nu-menu__sub" href="/site/pages">Páginas</a></li>
<li><a class="nu-menu__sub" href="/site/media">Medios</a></li>
</ul>
</div>
<a class="nu-menu__item" href="/apps">
<span class="nu-icono" data-icono="grid"></span><span class="nu-menu__texto">Módulos instalados</span>
</a>
</div>
</nav>
<div class="nu-perfil">
<a class="nu-menu__item" href="/settings">
<span class="nu-icono" data-icono="general_settings"></span><span class="nu-menu__texto">Ajustes</span>
</a>
<button type="button" class="nu-persona">
<span class="nu-persona__cuadro">A</span>
<span class="nu-persona__datos">
<span class="nu-persona__nombre">Ana Pérez</span>
<span class="nu-persona__rol nu-etiqueta">Dueña · Ejemplo SpA</span>
</span>
<span class="nu-persona__mas">···</span>
</button>
</div>
</aside>Clases: .nu-lateral .nu-menu__grupo .nu-menu__seccion .nu-menu__item .nu-menu__arbol .nu-menu__sub .nu-perfil .nu-persona · Fragmento: snippets/sidebar.html