{"success":true,"data":{"block":{"id":"navbar-dropdown-menu","name":"Navbar Dropdown Menu","title":"NavBar Dropdown Menu","category":"Navbar","categorySlug":"navbar","description":"A responsive navigation bar with dropdown menus for desktop and a slide-out sheet menu for mobile. Features logo, navigation links with dropdown submenus containing icons and descriptions, and call-to-action buttons. The desktop view shows horizontal navigation with hover-triggered dropdowns, while mobile uses a hamburger menu that opens a full sheet with accordion-style navigation. Ideal for marketing sites, SaaS applications, and corporate websites that need organized multi-level navigation.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290150/uvtfdxd1a01up72dfcwc3i7ju1uc/navbar-dropdown-menu-desktop.png","mobile":"https://cdn.ing/assets/i/r/290151/dikrnuxap3x28ziukbb1rljc4o5b/navbar-dropdown-menu-mobile.png"},"componentPath":"blocks/navbars/navbar-dropdown-menu.tsx","code":"import { NavbarDropdownMenu } from \"@opensite/ui/blocks/navbars/navbar-dropdown-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      <NavbarDropdownMenu\n      logo={{\n        url: \"/\",\n        src: brandLogoPlaceholders.black[0],\n        title: \"SaaS Platform\",\n        alt: \"SaaS Platform Logo\",\n      }}\n      menu={[\n        {\n          title: \"Features\",\n          url: \"#\",\n          items: [\n            {\n              title: \"Analytics Dashboard\",\n              url: \"#\",\n              description: \"Visualize your business data\",\n              icon: \"lucide/pie-chart\",\n            },\n            {\n              title: \"Team Collaboration\",\n              url: \"#\",\n              description: \"Work together seamlessly\",\n              icon: \"lucide/users-2\",\n            },\n            {\n              title: \"Automation Tools\",\n              url: \"#\",\n              description: \"Automate repetitive tasks\",\n              icon: \"lucide/zap\",\n            },\n            {\n              title: \"Integrations\",\n              url: \"#\",\n              description: \"Connect your favorite apps\",\n              icon: \"lucide/plug\",\n            },\n          ],\n        },\n        {\n          title: \"Solutions\",\n          url: \"#\",\n          items: [\n            {\n              title: \"For Marketing Teams\",\n              url: \"#\",\n              description: \"Grow your brand presence\",\n              icon: \"lucide/target\",\n            },\n            {\n              title: \"For Sales Teams\",\n              url: \"#\",\n              description: \"Close more deals faster\",\n              icon: \"lucide/trending-up\",\n            },\n            {\n              title: \"For Support Teams\",\n              url: \"#\",\n              description: \"Deliver excellent support\",\n              icon: \"lucide/headphones\",\n            },\n          ],\n        },\n        {\n          title: \"Resources\",\n          url: \"#\",\n        },\n        {\n          title: \"Pricing\",\n          url: \"#\",\n        },\n      ]}\n      authActions={[\n        {\n          label: \"Login\",\n          variant: \"ghost\",\n          href: \"#\",\n        },\n        {\n          label: \"Start Free Trial\",\n          variant: \"default\",\n          href: \"#\",\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":true,"mediaHints":{"path":"logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":true,"note":"Brand logo displayed in the navbar. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"menu":{"type":"array","description":"Navigation menu items","items":{"type":"object","description":"","fields":{"label":{"type":"string","description":"","required":true},"href":{"type":"string","description":"","required":true}},"typeLabel":"MenuItem"},"typeLabel":"MenuItem[]","required":true,"minItems":2,"maxItems":7},"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,"minItems":0,"maxItems":3}},"exampleProps":{"logo":{"url":"/","src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","title":"SaaS Platform","alt":"SaaS Platform Logo"},"menu":[{"title":"Features","url":"#","items":[{"title":"Analytics Dashboard","url":"#","description":"Visualize your business data","icon":"lucide/pie-chart"},{"title":"Team Collaboration","url":"#","description":"Work together seamlessly","icon":"lucide/users-2"}]},{"title":"Pricing","url":"#"},{"title":"Resources","url":"#"}],"authActions":[{"label":"Login","variant":"ghost","href":"#"},{"label":"Start Free Trial","variant":"default","href":"#"}]},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","header","dropdown","menu","responsive","mobile-menu","sheet","accordion","cta-buttons"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. The 'menu' prop accepts nested items via the 'items' array on each MenuItem. description title The 'authActions' array renders CTA buttons on the right side; use variant 'ghost' for secondary and 'default' for primary.","usageRequirements":{"requiredProps":["logo","menu"],"mediaSlots":{"logo":{"path":"logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":true,"note":"Brand logo displayed in the navbar. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"propConstraints":{"menu":{"minItems":2,"maxItems":7},"authActions":{"minItems":0,"maxItems":3}}}}},"timestamp":"2026-06-27T20:14:25.060Z"}