{"success":true,"data":{"block":{"id":"navbar-centered-menu","name":"Navbar Centered Menu","title":"NavBar Centered Menu","category":"Navbar","categorySlug":"navbar","description":"A navigation bar with centered navigation links and dropdown menus that appear directly below each trigger. Features logo on the left, centered navigation with dropdowns, and CTA buttons on the right. Uses a custom NavigationMenu implementation that centers dropdown content below each menu item rather than spanning the full width. Mobile view uses a sheet with accordion navigation. Perfect for brands that want a balanced, symmetrical header layout.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290152/r1rsnx5tjtc304cyf3dngmfsqdyh/navbar-centered-menu-desktop.png","mobile":"https://cdn.ing/assets/i/r/290153/qkha1sruf9hd9z99x0u9rlvvl24t/navbar-centered-menu-mobile.png"},"componentPath":"blocks/navbars/navbar-centered-menu.tsx","code":"import { NavbarCenteredMenu } from \"@opensite/ui/blocks/navbars/navbar-centered-menu\";\nimport { brandLogoPlaceholders } from \"@/lib/media\";\nimport CarouselAnimatedSections from \"@/blocks/carousel/carousel-animated-sections\";\nimport FeatureShowcase from \"@/blocks/features/feature-showcase\";\nimport FaqSplitHelp from \"@/blocks/faq/faq-split-help\";\n\nexport default function Demo() {\n  return (\n    <>\n      <NavbarCenteredMenu\n        logo={{\n          url: \"/\",\n          src: brandLogoPlaceholders.black[0],\n          title: \"Company\",\n          alt: \"Company Logo\",\n        }}\n        menu={[\n          {\n            title: \"Products\",\n            url: \"#\",\n            items: [\n              {\n                title: \"Analytics\",\n                url: \"#\",\n                description: \"Track your business metrics\",\n                icon: \"lucide/bar-chart\",\n              },\n              {\n                title: \"Marketing\",\n                url: \"#\",\n                description: \"Grow your audience\",\n                icon: \"lucide/megaphone\",\n              },\n              {\n                title: \"Sales CRM\",\n                url: \"#\",\n                description: \"Manage customer relationships\",\n                icon: \"lucide/users\",\n              },\n            ],\n          },\n          {\n            title: \"Solutions\",\n            url: \"#\",\n            items: [\n              {\n                title: \"Enterprise\",\n                url: \"#\",\n                description: \"For large organizations\",\n                icon: \"lucide/building\",\n              },\n              {\n                title: \"Small Business\",\n                url: \"#\",\n                description: \"For growing companies\",\n                icon: \"lucide/briefcase\",\n              },\n            ],\n          },\n          {\n            title: \"Resources\",\n            url: \"#\",\n          },\n          {\n            title: \"Pricing\",\n            url: \"#\",\n          },\n        ]}\n        authActions={[\n          {\n            label: \"Sign Up\",\n            variant: \"outline\",\n            href: \"#\",\n            asButton: true,\n            size: \"sm\",\n          },\n        ]}\n      />\n\n      <CarouselAnimatedSections />\n      <FeatureShowcase />\n      <FaqSplitHelp />\n    </>\n  );\n}","propsSchema":{"logo":{"type":"object","description":"Logo configuration","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"menu":{"type":"array","description":"Navigation menu items","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":false},"tabs":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":true},"title":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false},"links":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":false},"url":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false}},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }"},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }[]","required":true},"featured":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":true},"image":{"type":"string","description":"","required":true}},"typeLabel":"{ title: string; description: string; url: string; image: string; }","required":false}},"typeLabel":"TabItem"},"typeLabel":"TabItem[]","required":false}},"typeLabel":"MenuItem"},"typeLabel":"MenuItem[]","required":false},"authActions":{"type":"array","description":"Authentication action configurations","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","header","centered","dropdown","balanced","symmetrical","responsive","mobile-menu"],"performance":{},"importantUsageNotes":"Use this navbar when the site has a clean, symmetrical layout with the logo on the left, 4 centered top-level 'menu' items, and a single auth action on the right — typical for SaaS marketing pages or professional product sites that want a balanced, editorial look. The demo uses exactly 4 menu items: 2 have dropdown 'items' arrays (with icon-linked sub-items), and 2 are flat href-only links — do not add more than 4-5 top-level items or the centered layout will break. Items with dropdowns support 'icon' (lucide icon name), 'title', 'url', and optional 'description' per sub-item; use 2-4 sub-items per dropdown. Only set 'logo.src' if a real brand logo exists in the media library; otherwise omit 'logo.src' and rely on 'logo.title' as plain text. The 'authActions' prop drives the right-side buttons — if you supply multiple entries, use a variant of 'default' for the first and 'outline' for the second. Only use real internal route hrefs and important external URLs — do not invent or guess routes. The mobile menu is built into this block — do not strip it or override its behavior; preserve the demo's mobile structure. Follow the example props closely for this block — the demo encodes the canonical layout, and deviating from it will produce broken or unusable navigation."}},"timestamp":"2026-05-13T10:43:39.800Z"}