---
title: "Cómo Añadir un Menú Lateral a Tu Sitio Web de Carrd (2026)"
description: "Aprende a añadir un menú lateral a tu sitio web de Carrd con HTML, CSS y JS. Cubre la configuración de Pro Standard, anclajes de sección, accesibilidad y optimización para móvil."
date: 2025-08-04
categories: ["web-development"]
tags: ["carrd","carrd-sidebar-menu","navigation"]
---

import Button from "@components/widgets/Button.astro";
import Notice from "@components/widgets/Notice.astro";
import ListCheck from "@components/widgets/ListCheck.astro";
import Accordion from "@components/widgets/Accordion.astro";

[Carrd.co](https://go.bitdoze.com/carrd) es una plataforma excelente para crear sitios web de una sola página, pero la navegación se complica en cuanto tienes más de unas pocas secciones. Un menú lateral resuelve esto manteniendo la navegación fuera de la pantalla hasta que el visitante la necesita. Sin desperdiciar espacio en pantalla, sin encabezados recargados.

Un menú lateral en Carrd funciona bien porque:

1. **Maximiza el espacio para el contenido.** La navegación permanece oculta hasta que el visitante toca el botón de hamburguesa, manteniendo el foco en tu contenido.
2. **Mejor organización** para sitios con múltiples secciones. Los visitantes pueden saltar a cualquier zona sin hacer scroll.
3. **Adaptado a móvil.** El panel deslizante usa objetivos táctiles cómodos (40px+) y gestiona correctamente el bloqueo de scroll en iOS.
4. **Posicionamiento personalizable.** Ábrelo desde la izquierda o la derecha, deja el botón flotante o fíjalo en un punto de la página.

<Button link="https://go.bitdoze.com/carrd" text="Prueba Carrd.co" variant="solid" color="blue" size="md" />

Algunos tutoriales de Carrd:

- [Añadir un menú flotante a Carrd](https://www.bitdoze.com/carrd-floating-menu/)
- [Añadir un encabezado fijo a Carrd](https://www.bitdoze.com/add-stickey-header-carrd/)
- [Añadir un aviso de cookies a Carrd](https://www.bitdoze.com/add-cookie-notice-carrd/)
- [Añadir una tabla de precios a Carrd](https://www.bitdoze.com/carrd-add-pricing-table/)
- [Reseña de Carrd.co](https://www.bitdoze.com/carrd-review/)
- [Añadir FAQs tipo acordeón a Carrd](https://www.bitdoze.com/es/anadir-acordeon-faq-carrd/)
- [Barra de navegación móvil responsive en Carrd](https://www.bitdoze.com/carrd-mobile-navbar/)
- [Botón de volver arriba en Carrd (guía 2026)](https://www.bitdoze.com/carrd-back-to-top-button/)
- [Ventana modal emergente para Carrd](https://www.bitdoze.com/es/ventana-modal-emergente-carrd/)
- [Alternador de modo oscuro en Carrd](https://www.bitdoze.com/es/alternador-modo-oscuro-carrd/)

> La lista completa de plugins, temas y tutoriales de Carrd está en mi sitio web **[carrdme.com](https://carrdme.com/)**.

## Requisitos previos: Carrd Pro Standard y el elemento Embed

<Notice type="warning" title="Requiere Carrd Pro Standard (19 $/año)">
El elemento Embed solo está disponible en los planes **Carrd Pro Standard (19 $/año)** o **Pro Plus (49 $/año)**. El plan Basic gratuito limita los sitios a 50 elementos y no incluye Embeds. Pro Lite (9 $/año) tampoco incluye Embeds.



<YouTubeEmbed
  url="https://www.youtube.com/embed/UAyDbfnZWCs"
  label="Cómo añadir un menú lateral deslizante a un sitio web de Carrd"
/>
Hay una prueba gratuita de Pro de 7 días sin tarjeta de crédito. La prueba te da funciones de Pro Plus, que incluyen Embeds, así que puedes probar el menú lateral antes de comprometerte.

Si vas a actualizar, también querrás [añadir un dominio personalizado a Carrd](https://www.bitdoze.com/carrd-add-domain/) mientras estás en ello.
</Notice>

Algunas cosas que debes saber antes de empezar:

- **Coste:** 19 $/año como mínimo (Pro Standard). Es el precio mínimo para este enfoque.
- **Alcance:** el código se ejecuta en todo el sitio desde un embed Hidden en Body End. Guarda una copia de seguridad del bloque de código. Si algo se rompe, el arreglo está a una republicación de distancia.
- **Los Embeds no se renderizan en el editor de Carrd.** Debes publicar el sitio para ver el menú lateral. Tras publicar, haz una recarga forzada (Ctrl+Shift+R) para saltarte la caché del navegador.

## Cómo añadir el menú lateral en Carrd

El enfoque es sencillo: pega un bloque HTML/CSS/JS en un elemento Embed. Sin dependencias externas, sin claves de API, sin paso de compilación.

<Notice type="info" title="Publica para probar">
Los elementos Embed son invisibles en la vista previa del editor de Carrd. Después de añadir el código, publica tu sitio y abre la URL en vivo. Usa Ctrl+Shift+R (o Cmd+Shift+R en Mac) para hacer una recarga forzada y saltarte los estilos en caché.
</Notice>

### 1. Añade un elemento Embed (Type: Code, Style: Hidden, Body End)

Haz clic en el botón `+` del editor de Carrd, añade un elemento **Embed** y configura:

- **Type:** Code
- **Style:** Hidden, Body End

Esto inyecta tu código al final del `<body>` de la página, fuera del propio layout de Carrd, así que se carga en cada sección sin ocupar espacio en tu diseño. Evita Head aquí: el snippet contiene marcado visible (el botón y el panel), y `<head>` no es un lugar válido para él.

![Configuración del elemento Embed de Carrd mostrando Type: Code y Style: Hidden, con el desplegable de ubicación al lado](@assets/images/24/02/carrd-back-to-top-embed.png)

La captura muestra el desplegable de ubicación en Head; elige **Body End** en su lugar.

### 2. Pega el código HTML, CSS y JavaScript

Abajo está el código completo. Mejoras clave respecto a una implementación básica: box-sizing con alcance limitado (sin reset global), atributos ARIA apropiados para lectores de pantalla, gestión del foco y un arreglo para el bloqueo de scroll en iOS.

```html
<style>
  :root {
    /* Sidebar Configuration */
    --sidebar-position: left; /* Options: 'left' or 'right' */
    --sidebar-width: 300px;
    --sidebar-bg-color: rgba(25, 25, 25, 0.95);
    --sidebar-text-color: #ffffff;
    --sidebar-border-color: #444;
    --sidebar-hover-color: rgba(255, 255, 255, 0.1);
    --sidebar-accent-color: #007bff;
    --contact-button-hover-color: #0056b3;

    /* Menu Button Configuration */
    --menu-button-bg: rgba(0, 123, 255, 0.9);
    --menu-button-color: #ffffff;
    --menu-button-size: 50px;
    --menu-button-floating: true; /* Options: 'true' or 'false' (string, not boolean) */
    --menu-button-float-position: top; /* Options: 'top' or 'bottom' (only when floating is true) */
    --menu-button-float-side: left; /* Options: 'left' or 'right' (only when floating is true) */
    --menu-button-position-top: 20px;
    --menu-button-position-side: 20px;

    /* Animation Settings */
    --sidebar-animation-speed: 0.3s;
    --button-animation-speed: 0.2s;

    /* Typography */
    --sidebar-font-family: inherit;
    --sidebar-font-size: 16px;
    --sidebar-heading-size: 20px;

    /* Spacing */
    --sidebar-padding: 20px;
    --menu-item-spacing: 15px;
  }

  /* Scoped box-sizing reset (no global * selector) */
  #sidebarToggle,
  .sidebar-overlay,
  #sidebarMenu,
  #sidebarMenu * {
    box-sizing: border-box;
  }

  /* Menu Toggle Button */
  .sidebar-menu-toggle {
    background-color: var(--menu-button-bg);
    color: var(--menu-button-color);
    border: none;
    width: var(--menu-button-size);
    height: var(--menu-button-size);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all var(--button-animation-speed) ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }

  /* Floating button positioning */
  .sidebar-menu-toggle.floating {
    position: fixed;
  }

  .sidebar-menu-toggle.floating.float-top {
    top: var(--menu-button-position-top);
  }

  .sidebar-menu-toggle.floating.float-bottom {
    bottom: var(--menu-button-position-top);
  }

  .sidebar-menu-toggle.floating.float-left {
    left: var(--menu-button-position-side);
  }

  .sidebar-menu-toggle.floating.float-right {
    right: var(--menu-button-position-side);
  }

  /* Static button positioning (when not floating) */
  .sidebar-menu-toggle.static {
    position: relative;
    margin: 10px;
  }

  .sidebar-menu-toggle.static[data-position="left"] {
    left: var(--menu-button-position-side);
  }

  .sidebar-menu-toggle.static[data-position="right"] {
    right: var(--menu-button-position-side);
  }

  .sidebar-menu-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  }

  /* Hamburger Icon */
  .hamburger-icon {
    width: 20px;
    height: 2px;
    background-color: var(--menu-button-color);
    margin: 2px 0;
    transition: all var(--button-animation-speed) ease;
    transform-origin: center;
  }

  /* Hamburger to X animation */
  .sidebar-menu-toggle.active .hamburger-icon:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .sidebar-menu-toggle.active .hamburger-icon:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .sidebar-menu-toggle.active .hamburger-icon:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* Sidebar Overlay */
  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all var(--sidebar-animation-speed) ease;
  }

  .sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  /* Sidebar Menu */
  .sidebar-menu {
    position: fixed;
    top: 0;
    width: var(--sidebar-width);
    height: 100%;
    background-color: var(--sidebar-bg-color);
    color: var(--sidebar-text-color);
    z-index: 1000;
    padding: var(--sidebar-padding);
    font-family: var(--sidebar-font-family);
    font-size: var(--sidebar-font-size);
    /* visibility keeps the closed panel's links out of the Tab order;
       the delay lets the slide-out finish before it hides */
    visibility: hidden;
    transition: transform var(--sidebar-animation-speed) ease,
                visibility 0s linear var(--sidebar-animation-speed);
    overflow-y: auto;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  }

  /* Sidebar positioning based on CSS variable */
  .sidebar-menu[data-position="left"] {
    left: 0;
    transform: translateX(-100%);
    border-right: 1px solid var(--sidebar-border-color);
  }

  .sidebar-menu[data-position="right"] {
    right: 0;
    transform: translateX(100%);
    border-left: 1px solid var(--sidebar-border-color);
  }

  .sidebar-menu.active {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--sidebar-animation-speed) ease;
  }

  /* Close Button */
  .sidebar-close {
    position: absolute;
    top: 15px;
    background: none;
    border: none;
    color: var(--sidebar-text-color);
    font-size: 24px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color var(--button-animation-speed) ease;
  }

  .sidebar-close[data-position="left"] {
    right: 15px;
  }

  .sidebar-close[data-position="right"] {
    left: 15px;
  }

  .sidebar-close:hover {
    background-color: var(--sidebar-hover-color);
  }

  /* Sidebar Header */
  .sidebar-header {
    margin-top: 50px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--sidebar-border-color);
  }

  .sidebar-title {
    font-size: var(--sidebar-heading-size);
    font-weight: bold;
    margin: 0;
    color: var(--sidebar-accent-color);
  }

  /* Navigation Menu */
  .sidebar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .sidebar-nav li {
    margin-bottom: var(--menu-item-spacing);
  }

  .sidebar-nav a {
    color: var(--sidebar-text-color);
    text-decoration: none;
    display: block;
    padding: 12px 15px;
    border-radius: 8px;
    transition: all var(--button-animation-speed) ease;
    border-left: 3px solid transparent;
  }

  .sidebar-nav a:hover {
    background-color: var(--sidebar-hover-color);
    border-left-color: var(--sidebar-accent-color);
    transform: translateX(5px);
  }

  /* Contact Button */
  .sidebar-contact-btn {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--sidebar-border-color);
  }

  .contact-button {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: var(--sidebar-accent-color);
    color: white;
    text-decoration: none;
    text-align: center;
    border-radius: 8px;
    font-weight: bold;
    transition: all var(--button-animation-speed) ease;
    border: none;
    cursor: pointer;
    font-size: var(--sidebar-font-size);
  }

  .contact-button:hover {
    background-color: var(--contact-button-hover-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
  }

  /* Mobile Responsiveness */
  @media (max-width: 768px) {
    :root {
      --sidebar-width: 280px;
      --sidebar-font-size: 15px;
      --sidebar-heading-size: 18px;
      --menu-button-size: 45px;
    }
  }

  @media (max-width: 480px) {
    :root {
      --sidebar-width: 250px;
      --sidebar-font-size: 14px;
      --sidebar-heading-size: 16px;
      --menu-button-size: 40px;
      --menu-button-position-top: 15px;
      --menu-button-position-side: 15px;
    }
  }

  /* Prevent body scroll when sidebar is open (includes iOS fix) */
  body.sidebar-open {
    overflow: hidden;
    touch-action: none;
  }
</style>

<!-- Menu Toggle Button (with accessibility attributes) -->
<button class="sidebar-menu-toggle" id="sidebarToggle"
        aria-label="Open menu" aria-expanded="false" aria-controls="sidebarMenu">
  <span class="hamburger-icon" aria-hidden="true"></span>
  <span class="hamburger-icon" aria-hidden="true"></span>
  <span class="hamburger-icon" aria-hidden="true"></span>
</button>

<!-- Sidebar Overlay -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>

<!-- Sidebar Menu -->
<nav class="sidebar-menu" id="sidebarMenu" aria-hidden="true" tabindex="-1">
  <button class="sidebar-close" id="sidebarClose" aria-label="Close menu">&times;</button>

  <div class="sidebar-header">
    <h3 class="sidebar-title">Navigation</h3>
  </div>

  <ul class="sidebar-nav">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#testimonials">Testimonials</a></li>
    <li><a href="#blog">Blog</a></li>
  </ul>

  <div class="sidebar-contact-btn">
    <a href="#contact" class="contact-button">Contact Us</a>
  </div>
</nav>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Get elements
  const toggleBtn = document.getElementById('sidebarToggle');
  const closeBtn = document.getElementById('sidebarClose');
  const overlay = document.getElementById('sidebarOverlay');
  const sidebar = document.getElementById('sidebarMenu');
  const body = document.body;
  let savedScrollTop = 0;

  // Get CSS variables
  const sidebarPosition = getComputedStyle(document.documentElement)
    .getPropertyValue('--sidebar-position').trim();
  const isFloating = getComputedStyle(document.documentElement)
    .getPropertyValue('--menu-button-floating').trim() === 'true';
  const floatPosition = getComputedStyle(document.documentElement)
    .getPropertyValue('--menu-button-float-position').trim();
  const floatSide = getComputedStyle(document.documentElement)
    .getPropertyValue('--menu-button-float-side').trim();

  // Set button positioning classes
  if (isFloating) {
    toggleBtn.classList.add('floating');
    if (floatPosition === 'bottom') {
      toggleBtn.classList.add('float-bottom');
    } else {
      toggleBtn.classList.add('float-top');
    }
    if (floatSide === 'right') {
      toggleBtn.classList.add('float-right');
    } else {
      toggleBtn.classList.add('float-left');
    }
  } else {
    toggleBtn.classList.add('static');
  }

  // Set data attributes for positioning
  toggleBtn.setAttribute('data-position', sidebarPosition);
  closeBtn.setAttribute('data-position', sidebarPosition);
  sidebar.setAttribute('data-position', sidebarPosition);

  // Open sidebar function
  function openSidebar() {
    sidebar.classList.add('active');
    overlay.classList.add('active');
    toggleBtn.classList.add('active');
    body.classList.add('sidebar-open');

    // Accessibility: update ARIA states
    toggleBtn.setAttribute('aria-expanded', 'true');
    toggleBtn.setAttribute('aria-label', 'Close menu');
    sidebar.removeAttribute('aria-hidden');

    // iOS scroll-lock: use position: fixed to prevent background scroll
    savedScrollTop = window.pageYOffset || document.documentElement.scrollTop;
    body.style.position = 'fixed';
    body.style.top = '-' + savedScrollTop + 'px';
    body.style.width = '100%';

    // Focus management: move focus into sidebar
    sidebar.focus({ preventScroll: true });
  }

  // Close sidebar function
  function closeSidebar() {
    sidebar.classList.remove('active');
    overlay.classList.remove('active');
    toggleBtn.classList.remove('active');
    body.classList.remove('sidebar-open');

    // Accessibility: update ARIA states
    toggleBtn.setAttribute('aria-expanded', 'false');
    toggleBtn.setAttribute('aria-label', 'Open menu');
    sidebar.setAttribute('aria-hidden', 'true');

    // iOS scroll-lock: restore scroll position
    body.style.position = '';
    body.style.top = '';
    body.style.width = '';
    // Jump straight back even if the site uses smooth scrolling
    const html = document.documentElement;
    html.style.scrollBehavior = 'auto';
    window.scrollTo(0, savedScrollTop);
    html.style.scrollBehavior = '';

    // Focus management: return focus to toggle button
    toggleBtn.focus({ preventScroll: true });
  }

  // Tab-key focus trap inside sidebar when open
  sidebar.addEventListener('keydown', function(e) {
    if (e.key === 'Tab' && sidebar.classList.contains('active')) {
      const focusable = sidebar.querySelectorAll(
        'a[href], button, [tabindex]:not([tabindex="-1"])'
      );
      const first = focusable[0];
      const last = focusable[focusable.length - 1];

      if (e.shiftKey && (document.activeElement === first || document.activeElement === sidebar)) {
        e.preventDefault();
        last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    }
  });

  // Event listeners
  toggleBtn.addEventListener('click', function(e) {
    e.stopPropagation();
    if (sidebar.classList.contains('active')) {
      closeSidebar();
    } else {
      openSidebar();
    }
  });

  closeBtn.addEventListener('click', closeSidebar);
  overlay.addEventListener('click', closeSidebar);

  // Close sidebar when clicking on navigation links
  const navLinks = document.querySelectorAll('.sidebar-nav a, .contact-button');
  navLinks.forEach(function(link) {
    link.addEventListener('click', function() {
      closeSidebar();
    });
  });

  // Close sidebar on Escape key
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && sidebar.classList.contains('active')) {
      closeSidebar();
    }
  });

  // Handle window resize
  window.addEventListener('resize', function() {
    if (window.innerWidth > 768 && sidebar.classList.contains('active')) {
      closeSidebar();
    }
  });
});
</script>
```

<Notice type="warning" title="Si tu sitio publicado aparece en blanco">
Un error de sintaxis de JavaScript romperá todo el sitio de Carrd. Si publicas y ves una página en blanco, abre las DevTools del navegador (F12), revisa la Consola en busca de errores, corrige la sintaxis y republica. La documentación de Carrd advierte que «incluso un simple error de sintaxis romperá el sitio».
</Notice>

### Personaliza con variables CSS

Todos los ajustes visuales se controlan mediante custom properties CSS en la parte superior del bloque `<style>`. Cámbialos para que coincidan con la imagen de marca de tu sitio.

<Accordion label="Referencia de variables CSS" group="variables">

| Variable | Valor por defecto | Qué controla |
|---|---|---|
| `--sidebar-position` | `left` | Desde qué lado se abre el menú lateral (`left` o `right`) |
| `--sidebar-width` | `300px` | Ancho del panel lateral |
| `--sidebar-bg-color` | `rgba(25, 25, 25, 0.95)` | Fondo del menú lateral (admite transparencia) |
| `--sidebar-text-color` | `#ffffff` | Color del texto dentro del menú lateral |
| `--sidebar-border-color` | `#444` | Color de borde para los divisores |
| `--sidebar-hover-color` | `rgba(255, 255, 255, 0.1)` | Fondo al pasar el cursor sobre los elementos del menú |
| `--sidebar-accent-color` | `#007bff` | Color de acento (resaltados, botón de contacto) |
| `--contact-button-hover-color` | `#0056b3` | Estado hover del botón de contacto |
| `--menu-button-bg` | `rgba(0, 123, 255, 0.9)` | Fondo del botón de hamburguesa |
| `--menu-button-color` | `#ffffff` | Color del icono de hamburguesa |
| `--menu-button-size` | `50px` | Diámetro del botón de hamburguesa |
| `--menu-button-floating` | `true` | `true` = posición fija; `false` = relativa a la ubicación del embed |
| `--menu-button-float-position` | `top` | Flotar a `top` o `bottom` (solo en modo flotante) |
| `--menu-button-float-side` | `left` | Flotar a `left` o `right` (solo en modo flotante) |
| `--menu-button-position-top` | `20px` | Distancia desde el borde superior/inferior |
| `--menu-button-position-side` | `20px` | Distancia desde el borde izquierdo/derecho |
| `--sidebar-animation-speed` | `0.3s` | Velocidad de la transición de entrada/salida |
| `--button-animation-speed` | `0.2s` | Velocidad de las animaciones hover y de transformación |
| `--sidebar-font-family` | `inherit` | Familia tipográfica del texto del menú lateral |
| `--sidebar-font-size` | `16px` | Tamaño de fuente base |
| `--sidebar-heading-size` | `20px` | Tamaño de fuente del título del menú lateral |
| `--sidebar-padding` | `20px` | Padding interior del menú lateral |
| `--menu-item-spacing` | `15px` | Espaciado vertical entre elementos del menú |

Puedes usar [https://rgbacolorpicker.com/](https://rgbacolorpicker.com/) para elegir colores con transparencia.

</Accordion>

### Opciones de posicionamiento del botón: flotante vs estático

**Modo flotante** (`--menu-button-floating: true`): el botón de hamburguesa usa `position: fixed` y permanece visible mientras el visitante hace scroll. Controlas en qué esquina se sitúa con `--menu-button-float-position` y `--menu-button-float-side`.

**Modo estático** (`--menu-button-floating: false`): el botón se posiciona en relación con el lugar de la página donde está el elemento Embed.

<Notice type="warning" title="El modo estático requiere un embed Inline">
Si configuras `--menu-button-floating: false`, el botón solo se integra en tu layout cuando el elemento Embed usa **Style: Inline** (no Hidden). Un embed Hidden, Body End coloca el código después de todo el contenido de Carrd, así que un botón estático acabaría al final de la página. Además, un embed Inline solo se muestra en la sección donde lo colocas. Para la mayoría de configuraciones, mantén el modo flotante activado y usa el embed Hidden, Body End.
</Notice>

### 3. Haz que los enlaces del menú apunten a la sección correcta

Este es el paso que la mayoría de la gente pasa por alto. Los enlaces de tu menú lateral usan hashes de anclaje (`#about`, `#services`, etc.), pero solo funcionan si tu sitio Carrd tiene nombres de sección coincidentes.

<Notice type="info" title="Los nombres de sección deben coincidir con tus valores href">
En el editor de Carrd, añade un elemento **Control** (haz clic en `+`) y selecciona **Section Break**. Dale un nombre que coincida con tu enlace. Por ejemplo, llámalo `about` para el enlace `#about`. Los nombres de sección deben ser **solo letras minúsculas, números y guiones** (sin espacios, sin mayúsculas).
</Notice>

Así funcionan las secciones y los anclajes en Carrd:

1. **Los Section Breaks crean secciones con nombre.** Añade uno vía `+` → Control → Section Break. El nombre se convierte en el destino del anclaje.
2. **La primera sección se llama `home` automáticamente.** Por eso `#home` funciona directamente en la mayoría de sitios Carrd.
3. **Los sitios de una sola sección** pueden usar **Scroll Points** en su lugar. Inserta un control Scroll Point y enlázalo con `#nombre-del-scroll-point`.
4. **Los enlaces profundos funcionan.** Comparte `tusitio.carrd.co/#services` y aterrizará en la sección correcta.
5. **Si los enlaces no saltan**, comprueba que los nombres de los Section Breaks en el editor coinciden exactamente con tus valores `href`. Una errata o una mayúscula romperá el enlace silenciosamente.

Para el comportamiento de desplazamiento suave al hacer clic en enlaces de anclaje, consulta el [tutorial de desplazamiento suave y enlaces de anclaje en Carrd](https://www.bitdoze.com/es/desplazamiento-suave-carrd/).

### 4. Personaliza los elementos del menú

Edita el bloque `<ul class="sidebar-nav">` para que coincida con las secciones de tu sitio:

```html
<ul class="sidebar-nav">
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#services">Services</a></li>
  <li><a href="#portfolio">Portfolio</a></li>
  <li><a href="#testimonials">Testimonials</a></li>
  <li><a href="#blog">Blog</a></li>
</ul>
```

Añade o elimina entradas `<li><a href="#section">Nombre de la sección</a></li>`. Cada `href` debe apuntar a un nombre de Section Break real en tu sitio Carrd.

### 5. Personaliza el botón de contacto

El botón de contacto en la parte inferior del menú lateral:

```html
<a href="#contact" class="contact-button">Contact Us</a>
```

Cambia el `href` a cualquier URL (anclaje interno o enlace externo) y actualiza el texto del botón según tus necesidades.

<Button link="https://go.bitdoze.com/carrd" text="Prueba Carrd.co" variant="solid" color="blue" size="md" />

## Características principales

### Optimización para móvil

El menú lateral es totalmente responsive con breakpoints en 768px y 480px. En pantallas más pequeñas, el menú lateral se estrecha, los tamaños de fuente disminuyen y el botón se encoge, pero se mantiene por encima de 40px para los objetivos táctiles.

- Tamaños de botón táctiles (mínimo 40px en el breakpoint más pequeño)
- Espaciado optimizado para pantallas móviles
- Scroll interno en viewports bajos (el menú lateral usa `overflow-y: auto`)

<Notice type="warning" title="Bloqueo de scroll en iOS Safari">
`overflow: hidden` por sí solo no evita el scroll del fondo en iOS Safari. Es un bug conocido de WebKit abierto desde 2014. El código de arriba usa `position: fixed` en el elemento body como solución alternativa, además de `touch-action: none` en la clase `body.sidebar-open`, que cubre la mayoría de los casos. Nota: iOS 26 tiene una regresión reportada con el bloqueo de scroll en overlays. Prueba en un dispositivo físico.
</Notice>

### Animaciones suaves

El menú lateral incluye varios efectos de animación:

- Transiciones de entrada/salida (velocidad configurable vía `--sidebar-animation-speed`)
- Transformación del icono de hamburguesa en una X cuando el menú está abierto
- Efectos hover en los elementos del menú con un resaltado de borde izquierdo de acento
- Efectos de escala y sombra del botón al pasar el cursor

### Accesibilidad

El código incluye atributos ARIA apropiados y soporte de teclado:

- El **botón de alternancia** tiene `aria-label` (alterna entre "Open menu" / "Close menu"), `aria-expanded` y `aria-controls`
- El **menú lateral** usa `aria-hidden="true"` cuando está cerrado, y se elimina cuando está abierto
- Los **spans de la hamburguesa** están marcados con `aria-hidden="true"` (decorativos, no se anuncian)
- El **botón de cierre** tiene `aria-label="Close menu"`
- La **trampa de foco con Tab** mantiene el foco dentro del menú lateral mientras está abierto
- **Retorno del foco:** al cerrar el menú lateral, el foco vuelve al botón de alternancia
- La **tecla Escape** cierra el menú lateral
- Opciones de color de **alto contraste** mediante variables CSS

### Compatibilidad entre navegadores

El código usa funciones CSS modernas (custom properties, flexbox, transiciones) soportadas por todos los navegadores actuales. Si el menú lateral aparece detrás de otros elementos de Carrd, sube los valores de z-index: `.sidebar-overlay` (999 por defecto), `.sidebar-menu` (1000 por defecto), `.sidebar-menu-toggle` (1001 por defecto).

## Verifica tu menú lateral (checklist post-publicación)

Tras publicar, recorre esta checklist para confirmar que todo funciona:

<ListCheck>
<ul>
<li>Botón de alternancia visible y flotando en la posición esperada</li>
<li>Clic en el botón → el menú lateral se desliza, aparece el overlay</li>
<li>Clic en el overlay → el menú lateral se cierra</li>
<li>Pulsar Escape → el menú lateral se cierra</li>
<li>Clic en un enlace de navegación → el menú lateral se cierra Y la página se desplaza a la sección correcta</li>
<li>Prueba de enlace profundo: abre tusitio.carrd.co/#services en una pestaña nueva → aterriza en la sección correcta</li>
<li>Móvil: el objetivo táctil del botón es de al menos 40px, el menú lateral hace scroll internamente en viewports bajos</li>
<li>iOS Safari: el fondo de la página NO hace scroll mientras el menú lateral está abierto</li>
<li>Lector de pantalla: el botón anuncia "Open menu" / "Close menu"</li>
</ul>
</ListCheck>

## Solución de problemas

<Accordion label="Mi sitio publicado aparece en blanco" group="troubleshooting">

Un error de sintaxis de JavaScript romperá todo el sitio de Carrd. Abre las DevTools del navegador (F12), revisa la Consola en busca de errores, corrige la sintaxis en tu elemento Embed y republica. La documentación de Carrd afirma que «incluso un simple error de sintaxis romperá el sitio».

</Accordion>

<Accordion label="El botón del menú no aparece" group="troubleshooting">

Probablemente estás usando el modo estático (`--menu-button-floating: false`) con un embed Hidden. Los botones estáticos solo se integran en tu layout desde embeds **Inline**; desde un embed Hidden, Body End el botón acaba al final de la página. Cambia al modo flotante (`--menu-button-floating: true`) o cambia el estilo del embed a Inline.

</Accordion>

<Accordion label="Los enlaces del menú lateral no saltan a las secciones" group="troubleshooting">

Los nombres de tus Section Breaks no coinciden con tus valores `href`. En el editor de Carrd, revisa el nombre de cada Section Break. Debe contener solo letras minúsculas, números y guiones. Por ejemplo, si tu enlace es `#about`, la sección debe llamarse exactamente `about` (no `About`, ni `about-us` a menos que la sección se llame `about-us`). Consulta el [paso de anclajes](#3-haz-que-los-enlaces-del-menú-apunten-a-la-sección-correcta) de arriba.

</Accordion>

<Accordion label="El menú lateral aparece detrás de otros elementos" group="troubleshooting">

Conflicto de z-index. El menú lateral usa z-index 1000, el overlay usa 999 y el botón usa 1001. Si elementos de Carrd u otros embeds tienen valores de z-index más altos, sube estos números en el CSS. El overlay debe estar siempre por debajo del menú lateral, y el botón siempre encima.

</Accordion>

<Accordion label="El fondo hace scroll en iPhone" group="troubleshooting">

Es el bug de WebKit en iOS Safari. `overflow: hidden` en `<body>` no evita el scroll. El código usa `position: fixed` en el body más `touch-action: none` en `body.sidebar-open` como solución alternativa. Si aún así hace scroll, comprueba que ambos sigan en tu copia del código. Prueba en un iPhone físico, no solo en el simulador.

</Accordion>

<Accordion label="Los cambios no aparecen tras guardar" group="troubleshooting">

Los elementos Embed no se renderizan en la vista previa del editor de Carrd. Debes publicar el sitio para ver los cambios. Tras publicar, haz una recarga forzada con Ctrl+Shift+R (Cmd+Shift+R en Mac) para saltarte la caché del navegador.

</Accordion>

## Alternativas: opciones sin código y plugins

Si no quieres pegar código personalizado, o estás en un plan sin Embeds, hay otras formas de añadir navegación a un sitio Carrd:

<Accordion label="Barra de navegación móvil responsive en Carrd (sin código)" group="alternatives">

La guía de la [barra de navegación móvil responsive en Carrd](https://www.bitdoze.com/carrd-mobile-navbar/) cubre 3 métodos para añadir navegación a Carrd, incluido un enfoque nativo sin código que funciona sin Embeds. Buen punto de partida si estás en Pro Lite o en el plan gratuito.

</Accordion>

<Accordion label="Menú flotante de Carrd" group="alternatives">

Un [menú de hamburguesa flotante para Carrd](https://www.bitdoze.com/carrd-floating-menu/). Concepto similar pero con un estilo visual diferente. Merece la pena compararlo si quieres un botón de acción flotante compacto en lugar de un panel lateral completo.

</Accordion>

<Accordion label="Plugins de pago para Carrd" group="alternatives">

Los marketplaces de plugins de terceros como [plugins.carrd.co](https://plugins.carrd.co/) venden barras de navegación responsive y mega navbars (rango de 15-30 $). Normalmente requieren Pro Standard o superior, ya que usan Embeds internamente.

</Accordion>

<Accordion label="Recursos de la comunidad" group="alternatives">

- [stack.carrd.co](https://stack.carrd.co/) — snippets de CSS y componentes de la comunidad
- [carrdme.com](https://carrdme.com/) — directorio de plantillas y plugins para Carrd

</Accordion>

## Conclusión

Un menú lateral en Carrd le da a tu sitio de una página una navegación profesional sin sacrificar espacio para el contenido. El enfoque requiere Carrd Pro Standard (19 $/año) como mínimo: un elemento Embed, un pegado de código, y listo.

Las variables CSS facilitan adaptarlo a tu imagen de marca, los atributos ARIA lo mantienen accesible y los breakpoints móviles se encargan de las pantallas pequeñas. Guarda una copia del código en un lugar seguro: como se ejecuta en cada sección del sitio, un error de sintaxis puede dejar todo el sitio caído hasta que lo corrijas y republiques.

Si quieres explorar más personalización de Carrd, consulta la [reseña de Carrd.co](https://www.bitdoze.com/carrd-review/) para un desglose completo de lo que ofrece cada plan, o navega por [carrdme.com](https://carrdme.com/) para ver la lista completa de plugins y tutoriales.