Sistema de Navegación 64bis
Domina la navegación de 64bis.eus: sidebar inteligente, topbar con búsqueda global, breadcrumbs contextuales, atajos de teclado y diseño responsive. Todo diseñado para que encuentres lo que necesitas en menos de 5 segundos.
Anatomía de la navegación
La interfaz de 64bis.eus está diseñada con tres niveles de navegación que trabajan juntos:
- Topbar (barra superior): Navegación global, búsqueda, notificaciones, user menu
- Sidebar (barra lateral izquierda): Menú principal con secciones y subsecciones
- Breadcrumbs (migas de pan): Contexto de ubicación actual y navegación jerárquica
Estos tres niveles permanecen consistentes en toda la plataforma, facilitando la orientación sin importar dónde estés.
Topbar - Barra superior
El topbar permanece fijo en la parte superior en todo momento (sticky positioning). Contiene los elementos más importantes para navegación global y acciones frecuentes.
Estructura del topbar
Sección izquierda (33% del ancho):
- Logo 64bis.eus (clickable): Siempre te devuelve al dashboard home
- Breadcrumbs: Ruta actual con separadores ">" (ej: Dashboard > Proyectos > Proyecto X)
Sección central (34% del ancho):
- Búsqueda global (barra con icono lupa): Acceso mediante Cmd+K (Mac) o Ctrl+K (Windows/Linux)
- Placeholder: "Buscar proyectos, documentos, ofertas..."
Sección derecha (33% del ancho):
- Icono campana (notificaciones): Badge rojo con contador si hay notificaciones sin leer
- Company Switcher (dropdown): Nombre empresa actual + icono flecha abajo (solo si gestionas múltiples empresas)
- User Menu (avatar circular): Foto de perfil o iniciales, dropdown con opciones
Screenshot referencia: dashboard-topbar-anatomia-01.png
Topbar completo anotado con números indicando cada sección: 1-Logo, 2-Breadcrumbs, 3-Búsqueda, 4-Notificaciones, 5-Company Switcher, 6-User Menu
Logo y breadcrumbs
Logo 64bis.eus:
- Siempre visible (fixed)
- Click en cualquier momento para volver al dashboard
- Comportamiento: Si estás en una página con cambios sin guardar, muestra modal de confirmación antes de salir
Breadcrumbs:
- Muestran tu ubicación actual en la jerarquía de navegación
- Máximo 4 niveles visibles (si hay más, se colapsan con "...")
- Cada nivel es clickable excepto el actual (último breadcrumb)
Ejemplos de breadcrumbs:
Dashboard > Calculadora > Nuevo Análisis
Dashboard > Proyectos > Mis Proyectos > Proyecto IA Healthcare
Dashboard > Marketplace > Sector Biotech > Proyecto ABC
Dashboard > Configuración > Cuenta > Facturación
Comportamiento responsive:
- Desktop (>1024px): Breadcrumbs completos visibles
- Tablet (768-1024px): Solo 3 niveles, resto colapsado
- Mobile (<768px): Breadcrumbs ocultos, solo botón "< Atrás"
Búsqueda global
La búsqueda global es una de las features más potentes de 64bis.eus. Usa fuzzy search para encontrar cualquier contenido en la plataforma.
Activación:
- Click en barra de búsqueda
- Cmd+K (Mac) o Ctrl+K (Windows/Linux) desde cualquier lugar
- Abre modal overlay full-screen en mobile
Qué puedes buscar:
- Proyectos (por nombre, CIF, sector, estado)
- Ofertas (por importe, financiador, fecha)
- Documentos (ITC, Modelo 200, contratos)
- Financiadores/investigadores (por nombre empresa)
- Páginas de configuración (ej: "facturación", "notificaciones")
- Ayuda y documentación (ej: "cómo funciona calculadora")
Resultados agrupados:
┌─────────────────────────────────────────────┐
│ Proyectos (3) │
│ → Proyecto IA Healthcare (Publicado) │
│ → Sistema IoT Industria (Borrador) │
│ → App Fintech MVP (En negociación) │
├─────────────────────────────────────────────┤
│ Documentos (2) │
│ → ITC_2023_ProyectoIA.pdf (15 MB) │
│ → Modelo200_2022.pdf (2 MB) │
├─────────────────────────────────────────────┤
│ Ofertas (1) │
│ → Oferta FinanciadorX - 380.000€ (Pendiente) │
└─────────────────────────────────────────────┘
Navegación con teclado:
- Flechas arriba/abajo: Navegar entre resultados
- Enter: Abrir resultado seleccionado
- Esc: Cerrar búsqueda
- Tab: Cambiar entre grupos de resultados
✨ TIP: Power user tip: Usa prefijos para búsqueda avanzada:
p:para proyectos (ej:p:biotech)o:para ofertas (ej:o:>300000)d:para documentos (ej:d:ITC)#para tags (ej:#urgente)
Screenshot referencia: dashboard-busqueda-global-01.png
Modal de búsqueda abierto mostrando resultados agrupados, con segundo resultado destacado (hover), shortcuts de teclado visibles en la parte inferior
Notificaciones
El icono de campana (bell icon) te mantiene informado en tiempo real sobre eventos importantes.
Badge contador:
- Número rojo con notificaciones sin leer (ej: "5")
- Máximo visible: 9+ (si hay más de 9, muestra "9+")
- Desaparece cuando marcas todas como leídas
Dropdown de notificaciones:
- Click en campana abre dropdown
- Muestra últimas 10 notificaciones
- Ordenadas por fecha (más reciente primero)
- Botón "Ver todas" al final → lleva a
/dashboard/notificaciones
Tipos de notificaciones:
- 💰 Nueva oferta recibida (investigador)
- ✅ Oferta aceptada (ambos roles)
- ❌ Oferta rechazada (ambos roles)
- 📄 Documento requiere atención (validación fallida)
- 🔔 Proyecto publicado exitosamente (investigador)
- ⚠️ Oferta expira en 24h (ambos roles, urgente)
- 📊 Nuevo análisis completado (calculadora)
Estados visuales:
- No leída: Fondo azul claro, texto en negrita
- Leída: Fondo blanco, texto normal
- Urgente: Borde rojo izquierdo, icono ⚠️
Profundiza en Sistema de notificaciones para configurar preferencias y gestionar alertas.
User Menu
El avatar circular en la esquina superior derecha abre tu menú de usuario.
Información visible:
- Foto de perfil (si la subiste) o iniciales (ej: "JS" para Juan Sánchez)
- Nombre completo debajo del avatar en el dropdown
- Email de la cuenta
- Rol actual: "Investigador" o "Financiador" (badge con color)
Opciones del dropdown:
- Mi Perfil →
/dashboard/perfil - Configuración →
/dashboard/configuracion - Facturación →
/dashboard/facturacion - Ayuda →
/docs/empezar/que-es-64bis - Cerrar sesión (con confirmación modal)
Personalización:
- Subir foto de perfil (JPG/PNG, máx 2MB, circular automático)
- Cambiar idioma (ES, EN, EU)
- Tema claro/oscuro (toggle incluido en este menú también)
Screenshot referencia: dashboard-user-menu-01.png
User menu expandido mostrando foto de perfil, nombre "Juan Sánchez", badge "Investigador", y las 5 opciones del menú
Sidebar - Menú lateral
El sidebar es tu menú de navegación principal. Contiene acceso a todas las secciones de la plataforma organizadas jerárquicamente.
Estructura del sidebar
Cabecera del sidebar:
- Icono de colapso (hamburger icon): Oculta/muestra sidebar (útil para ganar espacio en pantalla)
- Barra de búsqueda mini (solo busca en menú, no global)
Secciones del sidebar:
Para investigadores:
📊 Dashboard
→ Overview
→ Estadísticas
🧮 Calculadora
→ Nueva Calculadora
→ Mis Análisis
🔬 Mis Proyectos
→ Todos (12)
→ Publicados (5)
→ Borradores (3)
→ Archivados (4)
💰 Ofertas Recibidas
→ Pendientes (3)
→ En negociación (1)
→ Aceptadas (8)
→ Rechazadas (2)
📄 Documentos
⚙️ Configuración
❓ Ayuda
Para financiadores:
📊 Dashboard
→ Overview
→ Estadísticas
🛒 Marketplace
→ Explorar Proyectos
→ Filtros Avanzados
→ Proyectos Guardados (7)
📤 Ofertas Enviadas
→ Pendientes (7)
→ En negociación (2)
→ Aceptadas (15)
→ Rechazadas (5)
💼 Portfolio
→ Financiaciones Activas (15)
→ Historial Completo
→ Métricas ROI
📄 Documentos
⚙️ Configuración
❓ Ayuda
Estados visuales:
- Sección expandida: Icono flecha hacia abajo, subsecciones visibles
- Sección colapsada: Icono flecha derecha, subsecciones ocultas
- Página actual: Fondo teal (#1B9AAA), texto blanco, bold
- Hover: Fondo gris muy claro (#f5f5f5)
- Counters: Badge numérico gris "(3)" si hay items pendientes/sin leer
Screenshot referencia: dashboard-sidebar-expandido-01.png
Sidebar de investigador con sección "Mis Proyectos" expandida, mostrando los 4 estados con counters, y "Publicados" como página activa (background teal)
Colapsar sidebar
Para ganar espacio en pantalla (útil cuando trabajas con documentos o gráficos grandes):
- Click en icono hamburger (parte superior del sidebar)
- El sidebar se colapsa mostrando solo iconos
- Hover sobre icono muestra tooltip con nombre de sección
- Click en cualquier icono expande temporalmente el sidebar (sticky behavior)
- Para fijarlo expandido, click de nuevo en hamburger
Sidebar colapsado muestra:
- Solo iconos de secciones principales (sin texto)
- Badge contador flotante en esquina superior derecha del icono (si hay pendientes)
- Width: 64px (vs 260px expandido)
Atajo de teclado: Alt+S (toggle sidebar colapsado/expandido)
Screenshot referencia: dashboard-sidebar-colapsado-01.png
Sidebar colapsado mostrando solo iconos, con badge "3" flotante en icono de ofertas, y tooltip "Ofertas Recibidas" visible al hacer hover
Breadcrumbs contextuales
Los breadcrumbs te ayudan a entender dónde estás en la jerarquía de navegación y ofrecen atajos para retroceder niveles.
Cómo funcionan
Estructura:
Nivel 1 > Nivel 2 > Nivel 3 > Nivel 4 (actual)
Ejemplo real navegando un proyecto:
Dashboard > Mis Proyectos > Proyecto IA Healthcare > Editar Detalles
Interacción:
- Todos los niveles excepto el último son clickables
- Click en "Dashboard" → Vuelve al dashboard home
- Click en "Mis Proyectos" → Vuelve a la lista de proyectos
- Click en "Proyecto IA Healthcare" → Vuelve a la vista de detalle (antes de entrar a editar)
- "Editar Detalles" (último nivel, actual) → No clickable, es donde estás ahora
Breadcrumbs inteligentes
Detección de cambios sin guardar: Si intentas navegar usando breadcrumbs y tienes cambios sin guardar en un formulario, aparece modal:
┌─────────────────────────────────────────┐
│ ⚠️ ¿Salir sin guardar cambios? │
│ │
│ Tienes cambios sin guardar que se │
│ perderán si sales de esta página. │
│ │
│ [Cancelar] [Salir sin guardar] │
└─────────────────────────────────────────┘
Atajos de teclado
64bis.eus está optimizado para power users que prefieren teclado sobre mouse. Aquí están todos los atajos disponibles:
Atajos globales (funcionan en cualquier lugar)
| Atajo | Acción | Descripción |
|---|---|---|
| Cmd+K (Mac) / Ctrl+K (Win) | Abrir búsqueda global | Busca proyectos, ofertas, docs |
| Alt+S | Toggle sidebar | Colapsa/expande el sidebar |
| Alt+N | Abrir notificaciones | Abre dropdown de notificaciones |
| Alt+H | Ir a Home | Vuelve al dashboard home |
| Alt+C | Nueva calculadora | Abre wizard de calculadora |
| Alt+P | Nuevo proyecto | Abre wizard de nuevo proyecto |
| Esc | Cerrar modales | Cierra cualquier modal/dropdown abierto |
| ? | Ver atajos | Muestra cheatsheet de atajos |
Atajos de navegación
| Atajo | Acción | Descripción |
|---|---|---|
| Alt+1 | Dashboard | Ir a dashboard home |
| Alt+2 | Calculadora | Ir a calculadora |
| Alt+3 | Proyectos | Ir a lista de proyectos |
| Alt+4 | Ofertas | Ir a lista de ofertas |
| Alt+5 | Marketplace | Ir a marketplace (financiadores) |
Atajos en tablas/listas
| Atajo | Acción | Descripción |
|---|---|---|
| J / ↓ | Siguiente item | Selecciona siguiente fila |
| K / ↑ | Item anterior | Selecciona fila anterior |
| Enter | Abrir seleccionado | Abre detalle del item seleccionado |
| Espacio | Marcar/Checkbox | Selecciona checkbox (multi-selección) |
| A | Seleccionar todos | Marca todos los items visibles |
✨ TIP: Power user tip: Presiona ? en cualquier momento para ver un cheatsheet completo de atajos de teclado. Se adapta según la página donde estés (atajos contextuales).
Screenshot referencia: dashboard-atajos-cheatsheet-01.png
Modal de cheatsheet de atajos de teclado mostrando atajos globales y contextuales para la página "Mis Proyectos", con búsqueda inline para filtrar atajos
Navegación móvil
En mobile y tablet (pantallas <1024px), la navegación se adapta para optimizar el espacio:
Topbar móvil
Cambios:
- Hamburger menu (icono tres líneas) reemplaza el logo en la izquierda
- Breadcrumbs ocultos (solo visible botón "< Atrás" cuando estás en detalle de algo)
- Búsqueda colapsada: Icono lupa que abre modal full-screen
- Notificaciones y user menu se mantienen (iconos más pequeños)
Hamburger menu:
- Click abre sidebar como overlay desde la izquierda (slide-in animation)
- Fondo oscuro semi-transparente (backdrop) cubre el resto de la pantalla
- Click fuera del sidebar o en botón "X" cierra el sidebar
Screenshot referencia: dashboard-mobile-topbar-01.png
Topbar móvil mostrando hamburger menu, búsqueda colapsada, notificaciones (con badge "3"), y user menu
Sidebar móvil (overlay)
Comportamiento:
- Abre desde la izquierda con animación slide-in (300ms)
- Ocupa 80% del ancho de la pantalla (máx 320px)
- 20% derecho es backdrop oscuro semi-transparente
- Click en backdrop cierra el sidebar
- Swipe hacia la izquierda también cierra
Estructura:
- Cabecera con logo 64bis.eus + botón "X" cerrar
- Company switcher (si aplica) en la parte superior
- Menú de navegación idéntico a desktop
- Footer con versión de la app y links legales
Screenshot referencia: dashboard-mobile-sidebar-overlay-01.png
Sidebar móvil abierto como overlay, ocupando 80% del ancho, con backdrop oscuro en el 20% derecho, mostrando menú completo de navegación
Búsqueda móvil
Modal full-screen:
- Click en icono lupa abre modal que ocupa toda la pantalla
- Input de búsqueda en la parte superior con botón "Cancelar" a la derecha
- Resultados se muestran debajo en scroll infinito
- Teclado virtual se abre automáticamente
Optimizaciones:
- Resultados con thumbnails más grandes (mejor touch targets)
- Grupos colapsables (expande/colapsa secciones de resultados)
- Filtro rápido por tipo (tabs: Todos, Proyectos, Ofertas, Documentos)
Próximos pasos
Ahora que dominas la navegación de 64bis.eus, explora funcionalidades avanzadas:
Multi-empresa: Company Switcher - Aprende a gestionar múltiples empresas y cambiar contextos rápidamente.
Atajos avanzados: Quick Actions - Descubre el botón flotante de acciones rápidas para flujos ultra-rápidos.
Entender métricas: Estadísticas del dashboard - Profundiza en qué significa cada métrica y cómo interpretarla.
¿Dudas?: Consulta preguntas frecuentes o presiona ? para ver atajos contextuales.
¿Te ayudó esta página? Tu feedback nos ayuda a mejorar la documentación.
{/* Feedback widget */}
Última actualización: 5 octubre 2025 | Tiempo de lectura: 7 minutos
¿Te ayudó esta página?