Pontificia Universidad Católica de Chile
Kit Digital
Sistema para diseñar y construir interfaces de sitios web para la UC
  • Inicio
  • Diseño
  • Desarrollo
  • Ejemplos
  • Contenido
  • Kit DataViz
  • Kit Mailing
  • Checklist
Kit Digital de la UC
  • Inicio
    • Diseño arrow_forward_ios
      • arrow_back_ios Diseño
      • Principios
      • Experiencia de usuario
      • Color
      • Tipografía
      • Grilla
      • Formas
      • Recursos
  • Desarrollo arrow_forward_ios
    • arrow_back_ios
      Desarrollo
    • Introdución arrow_forward_ios
      • arrow_back_ios Introdución
      • Instalación
      • Metodología
      • Comp. Navegadores
      • Notas sobre las versiones
    • Componentes arrow_forward_ios
      • arrow_back_ios Componentes
      • Grilla
      • Tipografía
      • Espaciado y márgenes
      • Íconos
      • Botones
      • Breadcrumbs
      • Ecosistema
      • Etiquetas
      • Header
      • Footer
      • Topbar y Footer globales
      • Menú móvil
      • Menú desplegable
      • Menú lateral
      • Paginador
      • Pasos
      • Pestañas
      • Avatares
      • Acordeón
      • Cards
      • Carrusel principal
      • Carrusel de cards
      • Citas
      • Colapsables
      • Divisores
      • Eventos
      • Filtros
      • Galeria
      • Hero
      • Listas
      • Tablas
      • Formulario UC
      • Inputs de texto
      • Selector
      • Checkbox, Radio y Switch
      • Slider
      • Mensajes y alertas
      • Modales
      • Tooltips
      • Badges
      • Lectores de pantalla
      • H1 en pantalla de inicio
  • Contenido arrow_forward_ios
    • arrow_back_ios
      Contenido
    • ¿Cómo optimizamos nuestros contenidos? arrow_forward_ios
      • arrow_back_ios ¿Cómo optimizamos nuestros contenidos?
      • Antes de empezar
      • ¿Cómo mejorar títulos y subtítulos?
      • ¿Cómo trabajar los textos?
      • ¿Con qué criterios incluir enlaces?
      • ¿Cómo optimizar las fotos?
    • Recursos online arrow_forward_ios
      • arrow_back_ios Recursos online
      • Bancos de imágenes gratuitos
      • Pauta de lenguaje fácil para hacer textos accesibles
      • Manual de estilo de textos UC
      • Autorización de Uso de Imágenes
  • Dataviz arrow_forward_ios
    • arrow_back_ios
      Dataviz
    • Kit para visualización de datos arrow_forward_ios
      • arrow_back_ios Kit para visualización de datos
      • ¿Qué es?
      • Cómo usar el kit
      • Tipos de gráficos
      • Accesibilidad
      • Ayuda y contacto
      • Versionamiento
      • Glosario de términos
    • Estilo de diseño arrow_forward_ios
      • arrow_back_ios Estilo de diseño
      • Color
      • Tipografía
      • Elementos de base
      • Elementos de navegación
    • Gráficos arrow_forward_ios
      • arrow_back_ios Gráficos
      • De barras
      • De barras apiladas y agrupadas
      • De lineas
      • Circulares
      • De donas
      • Tablas
      • Card de cifras
      • Histograma
      • Mapas
      • Boxplot (cajas y bigotes)
      • De dispersión
      • De burbujas
  • Mailing arrow_forward_ios
    • arrow_back_ios
      Mailing
    • Kit para mailing arrow_forward_ios
      • arrow_back_ios Kit para mailing
      • ¿Qué es?
      • Cómo usar el kit
      • Recomendaciones de diseño
      • Versionamiento
      • Ayuda y contacto
    • Plantillas de mailing arrow_forward_ios
      • arrow_back_ios Plantillas de mailing
      • Plantillas del Kit de Mailing
      • Plantilla básica
      • Invitación a actividad
      • Newsletter o boletín
    • Estilo de diseño arrow_forward_ios
      • arrow_back_ios Estilo de diseño
      • Guía de estilos
      • Color
      • Tipografía
      • Formas
      • Grilla y espaciados
    • Componentes arrow_forward_ios
      • arrow_back_ios Componentes
      • Listado de componentes
      • Headers y cabeceras
      • Títulos y subtítulos
      • Bloques de contenido
      • Bloques de eventos
      • Botones
      • Iconos e Imágenes
      • Footers y bajadas
  • Ejemplos
  • Checklist
  • Introdución
    • Instalación
      keyboard_arrow_right
    • Metodología
      keyboard_arrow_right
    • Comp. Navegadores
      keyboard_arrow_right
    • Notas sobre las versiones
      keyboard_arrow_right
  • Componentes
    • Base
    • Grilla
      keyboard_arrow_right
    • Tipografía
      keyboard_arrow_right
    • Espaciado y márgenes
      keyboard_arrow_right
    • Íconos
      keyboard_arrow_right
    • Navegación
    • Botones
      keyboard_arrow_right
    • Breadcrumbs
      keyboard_arrow_right
    • Ecosistema
      keyboard_arrow_right
    • Etiquetas [Tags]
      keyboard_arrow_right
    • Header
      keyboard_arrow_right
    • Footer
      keyboard_arrow_right
    • Topbar y Footer globales
      keyboard_arrow_right
    • Menú móvil
      keyboard_arrow_right
    • Menú desplegable
      keyboard_arrow_right
    • Menú lateral
      keyboard_arrow_right
    • Paginador
      keyboard_arrow_right
    • Pasos [Steps]
      keyboard_arrow_right
    • Pestañas [Tabs]
      keyboard_arrow_right
    • Contenido
    • Avatares
      keyboard_arrow_right
    • Acordeón
      keyboard_arrow_right
    • Cards
      keyboard_arrow_right
    • Carrusel principal
      keyboard_arrow_right
    • Carrusel de cards
      keyboard_arrow_right
    • Citas
      keyboard_arrow_right
    • Colapsables
      keyboard_arrow_right
    • Divisores
      keyboard_arrow_right
    • Eventos
      keyboard_arrow_right
    • Filtros
      keyboard_arrow_right
    • Galeria
      keyboard_arrow_right
    • Hero
      keyboard_arrow_right
    • Listas
      keyboard_arrow_right
    • Tablas
      keyboard_arrow_right
    • Formularios
    • Formulario UC
      keyboard_arrow_right
    • Inputs de texto
      keyboard_arrow_right
    • Selector
      keyboard_arrow_right
    • Checkbox, Radio y Switch
      keyboard_arrow_right
    • Slider
      keyboard_arrow_right
    • Alertas
    • Mensajes y alertas
      keyboard_arrow_right
    • Modales
      keyboard_arrow_right
    • Tooltips
      keyboard_arrow_right
    • Badges
      keyboard_arrow_right
    • ACCESIBILIDAD
    • Lectores de pantalla
      keyboard_arrow_right
    • H1 en pantalla de inicio
      keyboard_arrow_right
    v1.83.0

Menú lateral


Permite ampliar la navegación de un sitio y su contenido, disponibilizar rapidamente contenido contextual el cual se esta visualizando.

Implementación estandar

A continuación se muestra el codigo para implementar un menu completo basado en jerarquía de elementos de listas, ul y li.

Considerar que para los elementos disabled, como en item Color del ejemplo, se deben usar la propiedad html tabindex="-1" en los links <a> para saltar la nevagación por teclado.


Menú completo

Ejemplo:

Copiar
    
    

Implementación de alto fijo

En algunos casos se puede requerir acortar el alto de la barra lateral. A continuación se ejemplifica su uso dentro de un contenedor, de alto de 390px.

Menú con alto fijo

Ejemplo:

Copiar
    
    
Pontificia Universidad Católica de Chile

UC Kit Digital

Licencia de Creative Commons
Esta obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional
2024 - Dirección de Visibilidad Digital UC - visibilidaddigital@uc.cl
  • Diseño y desarrollo Asimov Consultores junto a la Dirección de Visibilidad Digital UC
  • Sitio administrado por la Dirección de Visibilidad Digital UC
  • Utilizando el Kit Digital UC