{ "name": "navbar", "title": { "es": "Barra de navegación", "en": "Navigation bar" }, "summary": { "es": "Cabecera con logo, enlaces y acciones. En móvil, los enlaces van a un menú.", "en": "Header with logo, links and actions. On mobile, links move into a menu." }, "category": "navigation", "status": "stable", "nivel": "globales", "updated": "2026-09-29", "license": "MIT", "page": "https://componentes-lovat.vercel.app/c/navbar/", "requires": [ "button" ], "files": [ { "type": "html", "url": "https://componentes-lovat.vercel.app/raw/navbar/navbar.html", "content": "
\n
\n
\n \n
\n \n \n
\n
\n
\n Entrar\n Empezar\n
\n
\n \n
\n" }, { "type": "css", "url": "https://componentes-lovat.vercel.app/raw/navbar/navbar.css", "content": "/* navbar · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).\n Generado por tools/build_css.py desde navbar.tw.json. No editar a mano. Necesita tokens.css. */\n.c-navbar__inner{display:flex}\n.c-navbar__start{display:flex}\n.c-navbar__main{display:flex}\n.c-navbar__list{display:flex}\n.c-navbar__link{display:flex}\n.c-navbar__end{display:flex}\n.c-navbar__mobile-link{display:flex;width:100%}\n.c-navbar__list{flex:1}\n.c-navbar__link{flex-direction:column}\n.c-navbar__mobile-link{flex-direction:column}\n.c-navbar__inner{align-items:center}\n.c-navbar__start{align-items:center}\n.c-navbar__main{align-items:center}\n.c-navbar__list{align-items:center}\n.c-navbar__end{align-items:center}\n.c-navbar__inner{justify-content:space-between}\n.c-navbar__list{justify-content:center}\n.c-navbar__link{gap:calc(var(--spacing)*1)}\n.c-navbar__mobile-link{gap:calc(var(--spacing)*1)}\n.c-navbar__start{gap:calc(var(--spacing)*2)}\n.c-navbar__list{gap:calc(var(--spacing)*2)}\n.c-navbar__end{gap:calc(var(--spacing)*2)}\n.c-navbar__inner{gap:calc(var(--spacing)*4)}\n.c-navbar__main{gap:calc(var(--spacing)*6)}\n.c-navbar__mobile{border-radius:calc(var(--radius) - 2px)}\n.c-navbar__link{border-radius:calc(var(--radius) - 4px)}\n.c-navbar__mobile-link{border-radius:calc(var(--radius) - 4px)}\n.c-navbar__mobile{border-style:var(--tw-border-style);border-width:1px}\n.c-navbar{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}\n.c-navbar__mobile{background-color:var(--popover);padding:calc(var(--spacing)*1)}\n.c-navbar__link{padding:calc(var(--spacing)*2)}\n.c-navbar__mobile-link{padding:calc(var(--spacing)*2)}\n.c-navbar{padding-inline:calc(var(--spacing)*4)}\n.c-navbar__link{padding-block:calc(var(--spacing)*1.5)}\n.c-navbar__mobile-link{padding-block:calc(var(--spacing)*1.5)}\n.c-navbar__link{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}\n.c-navbar__mobile-link{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}\n.c-navbar__link{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--muted-foreground)}\n.c-navbar__mobile{color:var(--popover-foreground)}\n.c-navbar__logo{color:var(--primary)}\n.c-navbar__link{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}\n.c-navbar__mobile-link{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}\n.c-navbar__link{--tw-outline-style:none;outline-style:none}\n.c-navbar__mobile-link{--tw-outline-style:none;outline-style:none}\n@media (hover:hover){\n.c-navbar__link:hover{background-color:var(--accent)}\n.c-navbar__mobile-link:hover{background-color:var(--accent)}\n}\n.c-navbar__link:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}\n.c-navbar__mobile-link:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}\n@media not all and (min-width:48rem){\n.c-navbar__list{display:none}\n}\n/* propio */\n.c-navbar{background:var(--background);width:100%}\n.c-navbar__logo{display:inline-flex}\n.c-navbar__logo svg{width:32px;height:32px}\n.c-navbar__link:focus-visible,.c-navbar__mobile-link:focus-visible{--tw-ring-color:color-mix(in oklab,var(--ring)50%,transparent);box-shadow:0 0 0 3px var(--tw-ring-color)}\n.c-navbar__mobile{position:fixed;margin:0;inset:auto;opacity:0;scale:.95;transform-origin:top left;transition:opacity .15s,scale .15s,overlay .15s allow-discrete,display .15s allow-discrete}\n.c-navbar__mobile:popover-open{opacity:1;scale:1}\n@starting-style{.c-navbar__mobile:popover-open{opacity:0;scale:.95}}\n.c-navbar__mobile ul{display:grid;list-style:none;margin:0;padding:0}\n.c-navbar__burger path{transform-origin:center;transition:transform .3s cubic-bezier(.5,.85,.25,1.1)}\n.c-navbar__burger path:nth-child(1){transform:translateY(-7px)}\n.c-navbar__burger path:nth-child(3){transform:translateY(7px)}\n.c-navbar__toggle[aria-expanded=true] .c-navbar__burger path:nth-child(1){transform:rotate(315deg)}\n.c-navbar__toggle[aria-expanded=true] .c-navbar__burger path:nth-child(2){transform:rotate(45deg)}\n.c-navbar__toggle[aria-expanded=true] .c-navbar__burger path:nth-child(3){transform:rotate(135deg)}\n.c-navbar .c-btn{font-size:var(--text-sm)}\n@media (width >= 48rem){.c-navbar__mobile{display:none!important}}\n.c-navbar__inner{height:calc(var(--spacing)*16)}\n.c-navbar__list{list-style:none}\n.c-navbar__logo:hover{color:color-mix(in oklab,var(--primary)90%,transparent)}\n.c-navbar__link:hover{color:var(--primary)}\n.c-navbar__link[aria-current=page],.c-navbar__mobile-link[aria-current=page]{background-color:var(--accent);color:var(--accent-foreground)}\n.c-navbar__mobile{width:calc(var(--spacing)*36);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}\n@media (width >= 48rem){.c-navbar{padding-inline:calc(var(--spacing)*6)}.c-navbar__toggle{display:none}}\n" }, { "type": "js", "url": "https://componentes-lovat.vercel.app/raw/navbar/navbar.js", "content": "/* Barra de navegación: en móvil, el botón abre el menú (popover nativo) debajo de él. */\n(function () {\n const C = (window.Componentes = window.Componentes || {});\n function setup(btn) {\n const pop = document.getElementById(btn.getAttribute('aria-controls'));\n if (!pop || !pop.showPopover) return;\n const place = () => { const r = btn.getBoundingClientRect(); pop.style.top = r.bottom + 6 + 'px'; pop.style.left = Math.max(8, r.left) + 'px'; };\n btn.addEventListener('click', () => { if (pop.matches(':popover-open')) pop.hidePopover(); else { pop.showPopover(); place(); pop.querySelector('a')?.focus(); } });\n pop.addEventListener('toggle', (e) => { btn.setAttribute('aria-expanded', String(e.newState === 'open')); if (e.newState === 'closed' && pop.contains(document.activeElement)) btn.focus(); });\n pop.addEventListener('click', (e) => { if (e.target.closest('a')) pop.hidePopover(); });\n }\n function init(root) {\n (root || document).querySelectorAll('[data-c-navbar]:not([data-c-ready])').forEach((b) => { b.dataset.cReady = ''; try { setup(b); } catch (e) { console.warn('[navbar]', e); } });\n }\n C.navbar = { init };\n if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => init()); else init();\n})();\n" }, { "type": "standalone", "url": "https://componentes-lovat.vercel.app/r/navbar.html" } ], "tokensFile": "https://componentes-lovat.vercel.app/tokens.css", "darkTheme": "add class 'dark' to ", "contexto": "ambos", "densidad": "media", "tono": "sobria", "states": [ "rest", "hover", "focus", "current", "open" ], "use": { "es": [ "Como cabecera de cualquier sitio." ], "en": [ "As the header of any site." ] }, "avoid": { "es": [ "Con más de 6 enlaces: agrupa o usa una barra lateral." ], "en": [ "With more than 6 links: group them or use a sidebar." ] }, "a11y": { "roles": [ "navigation", "link", "button" ], "keyboard": [ { "keys": "Tab", "es": "Recorre enlaces y botones", "en": "Moves through links and buttons" }, { "keys": "Esc", "es": "Cierra el menú móvil", "en": "Closes the mobile menu" } ], "notes": { "es": [ "