Lity UI Docs
Componente Layout

Documentation Layout

El Documentation Layout estructura automáticamente una vista de documentación completa. Incluye un header pegajoso (sticky), un sidebar izquierdo con navegación categorizada en escritorio y un menú drawer responsive para dispositivos móviles.

Props y Estructura de Datos

Prop / PropertyTipoValor Por DefectoDescripción
titlestring'Documentación UI'Título que se asigna a la etiqueta <title> de la página.
navGroupsNavGroup[]Array de demostraciónListado de grupos y sus respectivos elementos para construir el menú de navegación.

Tipos en TypeScript

export interface NavItem {
  label: string;      // Texto visible del enlace
  href: string;       // Ancla (#id) o URL de destino
  icon?: string;      // Nombre del icono de Astro Icon (opcional)
  badge?: string;     // Etiqueta destacada como "Nuevo" o "Beta" (opcional)
}

export interface NavGroup {
  title?: string;     // Título de la categoría (opcional)
  items: NavItem[];   // Enlaces pertenecientes al grupo
}

Slots Disponibles

  • slot="header"

    Inyecta el componente de cabecera superior. Queda fijo en la parte superior mediante sticky top-0.

  • <slot /> (Default)

    Todo el marcado o elementos colocados directamente dentro del Layout se renderizarán en el área de contenido principal scrollable.

Ejemplo Integrado

---
import Layout from '../../layouts/v2/Documentation/Layout.astro';
import Header from '../../components/v2/LandingPage/header/Header.astro';

const misSecciones = [
  {
    title: 'General',
    items: [
      { label: 'Introducción', href: '#introduccion', icon: 'lucide:sparkles' }
    ]
  }
];
---

<Layout title="Mi Documentación" navGroups={misSecciones}>
  <Header slot="header" title="Lity UI Docs" />

  <section id="introduccion">
    <h1>Hola Mundo</h1>
  </section>
</Layout>