{"success":true,"data":{"category":{"slug":"navbar","name":"Navbar","description":"Collection of navbar components"},"blocks":[{"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}}}},{"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":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":6},"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":"Company","alt":"Company Logo"},"menu":[{"title":"Products","url":"#","items":[{"title":"Analytics","url":"#","description":"Track your business metrics","icon":"lucide/bar-chart"},{"title":"Sales CRM","url":"#","description":"Manage customer relationships","icon":"lucide/users"}]},{"title":"Resources","url":"#"},{"title":"Pricing","url":"#"}],"authActions":[{"label":"Sign Up","variant":"outline","href":"#","asButton":true,"size":"sm"}]},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","header","centered","dropdown","balanced","symmetrical","responsive","mobile-menu"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Menu items use 'title'/'url' and support nested 'items' with icon and description. The 'authActions' array renders on the right side of the navbar. Use 'variant: 'outline'' for secondary CTA and 'variant: '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":6},"authActions":{"minItems":0,"maxItems":3}}}},{"id":"navbar-mega-menu","name":"Navbar Mega Menu","title":"NavBar Mega Menu","category":"Navbar","categorySlug":"navbar","description":"A comprehensive navigation bar with multiple mega-menu panels for complex site structures. Features distinct mega-menu styles for Platform (with product features), Use Cases (with industry solutions), Developers (with documentation and resources), and Resources (with company info). Each mega-menu panel spans the full viewport width with organized content sections, featured cards, and quick links. Mobile view uses a multi-level navigation with back buttons for drilling into sections. Ideal for enterprise SaaS, developer platforms, and large-scale websites with extensive navigation needs.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290154/csiof180mle57yg0770kl1w6u5k1/navbar-mega-menu-desktop.png","mobile":"https://cdn.ing/assets/i/r/290155/tr5ug2c77hvy6jyt2lmogzgjnyue/navbar-mega-menu-mobile.png"},"componentPath":"blocks/navbars/navbar-mega-menu.tsx","code":"import { NavbarMegaMenu } from \"@opensite/ui/blocks/navbars/navbar-mega-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      <NavbarMegaMenu\n        logo={{\n          url: \"/\",\n          src: brandLogoPlaceholders.black[0],\n          title: \"MegaCorp\",\n          alt: \"MegaCorp Logo\",\n        }}\n        menuLinks={[\n          {\n            label: \"Products\",\n            dropdownGroups: [\n              {\n                label: \"Core Products\",\n                links: [\n                  {\n                    label: \"Platform\",\n                    description: \"All-in-one business platform\",\n                    url: \"#\",\n                    iconName: \"lucide/layout-grid\",\n                  },\n                  {\n                    label: \"Analytics\",\n                    description: \"Advanced business analytics\",\n                    url: \"#\",\n                    iconName: \"lucide/trending-up\",\n                  },\n                ],\n              },\n              {\n                label: \"Add-ons\",\n                links: [\n                  {\n                    label: \"Integrations\",\n                    description: \"Connect your tools\",\n                    url: \"#\",\n                    iconName: \"lucide/puzzle\",\n                  },\n                  {\n                    label: \"Extensions\",\n                    description: \"Extend functionality\",\n                    url: \"#\",\n                    iconName: \"lucide/blocks\",\n                  },\n                ],\n              },\n            ],\n          },\n          {\n            label: \"Solutions\",\n            dropdownGroups: [\n              {\n                label: \"By Industry\",\n                links: [\n                  {\n                    label: \"E-commerce\",\n                    description: \"For online retailers\",\n                    url: \"#\",\n                    iconName: \"lucide/shopping-bag\",\n                  },\n                  {\n                    label: \"Healthcare\",\n                    description: \"For medical practices\",\n                    url: \"#\",\n                    iconName: \"lucide/heart-pulse\",\n                  },\n                ],\n              },\n              {\n                label: \"By Size\",\n                links: [\n                  {\n                    label: \"Startups\",\n                    description: \"For early-stage companies\",\n                    url: \"#\",\n                    iconName: \"lucide/rocket\",\n                  },\n                  {\n                    label: \"Enterprise\",\n                    description: \"For large organizations\",\n                    url: \"#\",\n                    iconName: \"lucide/building-2\",\n                  },\n                ],\n              },\n            ],\n          },\n          {\n            label: \"Resources\",\n            href: \"#\",\n          },\n          {\n            label: \"Pricing\",\n            href: \"#\",\n          },\n        ]}\n        actions={[\n          {\n            label: \"Get Started\",\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. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"menuLinks":{"type":"array","description":"Navigation menu links with optional dropdown groups","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"Display text for the menu trigger","typeLabel":"React.ReactNode","required":true},"href":{"type":"string","description":"Direct link URL (for non-dropdown items)","required":false},"layout":{"type":"string","description":"Layout type for dropdown content","typeLabel":"MegaMenuLayout","required":false},"links":{"type":"array","description":"Links array for dropdown content","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"Display text for the link","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"Optional description text","typeLabel":"React.ReactNode","required":false},"href":{"type":"string","description":"URL the link navigates to (preferred)","required":false},"url":{"type":"string","description":"URL the link navigates to (legacy, use href instead)","required":false},"icon":{"type":"object","description":"Icon name or element to display","fields":{},"typeLabel":"DynamicIconName","required":false},"iconName":{"type":"object","description":"Alternate icon name or element for DynamicIcon component","fields":{},"typeLabel":"DynamicIconName","required":false},"image":{"type":"string","description":"Image URL for visual representation","required":false},"background":{"type":"string","description":"Background color or image for the item","required":false}},"typeLabel":"ILinkItem"},"typeLabel":"ILinkItem[]","required":false},"dropdownGroups":{"type":"array","description":"Grouped links for more complex layouts","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"Group label/title","typeLabel":"React.ReactNode","required":true},"description":{"type":"string","description":"Optional group description","required":false},"image":{"type":"string","description":"Optional group image","required":false},"links":{"type":"array","description":"Links within this group","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"Display text for the link","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"Optional description text","typeLabel":"React.ReactNode","required":false},"href":{"type":"string","description":"URL the link navigates to (preferred)","required":false},"url":{"type":"string","description":"URL the link navigates to (legacy, use href instead)","required":false},"icon":{"type":"object","description":"Icon name or element to display","fields":{},"typeLabel":"DynamicIconName","required":false},"iconName":{"type":"object","description":"Alternate icon name or element for DynamicIcon component","fields":{},"typeLabel":"DynamicIconName","required":false},"image":{"type":"string","description":"Image URL for visual representation","required":false},"background":{"type":"string","description":"Background color or image for the item","required":false}},"typeLabel":"ILinkItem"},"typeLabel":"ILinkItem[]","required":true}},"typeLabel":"IMenuLinkGroup"},"typeLabel":"IMenuLinkGroup[]","required":false}},"typeLabel":"IMenuLink"},"typeLabel":"IMenuLink[]","required":true,"minItems":2,"maxItems":7},"actions":{"type":"array","description":"Actions rendered on the right side (desktop) and bottom (mobile)","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},"menuLinks[].dropdownGroups":{"type":"object","description":"","minItems":1,"maxItems":4},"menuLinks[].dropdownGroups[].links":{"type":"object","description":"","minItems":1,"maxItems":6}},"exampleProps":{"logo":{"url":"/","src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","title":"MegaCorp","alt":"MegaCorp Logo"},"menuLinks":[{"label":"Products","dropdownGroups":[{"label":"Core Products","links":[{"label":"Platform","description":"All-in-one business platform","url":"#","iconName":"lucide/layout-grid"},{"label":"Analytics","description":"Advanced business analytics","url":"#","iconName":"lucide/trending-up"}]},{"label":"Add-ons","links":[{"label":"Integrations","description":"Connect your tools","url":"#","iconName":"lucide/puzzle"}]}]},{"label":"Pricing","href":"#"},{"label":"Resources","href":"#"}],"actions":[{"label":"Get Started","variant":"default","href":"#"}]},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","mega-menu","enterprise","multi-level","platform","developers","resources","full-width","complex-navigation"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Use 'dropdownGroups' on menu links to render grouped columns (IMenuLinkGroup[]). url iconName Alternatively use 'layout: 'animated-image-preview'' with 'links' containing 'image' URLs for visual dropdowns.","usageRequirements":{"requiredProps":["logo","menuLinks"],"mediaSlots":{"logo":{"path":"logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":true,"note":"Brand logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"propConstraints":{"menuLinks":{"minItems":2,"maxItems":7},"menuLinks[].dropdownGroups":{"minItems":1,"maxItems":4},"menuLinks[].dropdownGroups[].links":{"minItems":1,"maxItems":6}}}},{"id":"navbar-enterprise-mega","name":"Navbar Enterprise Mega Menu","title":"NavBar Enterprise Mega","category":"Navbar","categorySlug":"navbar","description":"A comprehensive enterprise-grade navigation bar with five distinct mega-menu styles. Features Solutions menu with bordered cards containing subpages and developer platform section, Products menu with featured image card and categorized listings, Global menu with enterprise features and regional location selectors, Partners menu with large promotional cards and partner type listings, and Resources menu with topic groups and resource cards. Each menu spans full width with rich content layouts. Mobile view uses full-screen sheet with accordion navigation. Ideal for large enterprise SaaS platforms, B2B software companies, and global organizations with complex product offerings.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290156/ml17i36bnbs054oyxrd8foy268ph/navbar-enterprise-mega-desktop.png","mobile":"https://cdn.ing/assets/i/r/290157/ary293y3wcg09vlswcsaa2e43rgn/navbar-enterprise-mega-mobile.png"},"componentPath":"blocks/navbars/navbar-enterprise-mega.tsx","code":"import { NavbarEnterpriseMega } from \"@opensite/ui/blocks/navbars/navbar-enterprise-mega\";\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      <NavbarEnterpriseMega\n        logo={{\n          url: \"#\",\n          src: brandLogoPlaceholders.black[0],\n          alt: \"Enterprise Corp Logo\",\n        }}\n        menuLinks={[\n          {\n            label: \"Solutions\",\n            layout: \"solutions-with-platform\",\n            solutionCards: [\n              {\n                id: \"enterprise\",\n                title: \"Enterprise\",\n                description: \"For large organizations\",\n                href: \"#\",\n                subpages: [\n                  {\n                    id: \"enterprise-security\",\n                    title: \"Security\",\n                    href: \"#\",\n                    icon: \"lucide/shield\",\n                  },\n                  {\n                    id: \"enterprise-compliance\",\n                    title: \"Compliance\",\n                    href: \"#\",\n                    icon: \"lucide/check-circle\",\n                  },\n                  {\n                    id: \"enterprise-support\",\n                    title: \"24/7 Support\",\n                    href: \"#\",\n                    icon: \"lucide/headphones\",\n                  },\n                ],\n              },\n              {\n                id: \"smb\",\n                title: \"Small Business\",\n                description: \"For growing companies\",\n                href: \"#smb\",\n                subpages: [\n                  {\n                    id: \"smb-start\",\n                    title: \"Getting Started\",\n                    href: \"#\",\n                    icon: \"lucide/rocket\",\n                  },\n                  {\n                    id: \"smb-templates\",\n                    title: \"Templates\",\n                    href: \"#\",\n                    icon: \"lucide/layout\",\n                  },\n                  {\n                    id: \"smb-training\",\n                    title: \"Training\",\n                    href: \"#\",\n                    icon: \"lucide/graduation-cap\",\n                  },\n                ],\n              },\n            ],\n            platformItems: [\n              {\n                id: \"react\",\n                title: \"React\",\n                href: \"#\",\n                icon: \"lucide/code\",\n              },\n              {\n                id: \"nodejs\",\n                title: \"Node.js\",\n                href: \"#\",\n                icon: \"lucide/server\",\n              },\n              {\n                id: \"python\",\n                title: \"Python\",\n                href: \"#\",\n                icon: \"lucide/terminal\",\n              },\n              {\n                id: \"graphql\",\n                title: \"GraphQL\",\n                href: \"#\",\n                icon: \"lucide/git-graph\",\n              },\n            ],\n            featuredHeroCard: {\n              title: \"New Platform Release\",\n              description:\n                \"Experience the next generation of our enterprise platform with advanced features\",\n              href: \"#\",\n              image:\n                \"https://toastability-production.s3.amazonaws.com/ygob90kp07hxmi5jj4sned76dnmc\",\n            },\n          },\n          {\n            label: \"Products\",\n            layout: \"products-categorized\",\n            productCategories: [\n              {\n                title: \"Analytics\",\n                products: [\n                  {\n                    id: \"bi\",\n                    title: \"Business Intelligence\",\n                    description: \"Advanced analytics and reporting tools\",\n                    href: \"#\",\n                    image:\n                      \"https://toastability-production.s3.amazonaws.com/qhz2kawawq3bbh7nusz3bvahln3v\",\n                  },\n                  {\n                    id: \"warehouse\",\n                    title: \"Data Warehouse\",\n                    description: \"Centralized data storage and management\",\n                    href: \"#\",\n                    image:\n                      \"https://toastability-production.s3.amazonaws.com/zykfhuapdqzu94ee1535gsgnvyac\",\n                  },\n                ],\n              },\n              {\n                title: \"Marketing\",\n                products: [\n                  {\n                    id: \"email\",\n                    title: \"Email Campaigns\",\n                    description: \"Automated email marketing platform\",\n                    href: \"#\",\n                    image:\n                      \"https://toastability-production.s3.amazonaws.com/kh1p8y15v55ctp5ulobm4pd77etm\",\n                  },\n                  {\n                    id: \"social\",\n                    title: \"Social Media\",\n                    description: \"Social media management suite\",\n                    href: \"#\",\n                    image:\n                      \"https://toastability-production.s3.amazonaws.com/8x62o6350p1ejm3pjrp1jwvcbh4v\",\n                  },\n                ],\n              },\n            ],\n            featuredHeroCard: {\n              title: \"Featured Product\",\n              description:\n                \"Check out our latest product launch with cutting-edge features\",\n              href: \"#\",\n              image:\n                \"https://toastability-production.s3.amazonaws.com/vvixyoo7ybq3h04q2q0kact0s5wc\",\n            },\n          },\n          {\n            label: \"Resources\",\n            layout: \"resources-with-topics\",\n            resourceItems: [\n              {\n                id: \"docs\",\n                title: \"Documentation\",\n                description: \"Complete guides and API references\",\n                href: \"#\",\n                icon: \"lucide/book-open\",\n              },\n              {\n                id: \"blog\",\n                title: \"Blog\",\n                description: \"Latest updates and insights\",\n                href: \"#\",\n                icon: \"lucide/newspaper\",\n              },\n              {\n                id: \"cases\",\n                title: \"Case Studies\",\n                description: \"Customer success stories\",\n                href: \"#\",\n                icon: \"lucide/file-text\",\n              },\n              {\n                id: \"webinars\",\n                title: \"Webinars\",\n                description: \"Live training sessions\",\n                href: \"#\",\n                icon: \"lucide/video\",\n              },\n            ],\n            topicGroups: [\n              {\n                title: \"Learning Paths\",\n                topics: [\n                  {\n                    id: \"beginner\",\n                    title: \"Beginner Guide\",\n                    href: \"#\",\n                    icon: \"lucide/book\",\n                  },\n                  {\n                    id: \"advanced\",\n                    title: \"Advanced Topics\",\n                    href: \"#\",\n                    icon: \"lucide/graduation-cap\",\n                  },\n                  {\n                    id: \"certification\",\n                    title: \"Certification\",\n                    href: \"#\",\n                    icon: \"lucide/award\",\n                  },\n                ],\n              },\n            ],\n            featuredHeroCard: {\n              title: \"Learning Hub\",\n              description:\n                \"Explore our comprehensive learning resources and documentation\",\n              href: \"#\",\n              image:\n                \"https://toastability-production.s3.amazonaws.com/t502cfynqso7ntkdvmcmfc87yjkt\",\n            },\n          },\n          {\n            label: \"Company\",\n            href: \"#\",\n          },\n          {\n            label: \"Pricing\",\n            href: \"#\",\n          },\n        ]}\n        actions={[\n          {\n            label: \"Get Started\",\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. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"menuLinks":{"type":"array","description":"Navigation menu links with mega menu configurations","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"Display text for the menu trigger","typeLabel":"React.ReactNode","required":true},"href":{"type":"string","description":"Direct link URL (for non-dropdown items)","required":false},"layout":{"type":"string","description":"Layout type for dropdown content","typeLabel":"MegaMenuLayout","required":false},"links":{"type":"array","description":"Links array for dropdown content","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"Display text for the link","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"Optional description text","typeLabel":"React.ReactNode","required":false},"href":{"type":"string","description":"URL the link navigates to (preferred)","required":false},"url":{"type":"string","description":"URL the link navigates to (legacy, use href instead)","required":false},"icon":{"type":"object","description":"Icon name or element to display","fields":{},"typeLabel":"DynamicIconName","required":false},"iconName":{"type":"object","description":"Alternate icon name or element for DynamicIcon component","fields":{},"typeLabel":"DynamicIconName","required":false},"image":{"type":"string","description":"Image URL for visual representation","required":false},"background":{"type":"string","description":"Background color or image for the item","required":false}},"typeLabel":"ILinkItem"},"typeLabel":"ILinkItem[]","required":false},"dropdownGroups":{"type":"array","description":"Grouped links for more complex layouts","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"Group label/title","typeLabel":"React.ReactNode","required":true},"description":{"type":"string","description":"Optional group description","required":false},"image":{"type":"string","description":"Optional group image","required":false},"links":{"type":"array","description":"Links within this group","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"Display text for the link","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"Optional description text","typeLabel":"React.ReactNode","required":false},"href":{"type":"string","description":"URL the link navigates to (preferred)","required":false},"url":{"type":"string","description":"URL the link navigates to (legacy, use href instead)","required":false},"icon":{"type":"object","description":"Icon name or element to display","fields":{},"typeLabel":"DynamicIconName","required":false},"iconName":{"type":"object","description":"Alternate icon name or element for DynamicIcon component","fields":{},"typeLabel":"DynamicIconName","required":false},"image":{"type":"string","description":"Image URL for visual representation","required":false},"background":{"type":"string","description":"Background color or image for the item","required":false}},"typeLabel":"ILinkItem"},"typeLabel":"ILinkItem[]","required":true}},"typeLabel":"IMenuLinkGroup"},"typeLabel":"IMenuLinkGroup[]","required":false}},"typeLabel":"IMenuLink"},"typeLabel":"IMenuLink[]","required":true,"minItems":2,"maxItems":7,"mediaHints":{"path":"menuLinks[].productCategories[].products[].image","roles":["thumbnail"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Product thumbnail in the mega menu. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"actions":{"type":"array","description":"Action configurations (e.g., login, signup buttons)","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}},"exampleProps":{"logo":{"url":"#","src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Enterprise Corp Logo"},"menuLinks":[{"label":"Solutions","layout":"solutions-with-platform","solutionCards":[{"id":"enterprise","title":"Enterprise","description":"For large organizations","href":"#","subpages":[{"id":"enterprise-security","title":"Security","href":"#","icon":"lucide/shield"}]}],"platformItems":[{"id":"react","title":"React","href":"#","icon":"lucide/code"}],"platformTitle":"Developer Platform","featuredHeroCard":{"title":"New Platform Release","description":"Experience the next generation platform","href":"#","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"}},{"label":"Products","layout":"products-categorized","productCategories":[{"title":"Analytics","products":[{"id":"bi","title":"Business Intelligence","description":"Advanced analytics and reporting","href":"#","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"}]}],"featuredHeroCard":{"title":"Featured Product","description":"Check out our latest product launch","href":"#","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"}},{"label":"Company","href":"#"},{"label":"Pricing","href":"#"}],"actions":[{"label":"Get Started","variant":"default","href":"#"}]},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","enterprise","mega-menu","solutions","products","global","partners","resources","b2b","corporate"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each menuLink requires a 'layout' field to determine the dropdown panel type. For 'solutions-with-platform': provide 'solutionCards' (with subpages), 'platformItems', and optionally 'platformTitle' (defaults to \"Platform\"). For 'products-categorized': provide 'productCategories' with 'products' arrays; each product may have an 'image' URL. For 'features-with-locations': provide 'featureCategories', 'regions', and optionally 'locationsTitle' (defaults to \"Locations\"). For 'resources-with-topics': provide 'resourceItems', 'topicGroups', and optionally 'resourcesTitle' (defaults to \"Resources\"). All 'featuredHeroCard.image' values must be absolute URLs.","usageRequirements":{"requiredProps":["logo","menuLinks"],"mediaSlots":{"logo":{"path":"logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":true,"note":"Brand logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."},"menuLinks[].featuredHeroCard.image":{"path":"menuLinks[].featuredHeroCard.image","roles":["feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Hero card image for the dropdown panel. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"menuLinks[].productCategories[].products[].image":{"path":"menuLinks[].productCategories[].products[].image","roles":["thumbnail"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Product thumbnail in the mega menu. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"propConstraints":{"menuLinks":{"minItems":2,"maxItems":7}}}},{"id":"navbar-floating-pill","name":"Navbar Floating Pill","title":"NavBar Floating Pill","category":"Navbar","categorySlug":"navbar","description":"A modern floating navigation bar with pill-shaped design and glassmorphism effect. Positioned absolutely at the top of the page with rounded-full border, backdrop blur, and subtle shadow. Features smooth dropdown animations and a collapsible mobile menu with custom hamburger animation that transforms into an X. The floating design creates a premium, modern aesthetic that works well over hero sections and images. Ideal for creative agencies, portfolios, modern SaaS landing pages, and design-focused websites.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290160/mioofjoatqnc7e9hfnblqjiwzris/navbar-floating-pill-desktop.png","mobile":"https://cdn.ing/assets/i/r/290161/fxvu2jhqp97z6zwxdbaxdqto5eav/navbar-floating-pill-mobile.png"},"componentPath":"blocks/navbars/navbar-floating-pill.tsx","code":"import { NavbarFloatingPill } from \"@opensite/ui/blocks/navbars/navbar-floating-pill\";\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      <NavbarFloatingPill\n        logo={{\n          url: \"/\",\n          src: brandLogoPlaceholders.black[0],\n          alt: \"Brand Logo\",\n        }}\n        items={[\n          { label: \"Home\", href: \"#\" },\n          { label: \"Features\", href: \"#\" },\n          { label: \"Pricing\", href: \"#\" },\n          { label: \"About\", href: \"#\" },\n          { label: \"Contact\", href: \"#\" },\n        ]}\n        authActions={[\n          {\n            label: \"Get Started\",\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. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"items":{"type":"array","description":"Navigation menu items","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":true}},"typeLabel":"NavItem"},"typeLabel":"NavItem[]","required":true,"minItems":3,"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":2}},"exampleProps":{"logo":{"url":"/","src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"items":[{"label":"Home","href":"#"},{"label":"Features","href":"#"},{"label":"Pricing","href":"#"},{"label":"About","href":"#"},{"label":"Contact","href":"#"}],"authActions":[{"label":"Get Started","variant":"default","href":"#"}]},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","floating","pill","glassmorphism","backdrop-blur","modern","premium","creative","animated-hamburger"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. The navbar floats above the page with a pill-shaped container and backdrop blur. Each 'items' entry uses 'label'/'href' (not 'title'/'url'). href The 'authActions' array renders outside the pill on the right.","usageRequirements":{"requiredProps":["logo","items"],"mediaSlots":{"logo":{"path":"logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":true,"note":"Brand logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"propConstraints":{"items":{"minItems":3,"maxItems":7},"authActions":{"minItems":0,"maxItems":2}}}},{"id":"navbar-platform-resources","name":"Navbar Platform Resources","title":"NavBar Platform Resources","category":"Navbar","categorySlug":"navbar","description":"A navigation bar with comprehensive platform and resources mega-menus. Features two main dropdowns: Platform menu with solutions grid and use cases section, and Resources menu with a three-column grid of resource links. Includes solution cards with icons and descriptions, use case items, and categorized resource links. Mobile view uses full-screen overlay with accordion navigation. Perfect for SaaS platforms, developer tools, and technology companies that need to showcase both product capabilities and educational resources.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290162/kybbx74ron1gf3j2la1guqpadk51/navbar-platform-resources-desktop.png","mobile":"https://cdn.ing/assets/i/r/290163/a1vpyknff92o16dgqr2mf014ngmk/navbar-platform-resources-mobile.png"},"componentPath":"blocks/navbars/navbar-platform-resources.tsx","code":"import { NavbarPlatformResources } from \"@opensite/ui/blocks/navbars/navbar-platform-resources\";\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      <NavbarPlatformResources\n        logo={{\n          url: \"/\",\n          src: brandLogoPlaceholders.black[0],\n          title: \"DevPlatform\",\n          alt: \"DevPlatform Logo\",\n        }}\n        menuLinks={[\n          {\n            label: \"Platform\",\n            layout: \"simple-list\",\n            links: [\n              {\n                label: \"Infrastructure\",\n                description:\n                  \"Cloud infrastructure services with a much longer description.\",\n                url: \"#\",\n                iconName: \"lucide/server\",\n              },\n              {\n                label: \"Databases\",\n                description: \"Managed database solutions\",\n                url: \"#\",\n                iconName: \"lucide/database\",\n              },\n              {\n                label: \"APIs\",\n                description: \"RESTful and GraphQL APIs\",\n                url: \"#\",\n                iconName: \"lucide/code\",\n              },\n              {\n                label: \"Hosting\",\n                description: \"Global edge network\",\n                url: \"#\",\n                iconName: \"lucide/globe\",\n              },\n            ],\n          },\n          {\n            label: \"Resources\",\n            layout: \"simple-list\",\n            links: [\n              {\n                label: \"Getting Started\",\n                description: \"Learn the basics\",\n                url: \"#\",\n                iconName: \"lucide/book-open\",\n              },\n              {\n                label: \"API Reference\",\n                description: \"Complete API documentation\",\n                url: \"#\",\n                iconName: \"lucide/file-code\",\n              },\n              {\n                label: \"Tutorials\",\n                description: \"Step-by-step guides\",\n                url: \"#\",\n                iconName: \"lucide/graduation-cap\",\n              },\n              {\n                label: \"Help Center\",\n                description: \"Get support\",\n                url: \"#\",\n                iconName: \"lucide/life-buoy\",\n              },\n            ],\n          },\n          {\n            label: \"Pricing\",\n            href: \"#pricing\",\n          },\n          {\n            label: \"Company\",\n            href: \"#company\",\n          },\n        ]}\n        actions={[\n          {\n            label: \"Get Started\",\n            variant: \"default\",\n            href: \"#\",\n            asButton: true,\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. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"menuLinks":{"type":"array","description":"Navigation menu links with optional dropdown groups","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"Display text for the menu trigger","typeLabel":"React.ReactNode","required":true},"href":{"type":"string","description":"Direct link URL (for non-dropdown items)","required":false},"layout":{"type":"string","description":"Layout type for dropdown content","typeLabel":"MegaMenuLayout","required":false},"links":{"type":"array","description":"Links array for dropdown content","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"Display text for the link","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"Optional description text","typeLabel":"React.ReactNode","required":false},"href":{"type":"string","description":"URL the link navigates to (preferred)","required":false},"url":{"type":"string","description":"URL the link navigates to (legacy, use href instead)","required":false},"icon":{"type":"object","description":"Icon name or element to display","fields":{},"typeLabel":"DynamicIconName","required":false},"iconName":{"type":"object","description":"Alternate icon name or element for DynamicIcon component","fields":{},"typeLabel":"DynamicIconName","required":false},"image":{"type":"string","description":"Image URL for visual representation","required":false},"background":{"type":"string","description":"Background color or image for the item","required":false}},"typeLabel":"ILinkItem"},"typeLabel":"ILinkItem[]","required":false},"dropdownGroups":{"type":"array","description":"Grouped links for more complex layouts","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"Group label/title","typeLabel":"React.ReactNode","required":true},"description":{"type":"string","description":"Optional group description","required":false},"image":{"type":"string","description":"Optional group image","required":false},"links":{"type":"array","description":"Links within this group","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"Display text for the link","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"Optional description text","typeLabel":"React.ReactNode","required":false},"href":{"type":"string","description":"URL the link navigates to (preferred)","required":false},"url":{"type":"string","description":"URL the link navigates to (legacy, use href instead)","required":false},"icon":{"type":"object","description":"Icon name or element to display","fields":{},"typeLabel":"DynamicIconName","required":false},"iconName":{"type":"object","description":"Alternate icon name or element for DynamicIcon component","fields":{},"typeLabel":"DynamicIconName","required":false},"image":{"type":"string","description":"Image URL for visual representation","required":false},"background":{"type":"string","description":"Background color or image for the item","required":false}},"typeLabel":"ILinkItem"},"typeLabel":"ILinkItem[]","required":true}},"typeLabel":"IMenuLinkGroup"},"typeLabel":"IMenuLinkGroup[]","required":false}},"typeLabel":"IMenuLink"},"typeLabel":"IMenuLink[]","required":true,"minItems":2,"maxItems":7},"actions":{"type":"array","description":"Actions rendered on the right side (desktop) and bottom (mobile)","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},"menuLinks[].links":{"type":"object","description":"","minItems":1,"maxItems":8}},"exampleProps":{"logo":{"url":"/","src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","title":"DevPlatform","alt":"DevPlatform Logo"},"menuLinks":[{"label":"Platform","layout":"list-with-icons","links":[{"label":"Infrastructure","description":"Cloud infrastructure services","url":"#","iconName":"lucide/server"},{"label":"Databases","description":"Managed database solutions","url":"#","iconName":"lucide/database"},{"label":"APIs","description":"RESTful and GraphQL APIs","url":"#","iconName":"lucide/code"}]},{"label":"Resources","layout":"simple-list","links":[{"label":"Getting Started","description":"Learn the basics","url":"#","iconName":"lucide/book-open"},{"label":"API Reference","description":"Complete API documentation","url":"#","iconName":"lucide/file-code"}]},{"label":"Pricing","href":"#"}],"actions":[{"label":"Get Started","variant":"default","href":"#","asButton":true}]},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","platform","resources","mega-menu","solutions","use-cases","documentation","saas","developer-tools"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each menuLink must specify a 'layout' field to determine the dropdown panel style. label description For 'featured-grid': provide 'links' and optionally a featured item. For 'two-column-cta': provide two column link groups and a CTA card. For 'multi-section': provide 'dropdownGroups' (IMenuLinkGroup[]). Link items may use 'background' for background image URLs in applicable layouts.","usageRequirements":{"requiredProps":["logo","menuLinks"],"mediaSlots":{"logo":{"path":"logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":true,"note":"Brand logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"propConstraints":{"menuLinks":{"minItems":2,"maxItems":7},"menuLinks[].links":{"minItems":1,"maxItems":8}}}},{"id":"navbar-image-preview","name":"Navbar Image Preview","title":"NavBar Image Preview","category":"Navbar","categorySlug":"navbar","description":"A fixed navigation bar with image preview functionality in dropdown menus. The navigation bar changes background on scroll for better visibility. Desktop dropdowns display a large image preview that dynamically changes when hovering over different menu items, creating an engaging visual experience. Mobile view uses a full-screen dark overlay with categorized link columns and social links at the bottom. Ideal for creative agencies, portfolios, e-commerce sites, and brands that want to showcase visual content directly in their navigation.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290164/b9mreqd4lioiqekpb7alvqs680my/navbar-image-preview-desktop.png","mobile":"https://cdn.ing/assets/i/r/290165/ihgllx4727whi8oxwdrfjw23l73a/navbar-image-preview-mobile.png"},"componentPath":"blocks/navbars/navbar-image-preview.tsx","code":"import { NavbarImagePreview } from \"@opensite/ui/blocks/navbars/navbar-image-preview\";\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      <NavbarImagePreview\n      logo={{\n        url: \"/\",\n        src: brandLogoPlaceholders.black[0],\n        title: \"Design Studio\",\n        alt: \"Design Studio Logo\",\n      }}\n      navigation={[\n        {\n          title: \"Services\",\n          links: [\n            {\n              label: \"Brand Identity\",\n              description: \"Complete brand design packages\",\n              url: \"#\",\n              image: \"https://toastability-production.s3.amazonaws.com/a3m42usevv0iet0fpfwa1fsytxmv\",\n            },\n            {\n              label: \"Web Design\",\n              description: \"Modern and responsive websites\",\n              url: \"#\",\n              image: \"https://toastability-production.s3.amazonaws.com/qghzqu1i99vaubyew9s5dxcbel9l\",\n            },\n            {\n              label: \"UI/UX Design\",\n              description: \"User-centered design solutions\",\n              url: \"#\",\n              image: \"https://toastability-production.s3.amazonaws.com/9covpitzpuuobkg1m4mfokpi0enw\",\n            },\n            {\n              label: \"Motion Graphics\",\n              description: \"Engaging animated content\",\n              url: \"#\",\n              image: \"https://toastability-production.s3.amazonaws.com/2d4k8d5shwg82276hzj2ztbj7mxq\",\n            },\n          ],\n        },\n        {\n          title: \"Portfolio\",\n          url: \"#\",\n        },\n        {\n          title: \"About\",\n          url: \"#\",\n        },\n        {\n          title: \"Contact\",\n          url: \"#\",\n        },\n      ]}\n      authActions={[\n        {\n          label: \"Get a Quote\",\n          variant: \"default\",\n          href: \"#\",\n          asButton: true,\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. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"navigation":{"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":6,"mediaHints":{"path":"navigation[].links[].image","roles":["feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Preview image shown on hover of each dropdown link. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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":2},"navigation[].links":{"type":"object","description":"","minItems":1,"maxItems":6}},"exampleProps":{"logo":{"url":"/","src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","title":"Design Studio","alt":"Design Studio Logo"},"navigation":[{"title":"Services","links":[{"label":"Brand Identity","description":"Complete brand design packages","url":"#","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"},{"label":"Web Design","description":"Modern and responsive websites","url":"#","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"},{"label":"UI/UX Design","description":"User-centered design solutions","url":"#","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"}]},{"title":"Portfolio","url":"#"},{"title":"About","url":"#"},{"title":"Contact","url":"#"}],"authActions":[{"label":"Get a Quote","variant":"default","href":"#","asButton":true}]},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","image-preview","hover-preview","visual","creative","portfolio","e-commerce","fixed","scroll-aware"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Dropdown links that should show image previews must include an 'image' absolute URL. The 'navigation' prop uses 'title' and optional 'links' (MenuLink[]) or 'url' for flat links. url The component listens to scroll events — do not wrap in a scroll-locked container.","usageRequirements":{"requiredProps":["logo","navigation"],"mediaSlots":{"logo":{"path":"logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":true,"note":"Brand logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."},"navigation[].links[].image":{"path":"navigation[].links[].image","roles":["feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Preview image shown on hover of each dropdown link. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"propConstraints":{"navigation":{"minItems":2,"maxItems":6},"navigation[].links":{"minItems":1,"maxItems":6},"authActions":{"minItems":0,"maxItems":2}}}},{"id":"navbar-dark-icons","name":"Navbar Dark Icons","title":"NavBar Dark Icons","category":"Navbar","categorySlug":"navbar","description":"A dark-themed navigation bar with colorful icon indicators in dropdown menus. Features a dark background with dropdown menus containing items with colorful icon backgrounds that provide visual categorization. Includes a GitHub stars counter button and primary CTA. Mobile view uses a full-screen dark sheet with accordion navigation. Perfect for developer tools, open-source projects, tech startups, and products that want a modern dark aesthetic with visual hierarchy through color-coded icons.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290166/3813fzr948c969xdumfp3x1tmix7/navbar-dark-icons-desktop.png","mobile":"https://cdn.ing/assets/i/r/290167/h1pglgjl44uknkj4ms9ixlu27yyb/navbar-dark-icons-mobile.png"},"componentPath":"blocks/navbars/navbar-dark-icons.tsx","code":"import { NavbarDarkIcons } from \"@opensite/ui/blocks/navbars/navbar-dark-icons\";\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      <NavbarDarkIcons\n        logo={{\n          url: \"/\",\n          src: brandLogoPlaceholders.white[0],\n          title: \"Developer Platform\",\n          alt: \"Developer Platform Logo\",\n        }}\n        navigation={[\n          {\n            title: \"Products\",\n            links: [\n              {\n                label: \"API Gateway\",\n                description: \"Manage your APIs efficiently\",\n                url: \"#\",\n                iconName: \"lucide/server\",\n                iconColor: \"#3b82f6\",\n              },\n              {\n                label: \"Database\",\n                description: \"Scalable cloud database\",\n                url: \"#\",\n                iconName: \"lucide/database\",\n                iconColor: \"#8b5cf6\",\n              },\n              {\n                label: \"Authentication\",\n                description: \"Secure user authentication\",\n                url: \"#\",\n                iconName: \"lucide/shield\",\n                iconColor: \"#10b981\",\n              },\n              {\n                label: \"Storage\",\n                description: \"Cloud file storage\",\n                url: \"#\",\n                iconName: \"lucide/hard-drive\",\n                iconColor: \"#f59e0b\",\n              },\n            ],\n          },\n          {\n            title: \"Resources\",\n            links: [\n              {\n                label: \"Documentation\",\n                description: \"Comprehensive guides\",\n                url: \"#\",\n                iconName: \"lucide/book-open\",\n                iconColor: \"#06b6d4\",\n              },\n              {\n                label: \"API Reference\",\n                description: \"Complete API documentation\",\n                url: \"#\",\n                iconName: \"lucide/code\",\n                iconColor: \"#ec4899\",\n              },\n              {\n                label: \"Community\",\n                description: \"Join our community\",\n                url: \"#\",\n                iconName: \"lucide/users\",\n                iconColor: \"#14b8a6\",\n              },\n            ],\n          },\n          {\n            title: \"Pricing\",\n            url: \"#\",\n          },\n        ]}\n        authActions={[\n          {\n            label: \"Start Free Trial\",\n            variant: \"default\",\n            href: \"#\",\n            asButton: true,\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 (white version recommended for dark theme). LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"navigation":{"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":6},"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":2},"navigation[].links":{"type":"object","description":"","minItems":1,"maxItems":6}},"exampleProps":{"logo":{"url":"/","src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","title":"Developer Platform","alt":"Developer Platform Logo"},"navigation":[{"title":"Products","links":[{"label":"API Gateway","description":"Manage your APIs efficiently","url":"#","iconName":"lucide/server","iconColor":"#3b82f6"},{"label":"Database","description":"Scalable cloud database","url":"#","iconName":"lucide/database","iconColor":"#8b5cf6"},{"label":"Authentication","description":"Secure user authentication","url":"#","iconName":"lucide/shield","iconColor":"#10b981"}]},{"title":"Pricing","url":"#"}],"authActions":[{"label":"Start Free Trial","variant":"default","href":"#","asButton":true}]},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","dark-theme","colorful-icons","github-stars","developer-tools","open-source","tech","modern","icon-indicators"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. description url iconName The optional 'githubUrl' prop enables a GitHub stars badge fetched client-side. The 'authActions' array renders on the right side of the navbar.","usageRequirements":{"requiredProps":["logo","navigation"],"mediaSlots":{"logo":{"path":"logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":true,"note":"Brand logo (white version recommended for dark theme). LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"propConstraints":{"navigation":{"minItems":2,"maxItems":6},"navigation[].links":{"minItems":1,"maxItems":6},"authActions":{"minItems":0,"maxItems":2}}}},{"id":"navbar-animated-preview","name":"Navbar Animated Preview","title":"NavBar Animated Preview","category":"Navbar","categorySlug":"navbar","description":"A navigation bar with animated image previews and multiple distinct dropdown styles. Features three dropdown menu types: Products menu with animated image preview that transitions smoothly between items, Solutions menu with featured cards and organized grid layout, and Developers menu with grouped links and featured image section. Navigation menu spans full width with smooth fade-in animations. Mobile view uses full-screen sheet with accordion navigation. Ideal for SaaS products, technology platforms, and companies that want engaging, animated navigation experiences.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290168/1eipzn3pqgle6e5gg752thqdk897/navbar-animated-preview-desktop.png","mobile":"https://cdn.ing/assets/i/r/290169/e4s5xasn4c46y31t4gfu45o32s4w/navbar-animated-preview-mobile.png"},"componentPath":"blocks/navbars/navbar-animated-preview.tsx","code":"import { NavbarAnimatedPreview } from \"@opensite/ui/blocks/navbars/navbar-animated-preview\";\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      <NavbarAnimatedPreview\n        logo={{\n          url: \"/\",\n          src: brandLogoPlaceholders.black[0],\n          alt: \"Company Logo\",\n        }}\n        menuLinks={[\n          {\n            label: \"Products\",\n            layout: \"animated-image-preview\",\n            links: [\n              {\n                label: \"Analytics Platform\",\n                description: \"Real-time data insights and reporting\",\n                image: \"https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn\",\n                url: \"#\",\n                iconName: \"lucide/bar-chart\",\n              },\n              {\n                label: \"Marketing Suite\",\n                description: \"Complete marketing automation tools\",\n                image: \"https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t\",\n                url: \"#\",\n                iconName: \"lucide/megaphone\",\n              },\n              {\n                label: \"CRM System\",\n                description: \"Customer relationship management\",\n                image: \"https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j\",\n                url: \"#\",\n                iconName: \"lucide/users\",\n              },\n              {\n                label: \"API Platform\",\n                description: \"Developer-friendly APIs\",\n                image: \"https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson\",\n                url: \"#\",\n                iconName: \"lucide/code\",\n              },\n            ],\n          },\n          {\n            label: \"Solutions\",\n            layout: \"featured-cards-grid\",\n            featuredLinks: [\n              {\n                label: \"Enterprise\",\n                description: \"Scale your business with enterprise solutions\",\n                url: \"#\",\n                iconName: \"lucide/building\",\n                background: \"https://toastability-production.s3.amazonaws.com/pjgb223h1bjywdk15i3zi7pjhutg\",\n              },\n              {\n                label: \"Small Business\",\n                description: \"Perfect tools for growing companies\",\n                url: \"#\",\n                iconName: \"lucide/briefcase\",\n                background: \"https://toastability-production.s3.amazonaws.com/we9r4e711an6d0bd3dwbl9tb9z7q\",\n              },\n            ],\n            links: [\n              {\n                label: \"E-Commerce\",\n                description: \"Online store solutions\",\n                url: \"#\",\n                iconName: \"lucide/shopping-cart\",\n              },\n              {\n                label: \"Healthcare\",\n                description: \"HIPAA-compliant solutions\",\n                url: \"#\",\n                iconName: \"lucide/heart-pulse\",\n              },\n              {\n                label: \"Education\",\n                description: \"Learning management systems\",\n                url: \"#\",\n                iconName: \"lucide/graduation-cap\",\n              },\n              {\n                label: \"Finance\",\n                description: \"Secure financial tools\",\n                url: \"#\",\n                iconName: \"lucide/wallet\",\n              },\n            ],\n          },\n          {\n            label: \"Developers\",\n            layout: \"grouped-links-image\",\n            groupLinks: [\n              {\n                label: \"Documentation\",\n                links: [\n                  {\n                    label: \"Getting Started\",\n                    description: \"Quick start guide\",\n                    url: \"#\",\n                    iconName: \"lucide/book-open\",\n                  },\n                  {\n                    label: \"API Reference\",\n                    description: \"Complete API docs\",\n                    url: \"#\",\n                    iconName: \"lucide/file-text\",\n                  },\n                ],\n              },\n              {\n                label: \"Resources\",\n                links: [\n                  {\n                    label: \"Code Examples\",\n                    description: \"Sample implementations\",\n                    url: \"#\",\n                    iconName: \"lucide/code-2\",\n                  },\n                  {\n                    label: \"SDKs & Tools\",\n                    description: \"Developer tools\",\n                    url: \"#\",\n                    iconName: \"lucide/package\",\n                  },\n                ],\n              },\n            ],\n            imageLink: {\n              label: \"New: API v2.0 Released\",\n              image: \"https://toastability-production.s3.amazonaws.com/f8rfrurzo743ym1s7m5xtbombunz\",\n              url: \"#\",\n            },\n          },\n          {\n            label: \"Pricing\",\n            href: \"#\",\n          },\n        ]}\n        actions={[\n          {\n            label: \"Get Started\",\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. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"menuLinks":{"type":"array","description":"Navigation menu links with optional dropdown groups","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"Display text for the menu trigger","typeLabel":"React.ReactNode","required":true},"href":{"type":"string","description":"Direct link URL (for non-dropdown items)","required":false},"layout":{"type":"string","description":"Layout type for dropdown content","typeLabel":"MegaMenuLayout","required":false},"links":{"type":"array","description":"Links array for dropdown content","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"Display text for the link","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"Optional description text","typeLabel":"React.ReactNode","required":false},"href":{"type":"string","description":"URL the link navigates to (preferred)","required":false},"url":{"type":"string","description":"URL the link navigates to (legacy, use href instead)","required":false},"icon":{"type":"object","description":"Icon name or element to display","fields":{},"typeLabel":"DynamicIconName","required":false},"iconName":{"type":"object","description":"Alternate icon name or element for DynamicIcon component","fields":{},"typeLabel":"DynamicIconName","required":false},"image":{"type":"string","description":"Image URL for visual representation","required":false},"background":{"type":"string","description":"Background color or image for the item","required":false}},"typeLabel":"ILinkItem"},"typeLabel":"ILinkItem[]","required":false},"dropdownGroups":{"type":"array","description":"Grouped links for more complex layouts","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"Group label/title","typeLabel":"React.ReactNode","required":true},"description":{"type":"string","description":"Optional group description","required":false},"image":{"type":"string","description":"Optional group image","required":false},"links":{"type":"array","description":"Links within this group","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"Display text for the link","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"Optional description text","typeLabel":"React.ReactNode","required":false},"href":{"type":"string","description":"URL the link navigates to (preferred)","required":false},"url":{"type":"string","description":"URL the link navigates to (legacy, use href instead)","required":false},"icon":{"type":"object","description":"Icon name or element to display","fields":{},"typeLabel":"DynamicIconName","required":false},"iconName":{"type":"object","description":"Alternate icon name or element for DynamicIcon component","fields":{},"typeLabel":"DynamicIconName","required":false},"image":{"type":"string","description":"Image URL for visual representation","required":false},"background":{"type":"string","description":"Background color or image for the item","required":false}},"typeLabel":"ILinkItem"},"typeLabel":"ILinkItem[]","required":true}},"typeLabel":"IMenuLinkGroup"},"typeLabel":"IMenuLinkGroup[]","required":false}},"typeLabel":"IMenuLink"},"typeLabel":"IMenuLink[]","required":true,"minItems":2,"maxItems":6,"mediaHints":{"path":"menuLinks[].imageLink.image","roles":["feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Side image for grouped-links-image layout. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"actions":{"type":"array","description":"Action configurations (e.g., Sign In, Get Started buttons)","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},"menuLinks[].links":{"type":"object","description":"","minItems":1,"maxItems":6},"menuLinks[].featuredLinks":{"type":"object","description":"","minItems":1,"maxItems":4}},"exampleProps":{"logo":{"url":"/","src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Company Logo"},"menuLinks":[{"label":"Products","layout":"animated-image-preview","links":[{"label":"Analytics Platform","description":"Real-time data insights and reporting","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","url":"#","iconName":"lucide/bar-chart"},{"label":"Marketing Suite","description":"Complete marketing automation tools","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","url":"#","iconName":"lucide/megaphone"},{"label":"CRM System","description":"Customer relationship management","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","url":"#","iconName":"lucide/users"}]},{"label":"Solutions","layout":"featured-cards-grid","featuredLinks":[{"label":"Enterprise","description":"Scale your business with enterprise solutions","url":"#","iconName":"lucide/building","background":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"},{"label":"Small Business","description":"Perfect tools for growing companies","url":"#","iconName":"lucide/briefcase","background":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"}],"links":[{"label":"E-Commerce","description":"Online store solutions","url":"#","iconName":"lucide/shopping-cart"}]},{"label":"Developers","layout":"grouped-links-image","groupLinks":[{"label":"Documentation","links":[{"label":"Getting Started","description":"Quick start guide","url":"#","iconName":"lucide/book-open"}]}],"imageLink":{"label":"New: API v2.0 Released","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","url":"#"}},{"label":"Pricing","href":"#"}],"actions":[{"label":"Get Started","variant":"default","href":"#"}]},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","animated","image-preview","transitions","products","solutions","developers","full-width","engaging"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. For 'animated-image-preview': each link in 'links' should include an 'image' absolute URL. For 'featured-cards-grid': 'featuredLinks' items use 'background' for background image URLs; 'links' are standard icon links. For 'grouped-links-image': use 'groupLinks' (IMenuLinkGroup[]) and optionally 'imageLink' with an 'image' URL. All image and background URLs must be absolute.","usageRequirements":{"requiredProps":["logo","menuLinks"],"mediaSlots":{"logo":{"path":"logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":true,"note":"Brand logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."},"menuLinks[].links[].image":{"path":"menuLinks[].links[].image","roles":["feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Preview image for animated-image-preview layout links. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"menuLinks[].featuredLinks[].background":{"path":"menuLinks[].featuredLinks[].background","roles":["feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Background image for featured card links. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"menuLinks[].imageLink.image":{"path":"menuLinks[].imageLink.image","roles":["feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Side image for grouped-links-image layout. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"propConstraints":{"menuLinks":{"minItems":2,"maxItems":6},"menuLinks[].links":{"minItems":1,"maxItems":6},"menuLinks[].featuredLinks":{"minItems":1,"maxItems":4}}}},{"id":"navbar-multi-column-groups","name":"Navbar Multi-Column Groups","title":"NavBar Multi Column Groups","category":"Navbar","categorySlug":"navbar","description":"A navigation bar with multi-column grouped dropdown menus. Dropdown menus organize links into multiple columns by category, with each column having a group title and list of links with icons and descriptions. The dropdown width dynamically adjusts based on the number of groups for optimal layout. Mobile view uses a dark-themed full-screen sheet with accordion navigation and CTA buttons prominently displayed at the top. Perfect for large websites with many navigation categories, enterprise software, and platforms with extensive feature sets.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290170/mide7krcnu5dq1ewh50cz1xpkyvh/navbar-multi-column-groups-desktop.png","mobile":"https://cdn.ing/assets/i/r/290171/5t4r29ny62encci12p0k2xypy62s/navbar-multi-column-groups-mobile.png"},"componentPath":"blocks/navbars/navbar-multi-column-groups.tsx","code":"import { NavbarMultiColumnGroups } from \"@opensite/ui/blocks/navbars/navbar-multi-column-groups\";\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      <NavbarMultiColumnGroups\n      logo={{\n        url: \"/\",\n        src: brandLogoPlaceholders.black[0],\n        title: \"MultiNav\",\n        alt: \"MultiNav Logo\",\n      }}\n      navigation={[\n        {\n          title: \"Products\",\n          groups: [\n            {\n              title: \"Core Platform\",\n              links: [\n                {\n                  label: \"Dashboard\",\n                  description: \"Centralized command center\",\n                  url: \"#\",\n                  iconName: \"lucide/layout-dashboard\",\n                },\n                {\n                  label: \"Analytics\",\n                  description: \"Business intelligence tools\",\n                  url: \"#\",\n                  iconName: \"lucide/bar-chart\",\n                },\n                {\n                  label: \"Reports\",\n                  description: \"Detailed reporting suite\",\n                  url: \"#\",\n                  iconName: \"lucide/file-text\",\n                },\n              ],\n            },\n            {\n              title: \"Productivity\",\n              links: [\n                {\n                  label: \"Tasks\",\n                  description: \"Project management\",\n                  url: \"#\",\n                  iconName: \"lucide/check-square\",\n                },\n                {\n                  label: \"Calendar\",\n                  description: \"Schedule and organize\",\n                  url: \"#\",\n                  iconName: \"lucide/calendar\",\n                },\n                {\n                  label: \"Automation\",\n                  description: \"Workflow automation\",\n                  url: \"#\",\n                  iconName: \"lucide/zap\",\n                },\n              ],\n            },\n            {\n              title: \"Collaboration\",\n              links: [\n                {\n                  label: \"Team Chat\",\n                  description: \"Real-time messaging\",\n                  url: \"#\",\n                  iconName: \"lucide/message-circle\",\n                },\n                {\n                  label: \"Video Calls\",\n                  description: \"Face-to-face meetings\",\n                  url: \"#\",\n                  iconName: \"lucide/video\",\n                },\n                {\n                  label: \"File Sharing\",\n                  description: \"Secure file exchange\",\n                  url: \"#\",\n                  iconName: \"lucide/folder-open\",\n                },\n              ],\n            },\n          ],\n        },\n        {\n          title: \"Solutions\",\n          url: \"#\",\n        },\n        {\n          title: \"Pricing\",\n          url: \"#\",\n        },\n      ]}\n      authActions={[\n        {\n          label: \"Login\",\n          variant: \"link\",\n          asButton: true,\n          href: \"#\",\n        },\n        {\n          label: \"Get Started\",\n          variant: \"default\",\n          href: \"#\",\n          asButton: true,\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. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"navigation":{"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":6},"authActions":{"type":"array","description":"Authentication action configurations for desktop","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},"navigation[].groups":{"type":"object","description":"","minItems":1,"maxItems":4},"navigation[].groups[].links":{"type":"object","description":"","minItems":1,"maxItems":6}},"exampleProps":{"logo":{"url":"/","src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","title":"MultiNav","alt":"MultiNav Logo"},"navigation":[{"title":"Products","groups":[{"title":"Core Platform","links":[{"label":"Dashboard","description":"Centralized command center","url":"#","iconName":"lucide/layout-dashboard"},{"label":"Analytics","description":"Business intelligence tools","url":"#","iconName":"lucide/bar-chart"}]},{"title":"Collaboration","links":[{"label":"Team Chat","description":"Real-time messaging","url":"#","iconName":"lucide/message-circle"}]}]},{"title":"Pricing","url":"#"}],"authActions":[{"label":"Login","variant":"link","asButton":true,"href":"#"},{"label":"Get Started","variant":"default","href":"#","asButton":true}]},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","multi-column","grouped","categories","organized","enterprise","extensive","dynamic-width","dark-mobile"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. description url The 'authActions' and 'mobileAuthActions' props accept separate desktop and mobile CTAs.","usageRequirements":{"requiredProps":["logo","navigation"],"mediaSlots":{"logo":{"path":"logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":true,"note":"Brand logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"propConstraints":{"navigation":{"minItems":2,"maxItems":6},"navigation[].groups":{"minItems":1,"maxItems":4},"navigation[].groups[].links":{"minItems":1,"maxItems":6},"authActions":{"minItems":0,"maxItems":3}}}},{"id":"navbar-sidebar-mobile","name":"Navbar Sidebar Mobile","title":"NavBar Sidebar Mobile","category":"Navbar","categorySlug":"navbar","description":"A navigation bar with a slide-out sidebar for mobile devices. Features standard horizontal navigation menu on desktop with dropdown menus containing icons, titles, and descriptions. Mobile view uses a slide-out sidebar from the left with accordion navigation and additional footer links. The sidebar includes a header with logo and close button, providing an app-like mobile navigation experience. Ideal for applications, dashboards, and websites that want a more immersive mobile navigation pattern.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290172/ooqi12d1ja2tr0gk1m80jr51apur/navbar-sidebar-mobile-desktop.png","mobile":"https://cdn.ing/assets/i/r/290173/jqxno5pq9newdrsdgr9ea3to41zx/navbar-sidebar-mobile-mobile.png"},"componentPath":"blocks/navbars/navbar-sidebar-mobile.tsx","code":"import { NavbarSidebarMobile } from \"@opensite/ui/blocks/navbars/navbar-sidebar-mobile\";\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      <NavbarSidebarMobile\n      logo={{\n        url: \"/\",\n        src: brandLogoPlaceholders.black[0],\n        title: \"AppName\",\n        alt: \"AppName Logo\",\n      }}\n      menu={[\n        {\n          title: \"Dashboard\",\n          url: \"#\",\n        },\n        {\n          title: \"Projects\",\n          items: [\n            { title: \"All Projects\", url: \"#\", icon: \"lucide/package\" },\n            { title: \"Recent\", url: \"#\", icon: \"lucide/code-2\" },\n            { title: \"Favorites\", url: \"#\", icon: \"lucide/file-text\" },\n          ],\n        },\n        {\n          title: \"Team\",\n          items: [\n            { title: \"Members\", url: \"#\", icon: \"lucide/users\" },\n            { title: \"Invitations\", url: \"#\", icon: \"lucide/mail\" },\n            { title: \"Settings\", url: \"#\", icon: \"lucide/settings\" },\n          ],\n        },\n        {\n          title: \"Analytics\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          items: [\n            { title: \"Profile\", url: \"#\", icon: \"lucide/user\" },\n            { title: \"Billing\", url: \"#\", icon: \"lucide/credit-card\" },\n            { title: \"Preferences\", url: \"#\", icon: \"lucide/sliders\" },\n          ],\n        },\n      ]}\n      authActions={[\n        {\n          label: \"Upgrade Plan\",\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. 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":8},"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":2},"menu[].items":{"type":"object","description":"","minItems":1,"maxItems":6}},"exampleProps":{"logo":{"url":"/","src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","title":"AppName","alt":"AppName Logo"},"menu":[{"title":"Dashboard","url":"#"},{"title":"Projects","items":[{"title":"All Projects","url":"#","icon":"lucide/package"},{"title":"Recent","url":"#","icon":"lucide/code-2"}]},{"title":"Team","items":[{"title":"Members","url":"#","icon":"lucide/users"},{"title":"Settings","url":"#","icon":"lucide/settings"}]},{"title":"Analytics","url":"#"}],"authActions":[{"label":"Upgrade Plan","variant":"default","href":"#"}]},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","sidebar","slide-out","mobile","app-like","accordion","dashboard","application","immersive"],"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 'title'/'url' for flat items or 'title'/'items' for collapsible groups. url The 'mobileExtraLinks' array adds additional links at the bottom of the mobile sidebar. The 'authActions' array renders CTA buttons on the desktop navbar right side.","usageRequirements":{"requiredProps":["logo","menu"],"mediaSlots":{"logo":{"path":"logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":true,"note":"Brand logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"propConstraints":{"menu":{"minItems":2,"maxItems":8},"menu[].items":{"minItems":1,"maxItems":6},"authActions":{"minItems":0,"maxItems":2}}}},{"id":"navbar-transparent-overlay","name":"Navbar Transparent Overlay","title":"NavBar Transparent Overlay","category":"Navbar","categorySlug":"navbar","description":"A transparent navigation bar that transitions to solid on scroll. Logo and navigation links are visible against hero images or video backgrounds with appropriate contrast. Mobile view uses a full-screen overlay menu with large, centered navigation links that animate in with a staggered effect. The hamburger menu icon transforms into an X when open. Perfect for landing pages, portfolios, creative websites, and any page with prominent hero sections where the navbar should blend with the background initially.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290174/gvfzbh78ddz3wknqpo5d43nh01h4/navbar-transparent-overlay-desktop.png","mobile":"https://cdn.ing/assets/i/r/290175/mmgz8uf7ugk0n88esgvfk4evmlzu/navbar-transparent-overlay-mobile.png"},"componentPath":"blocks/navbars/navbar-transparent-overlay.tsx","code":"import { NavbarTransparentOverlay } from \"@opensite/ui/blocks/navbars/navbar-transparent-overlay\";\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      <NavbarTransparentOverlay\n        logo={{\n          url: \"/\",\n          src: brandLogoPlaceholders.black[0],\n          title: \"Portfolio\",\n          alt: \"Portfolio Logo\",\n        }}\n        navItems={[\n          { title: \"Work\", url: \"#\" },\n          { title: \"About\", url: \"#\" },\n          { title: \"Services\", url: \"#\" },\n          { title: \"Contact\", url: \"#\" },\n        ]}\n        authActions={[\n          {\n            label: \"Let's Talk\",\n            variant: \"outline\",\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 (will be inverted when transparent). LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"navItems":{"type":"array","description":"Navigation items","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":true}},"typeLabel":"NavItem"},"typeLabel":"NavItem[]","required":true,"minItems":2,"maxItems":6},"authActions":{"type":"array","description":"Authentication action configurations for desktop","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":2},"socialLinks":{"type":"object","description":"","minItems":0,"maxItems":6}},"exampleProps":{"logo":{"url":"/","src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","title":"Portfolio","alt":"Portfolio Logo"},"navItems":[{"title":"Work","url":"#"},{"title":"About","url":"#"},{"title":"Services","url":"#"},{"title":"Contact","url":"#"}],"authActions":[{"label":"Let's Talk","variant":"outline","href":"#"}]},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","transparent","overlay","scroll-transition","hero","landing-page","portfolio","creative","staggered-animation"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. The navbar starts transparent and adds a solid background after 50px of scroll. Logo images are inverted (white) when the navbar is transparent and not open. Mobile navigation opens as a fullscreen black overlay with large animated text links. The 'socialLinks' array uses 'platformName' (SocialPlatformName) and 'href'. The 'mobileAuthActions' array renders separately from desktop 'authActions'.","usageRequirements":{"requiredProps":["logo","navItems"],"mediaSlots":{"logo":{"path":"logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":true,"note":"Brand logo (will be inverted when transparent). LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"propConstraints":{"navItems":{"minItems":2,"maxItems":6},"authActions":{"minItems":0,"maxItems":2},"socialLinks":{"minItems":0,"maxItems":6}}}},{"id":"navbar-education-platform","name":"Navbar Education Platform","title":"NavBar Education Platform","category":"Navbar","categorySlug":"navbar","description":"A navigation bar designed for education and LMS platforms. Features two main dropdown menus: Products menu with tools and quick start sections including a featured image card for latest updates, and Support menu with guides and about us sections. Each menu item displays an icon, title, and description with hover animations. Mobile view uses accordion navigation with categorized sections. Ideal for online learning platforms, educational institutions, course marketplaces, and knowledge management systems.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290176/pty8dwgqae6oa5o3hj8t3xzdbocy/navbar-education-platform-desktop.png","mobile":"https://cdn.ing/assets/i/r/290177/9jv46cuqhctcng9dl14xsf9fe2rv/navbar-education-platform-mobile.png"},"componentPath":"blocks/navbars/navbar-education-platform.tsx","code":"import { NavbarEducationPlatform } from \"@opensite/ui/blocks/navbars/navbar-education-platform\";\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      <NavbarEducationPlatform\n      logo={{\n        url: \"/\",\n        src: brandLogoPlaceholders.black[0],\n        title: \"EduTech\",\n        alt: \"EduTech Logo\",\n      }}\n      menu={[\n        {\n          label: \"About\",\n          groups: [\n            {\n              label: \"Tools\",\n              links: [\n                {\n                  title: \"Course Builder\",\n                  description: \"Create engaging online courses\",\n                  icon: \"lucide/book-plus\",\n                  href: \"#\",\n                },\n                {\n                  title: \"Video Hosting\",\n                  description: \"Stream educational content\",\n                  icon: \"lucide/video\",\n                  href: \"#\",\n                },\n                {\n                  title: \"Student Dashboard\",\n                  description: \"Track progress and assignments\",\n                  icon: \"lucide/gauge\",\n                  href: \"#\",\n                },\n                {\n                  title: \"Live Classes\",\n                  description: \"Interactive virtual classrooms\",\n                  icon: \"lucide/monitor-play\",\n                  href: \"#\",\n                },\n              ],\n              featuredImage: {\n                src: \"https://toastability-production.s3.amazonaws.com/ygob90kp07hxmi5jj4sned76dnmc\",\n                alt: \"Latest platform updates\",\n                href: \"#updates\",\n              },\n            },\n          ],\n        },\n        {\n          label: \"Resources\",\n          groups: [\n            {\n              label: \"Links\",\n              links: [\n                {\n                  title: \"Getting Started\",\n                  description: \"Set up your first course\",\n                  icon: \"lucide/rocket\",\n                  href: \"#\",\n                },\n                {\n                  title: \"Teacher Guide\",\n                  description: \"Best practices for educators\",\n                  icon: \"lucide/user-check\",\n                  href: \"#\",\n                },\n                {\n                  title: \"API Documentation\",\n                  description: \"Integrate with your systems\",\n                  icon: \"lucide/code-2\",\n                  href: \"#\",\n                },\n              ],\n            },\n          ],\n        },\n        {\n          label: \"Company\",\n          groups: [\n            {\n              label: \"About\",\n              links: [\n                {\n                  title: \"About Us\",\n                  icon: \"lucide/building-2\",\n                  href: \"#\",\n                },\n                {\n                  title: \"Careers\",\n                  icon: \"lucide/briefcase\",\n                  href: \"#\",\n                },\n                {\n                  title: \"Contact\",\n                  icon: \"lucide/mail\",\n                  href: \"#\",\n                },\n              ],\n            },\n          ],\n        },\n        {\n          label: \"Pricing\",\n          href: \"#pricing\",\n        },\n      ]}\n      authActions={[\n        {\n          label: \"Login\",\n          variant: \"link\",\n          size: \"sm\",\n          href: \"#\",\n          asButton: true,\n        },\n        {\n          label: \"Get Started\",\n          variant: \"outline\",\n          size: \"sm\",\n          href: \"#\",\n          asButton: true,\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. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"menu":{"type":"array","description":"Navigation menu items - can be simple links or dropdowns with grouped links","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":6,"mediaHints":{"path":"menu[].groups[].featuredImage.src","roles":["feature","thumbnail"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Featured image displayed alongside the group links. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"menu[].groups":{"type":"object","description":"","minItems":1,"maxItems":3},"menu[].groups[].links":{"type":"object","description":"","minItems":1,"maxItems":6}},"exampleProps":{"logo":{"url":"/","src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","title":"EduTech","alt":"EduTech Logo"},"menu":[{"label":"Platform","groups":[{"label":"Tools","links":[{"title":"Course Builder","description":"Create engaging online courses","icon":"lucide/book-plus","href":"#"},{"title":"Video Hosting","description":"Stream educational content","icon":"lucide/video","href":"#"},{"title":"Student Dashboard","description":"Track progress and assignments","icon":"lucide/gauge","href":"#"}],"featuredImage":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Latest platform updates","href":"#"}}]},{"label":"Resources","groups":[{"label":"Links","links":[{"title":"Getting Started","description":"Set up your first course","icon":"lucide/rocket","href":"#"}]}]},{"label":"Pricing","href":"#"}],"authActions":[{"label":"Login","variant":"link","size":"sm","href":"#","asButton":true},{"label":"Get Started","variant":"outline","size":"sm","href":"#","asButton":true}]},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","education","lms","learning","courses","support","documentation","knowledge-base","e-learning"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Menu items use 'label'/'href' for flat links and 'label'/'groups' for dropdown panels. alt The 'featuredImage.src' must be an absolute URL. The 'authActions' and 'mobileAuthActions' accept separate configurations.","usageRequirements":{"requiredProps":["logo","menu"],"mediaSlots":{"logo":{"path":"logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":true,"note":"Brand logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."},"menu[].groups[].featuredImage.src":{"path":"menu[].groups[].featuredImage.src","roles":["feature","thumbnail"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Featured image displayed alongside the group links. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"propConstraints":{"menu":{"minItems":2,"maxItems":6},"menu[].groups":{"minItems":1,"maxItems":3},"menu[].groups[].links":{"minItems":1,"maxItems":6},"authActions":{"minItems":0,"maxItems":3}}}},{"id":"navbar-sticky-compact","name":"Navbar Sticky Compact","title":"NavBar Sticky Compact","category":"Navbar","categorySlug":"navbar","description":"A compact sticky navigation bar that shrinks on scroll to maximize content space. The logo shrinks and padding reduces as the user scrolls down, maintaining navigation accessibility while giving more room to content. Desktop view shows dropdown menus with icons, while mobile view uses a slide-out sheet from the right. The smooth transition between normal and compact states provides a polished user experience. Ideal for content-heavy sites, blogs, documentation, and any website where vertical space is valuable.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290178/tin1i4gses01dabto9uezmat03az/navbar-sticky-compact-desktop.png","mobile":"https://cdn.ing/assets/i/r/290179/869c4ipcp0kfzvm4zxlt536p6qsk/navbar-sticky-compact-mobile.png"},"componentPath":"blocks/navbars/navbar-sticky-compact.tsx","code":"import { NavbarStickyCompact } from \"@opensite/ui/blocks/navbars/navbar-sticky-compact\";\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      <NavbarStickyCompact\n      logo={{\n        url: \"/\",\n        src: brandLogoPlaceholders.black[0],\n        alt: \"Brand Logo\",\n      }}\n      menu={[\n        { title: \"Home\", url: \"#\" },\n        { title: \"Features\", url: \"#\" },\n        { title: \"Pricing\", url: \"#\" },\n        { title: \"About\", url: \"#\" },\n        { title: \"Blog\", url: \"#\" },\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":true,"mediaHints":{"path":"logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":true,"note":"Brand logo. 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":2}},"exampleProps":{"logo":{"url":"/","src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"menu":[{"title":"Home","url":"#"},{"title":"Features","url":"#"},{"title":"Pricing","url":"#"},{"title":"About","url":"#"},{"title":"Blog","url":"#"}],"authActions":[{"label":"Sign Up","variant":"outline","href":"#","asButton":true,"size":"sm"}]},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","sticky","compact","shrink-on-scroll","space-efficient","content-heavy","blog","documentation","smooth-transition"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. The navbar shrinks vertically after the user scrolls past a threshold. Menu items use 'title'/'url' for flat links or 'title'/'items' for dropdowns. url The 'authActions' array renders on the right side.","usageRequirements":{"requiredProps":["logo","menu"],"mediaSlots":{"logo":{"path":"logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":true,"note":"Brand logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"propConstraints":{"menu":{"minItems":2,"maxItems":7},"authActions":{"minItems":0,"maxItems":2}}}},{"id":"navbar-simple-links","name":"Navbar Simple Links","title":"NavBar Simple Links","category":"Navbar","categorySlug":"navbar","description":"A clean, minimal navigation bar with animated active indicator. Features horizontal navigation links with an animated underline indicator that slides smoothly to show the currently active item. The simple design focuses on essential navigation without dropdowns or complex menus. Desktop view shows all links inline with the sliding indicator, while mobile uses a popover menu with a left border indicator for the active item. Perfect for simple marketing sites, portfolios, personal websites, and landing pages that need straightforward navigation.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290182/l8e4x4t2pogqqanbduuct41kjgfp/navbar-simple-links-desktop.png","mobile":"https://cdn.ing/assets/i/r/290183/2qlvsq9tbg0jc7ebrz32suekrg3n/navbar-simple-links-mobile.png"},"componentPath":"blocks/navbars/navbar-simple-links.tsx","code":"import { NavbarSimpleLinks } from \"@opensite/ui/blocks/navbars/navbar-simple-links\";\nimport { brandLogoPlaceholders } from \"@/lib/media\";\nimport { DynamicIcon } from \"@opensite/ui\";\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      <NavbarSimpleLinks\n      logo={{\n        url: \"/\",\n        src: brandLogoPlaceholders.black[0],\n        title: \"SimpleSite\",\n        alt: \"SimpleSite Logo\",\n      }}\n      navItems={[\n        { name: \"Home\", link: \"#\" },\n        { name: \"About\", link: \"#\" },\n        { name: \"Services\", link: \"#\" },\n        { name: \"Portfolio\", link: \"#\" },\n        { name: \"Contact\", link: \"#\" },\n      ]}\n      defaultActiveItem=\"Home\"\n      actions={[\n        {\n          label: \"Get Started\",\n          href: \"#\",\n          asButton: true,\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right-circle\" />,\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. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"navItems":{"type":"array","description":"Navigation items array","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":true}},"typeLabel":"NavItem"},"typeLabel":"NavItem[]","required":true,"minItems":2,"maxItems":7},"defaultActiveItem":{"type":"string","description":"Initial active item name","required":false},"actions":{"type":"array","description":"Authentication/CTA 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":2}},"exampleProps":{"logo":{"url":"/","src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","title":"SimpleSite","alt":"SimpleSite Logo"},"navItems":[{"name":"Home","link":"#"},{"name":"About","link":"#"},{"name":"Services","link":"#"},{"name":"Portfolio","link":"#"},{"name":"Contact","link":"#"}],"defaultActiveItem":"Home","actions":[{"label":"Get Started","href":"#","asButton":true}]},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","simple","minimal","animated-indicator","underline","clean","portfolio","landing-page","straightforward"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Navigation items use 'name'/'link' fields (not 'title'/'url' — this is different from other navbars). The 'defaultActiveItem' string sets which nav item is highlighted by default (must match a 'name' value). The 'mobileActions' array configures mobile-specific CTAs.","usageRequirements":{"requiredProps":["logo","navItems"],"mediaSlots":{"logo":{"path":"logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":true,"note":"Brand logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"propConstraints":{"navItems":{"minItems":2,"maxItems":7},"actions":{"minItems":0,"maxItems":2}}}},{"id":"navbar-split-cta","name":"Navbar Split CTA","title":"NavBar Split CTA","category":"Navbar","categorySlug":"navbar","description":"A navigation bar with split primary and secondary call-to-action buttons. Features a balanced layout with navigation links on the left and two distinct CTA buttons on the right: a secondary outline button and a primary filled button. Dropdown menus display items with icons and descriptions in a clean list format. Mobile view uses a slide-out sheet with CTAs prominently displayed at the top. Ideal for SaaS products and services that want to emphasize both login/signup actions or demo/trial options simultaneously.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290184/0ycscbhxn2vghnbpngg2yyjn8pko/navbar-split-cta-desktop.png","mobile":"https://cdn.ing/assets/i/r/290185/rdpqu6uc3jsklqf9flj5eoad68dh/navbar-split-cta-mobile.png"},"componentPath":"blocks/navbars/navbar-split-cta.tsx","code":"import { NavbarSplitCta } from \"@opensite/ui/blocks/navbars/navbar-split-cta\";\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      <NavbarSplitCta\n      logo={{\n        url: \"/\",\n        src: brandLogoPlaceholders.black[0],\n        title: \"StartupCo\",\n        alt: \"StartupCo Logo\",\n      }}\n      menu={[\n        { title: \"Product\", url: \"#\" },\n        { title: \"Features\", url: \"#\" },\n        { title: \"Pricing\", url: \"#\" },\n        { title: \"Company\", url: \"#\" },\n      ]}\n      authActions={[\n        {\n          label: \"Start Free Trial\",\n          href: \"#\",\n          asButton: true,\n          variant: \"link\",\n        },\n        {\n          label: \"Book a Demo\",\n          href: \"#\",\n          asButton: true,\n          variant: \"default\",\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. 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":6},"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":1,"maxItems":2}},"exampleProps":{"logo":{"url":"/","src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","title":"StartupCo","alt":"StartupCo Logo"},"menu":[{"title":"Product","url":"#"},{"title":"Features","url":"#"},{"title":"Pricing","url":"#"},{"title":"Company","url":"#"}],"authActions":[{"label":"Start Free Trial","href":"#","asButton":true,"variant":"link"},{"label":"Book a Demo","href":"#","asButton":true,"variant":"default"}]},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","split-cta","dual-buttons","login-signup","demo-trial","saas","conversion","balanced-layout","prominent-cta"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. The 'authActions' should contain exactly 2 items for the split CTA effect: one with variant 'link' or 'ghost' and one with variant 'default'. Menu items use 'title'/'url' for flat links or 'title'/'items' for dropdown sub-items. url description","usageRequirements":{"requiredProps":["logo","menu"],"mediaSlots":{"logo":{"path":"logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":true,"note":"Brand logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"propConstraints":{"menu":{"minItems":2,"maxItems":6},"authActions":{"minItems":1,"maxItems":2}}}},{"id":"navbar-icon-links","name":"Navbar Icon Links","title":"NavBar Icon Links","category":"Navbar","categorySlug":"navbar","description":"A compact navigation bar with icon-only links and tooltips. Features a minimalist design with icon-only navigation links that display tooltips on hover to reveal the link label. This approach maximizes horizontal space while maintaining accessibility through tooltips. The active state is indicated by a highlighted background. Mobile view uses a slide-out sheet with full text labels. Ideal for dashboards, admin panels, applications, and interfaces where users are familiar with the navigation structure and icon meanings.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290457/9hxc4wfq9dy6ed1vvc6mqesbazbn/cleanshot-2026-02-19-at-05-18-03-2x.png","mobile":"https://cdn.ing/assets/i/r/290457/9hxc4wfq9dy6ed1vvc6mqesbazbn/cleanshot-2026-02-19-at-05-18-03-2x.png"},"componentPath":"blocks/navbars/navbar-icon-links.tsx","code":"import { NavbarIconLinks } from \"@opensite/ui/blocks/navbars/navbar-icon-links\";\nimport { brandLogoPlaceholders } from \"@/lib/media\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\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      <NavbarIconLinks\n      logo={{\n        url: \"/\",\n        src: brandLogoPlaceholders.black[0],\n        title: \"IconNav\",\n        alt: \"IconNav Logo\",\n      }}\n      navItems={[\n        {\n          title: \"Dashboard\",\n          url: \"#\",\n          icon: \"lucide/layout-dashboard\",\n        },\n        {\n          title: \"Analytics\",\n          url: \"#\",\n          icon: \"lucide/bar-chart-3\",\n        },\n        {\n          title: \"Projects\",\n          url: \"#\",\n          icon: \"lucide/folder\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n          icon: \"lucide/users\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n          icon: \"lucide/settings\",\n        },\n      ]}\n      authActions={[\n        {\n          label: \"Notifications\",\n          variant: \"ghost\",\n          href: \"#\",\n          icon: <DynamicIcon name=\"lucide/bell\" size={16} />,\n        },\n        {\n          label: \"Profile\",\n          variant: \"ghost\",\n          href: \"#\",\n          icon: <DynamicIcon name=\"lucide/user\" size={16} />,\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. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"navItems":{"type":"array","description":"Navigation items with icons","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":true}},"typeLabel":"NavItem"},"typeLabel":"NavItem[]","required":true,"minItems":3,"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":"IconNav","alt":"IconNav Logo"},"navItems":[{"title":"Dashboard","url":"#","icon":"lucide/layout-dashboard"},{"title":"Analytics","url":"#","icon":"lucide/bar-chart-3"},{"title":"Projects","url":"#","icon":"lucide/folder"},{"title":"Team","url":"#","icon":"lucide/users"},{"title":"Settings","url":"#","icon":"lucide/settings"}],"authActions":[{"label":"Notifications","variant":"ghost","href":"#","icon":"lucide/bell"},{"label":"Profile","variant":"ghost","href":"#","icon":"lucide/user"}]},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","icon-only","tooltips","compact","minimalist","dashboard","admin-panel","application","space-efficient"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Every item in 'navItems' MUST include an 'icon' (DynamicIconName) — this field is required. Items use 'title'/'url'/'icon' — there are no dropdown sub-items. Tooltips automatically display the 'title' on hover. The 'authActions' array renders on the right — typically icon buttons for notifications and profile.","usageRequirements":{"requiredProps":["logo","navItems"],"mediaSlots":{"logo":{"path":"logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":true,"note":"Brand logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"propConstraints":{"navItems":{"minItems":3,"maxItems":7},"authActions":{"minItems":0,"maxItems":3}}}},{"id":"navbar-tabbed-sections","name":"Navbar Tabbed Sections","title":"NavBar Tabbed Sections","category":"Navbar","categorySlug":"navbar","description":"A navigation bar with tabbed dropdown menus for organized content. Features dropdown menus that use tabs to organize content into distinct sections. Each tab displays a list of links with icons and descriptions, and optionally a featured content card with an image. Tabs allow users to quickly switch between different categories within the same dropdown without closing it. Mobile view uses a slide-out sheet with expandable sections. Ideal for products with many features organized into logical categories, enterprise software, and platforms with diverse offerings.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290188/xs5xl2efok5gritv452msypkz3s3/navbar-tabbed-sections-desktop.png","mobile":"https://cdn.ing/assets/i/r/290189/kbef8vhhujdzy3r1s9hey9ix0r74/navbar-tabbed-sections-mobile.png"},"componentPath":"blocks/navbars/navbar-tabbed-sections.tsx","code":"import { NavbarTabbedSections } from \"@opensite/ui/blocks/navbars/navbar-tabbed-sections\";\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      <NavbarTabbedSections\n        logo={{\n          url: \"/\",\n          src: brandLogoPlaceholders.black[0],\n          title: \"TabbedNav\",\n          alt: \"TabbedNav Logo\",\n        }}\n        menu={[\n          {\n            title: \"Products\",\n            tabs: [\n              {\n                id: \"core-features\",\n                title: \"Core Features\",\n                links: [\n                  {\n                    title: \"Dashboard\",\n                    url: \"#\",\n                    description: \"Centralized command center\",\n                    icon: \"lucide/layout-dashboard\",\n                  },\n                  {\n                    title: \"Analytics\",\n                    url: \"#\",\n                    description: \"Track your business metrics\",\n                    icon: \"lucide/bar-chart\",\n                  },\n                  {\n                    title: \"Reports\",\n                    url: \"#\",\n                    description: \"Generate detailed insights\",\n                    icon: \"lucide/file-text\",\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                    title: \"Email Campaigns\",\n                    url: \"#\",\n                    description: \"Automated email marketing\",\n                    icon: \"lucide/mail\",\n                  },\n                ],\n              },\n              {\n                id: \"advanced\",\n                title: \"Advanced Tools\",\n                links: [\n                  {\n                    title: \"Automation\",\n                    url: \"#\",\n                    description: \"Workflow automation\",\n                    icon: \"lucide/zap\",\n                  },\n                  {\n                    title: \"Integrations\",\n                    url: \"#\",\n                    description: \"Connect your tools\",\n                    icon: \"lucide/plug\",\n                  },\n                  {\n                    title: \"API Gateway\",\n                    url: \"#\",\n                    description: \"RESTful API access\",\n                    icon: \"lucide/code-2\",\n                  },\n                  {\n                    title: \"Webhooks\",\n                    url: \"#\",\n                    description: \"Real-time event notifications\",\n                    icon: \"lucide/webhook\",\n                  },\n                  {\n                    title: \"Custom Fields\",\n                    url: \"#\",\n                    description: \"Flexible data structures\",\n                    icon: \"lucide/database\",\n                  },\n                ],\n              },\n              {\n                id: \"collaboration\",\n                title: \"Collaboration\",\n                links: [\n                  {\n                    title: \"Team Chat\",\n                    url: \"#\",\n                    description: \"Real-time messaging\",\n                    icon: \"lucide/message-circle\",\n                  },\n                  {\n                    title: \"Video Calls\",\n                    url: \"#\",\n                    description: \"Face-to-face meetings\",\n                    icon: \"lucide/video\",\n                  },\n                  {\n                    title: \"File Sharing\",\n                    url: \"#\",\n                    description: \"Secure document exchange\",\n                    icon: \"lucide/folder-open\",\n                  },\n                  {\n                    title: \"Task Management\",\n                    url: \"#\",\n                    description: \"Project collaboration\",\n                    icon: \"lucide/check-square\",\n                  },\n                  {\n                    title: \"Calendar\",\n                    url: \"#\",\n                    description: \"Schedule and organize\",\n                    icon: \"lucide/calendar\",\n                  },\n                ],\n              },\n            ],\n          },\n          {\n            title: \"Solutions\",\n            tabs: [\n              {\n                id: \"by-industry\",\n                title: \"By Industry\",\n                links: [\n                  {\n                    title: \"E-commerce\",\n                    url: \"#\",\n                    description: \"Online retail solutions\",\n                    icon: \"lucide/shopping-cart\",\n                  },\n                  {\n                    title: \"SaaS\",\n                    url: \"#\",\n                    description: \"Software as a service\",\n                    icon: \"lucide/cloud\",\n                  },\n                  {\n                    title: \"Healthcare\",\n                    url: \"#\",\n                    description: \"Medical solutions\",\n                    icon: \"lucide/heart-pulse\",\n                  },\n                  {\n                    title: \"Finance\",\n                    url: \"#\",\n                    description: \"Banking and fintech\",\n                    icon: \"lucide/wallet\",\n                  },\n                  {\n                    title: \"Education\",\n                    url: \"#\",\n                    description: \"Learning management systems\",\n                    icon: \"lucide/graduation-cap\",\n                  },\n                  {\n                    title: \"Real Estate\",\n                    url: \"#\",\n                    description: \"Property management tools\",\n                    icon: \"lucide/building-2\",\n                  },\n                ],\n              },\n              {\n                id: \"by-team\",\n                title: \"By Team\",\n                links: [\n                  {\n                    title: \"Marketing Teams\",\n                    url: \"#\",\n                    description: \"Campaign management tools\",\n                    icon: \"lucide/megaphone\",\n                  },\n                  {\n                    title: \"Sales Teams\",\n                    url: \"#\",\n                    description: \"Pipeline and deal tracking\",\n                    icon: \"lucide/trending-up\",\n                  },\n                  {\n                    title: \"Support Teams\",\n                    url: \"#\",\n                    description: \"Customer service platform\",\n                    icon: \"lucide/headphones\",\n                  },\n                  {\n                    title: \"Development Teams\",\n                    url: \"#\",\n                    description: \"Code collaboration tools\",\n                    icon: \"lucide/code\",\n                  },\n                  {\n                    title: \"Design Teams\",\n                    url: \"#\",\n                    description: \"Creative workflow management\",\n                    icon: \"lucide/palette\",\n                  },\n                  {\n                    title: \"HR Teams\",\n                    url: \"#\",\n                    description: \"People management platform\",\n                    icon: \"lucide/user-check\",\n                  },\n                ],\n              },\n              {\n                id: \"by-company-size\",\n                title: \"By Company Size\",\n                links: [\n                  {\n                    title: \"Startups\",\n                    url: \"#\",\n                    description: \"Launch and grow your business\",\n                    icon: \"lucide/rocket\",\n                  },\n                  {\n                    title: \"Small Business\",\n                    url: \"#\",\n                    description: \"Scale your operations\",\n                    icon: \"lucide/briefcase\",\n                  },\n                  {\n                    title: \"Mid-Market\",\n                    url: \"#\",\n                    description: \"Enterprise-ready features\",\n                    icon: \"lucide/building\",\n                  },\n                  {\n                    title: \"Enterprise\",\n                    url: \"#\",\n                    description: \"Large-scale deployments\",\n                    icon: \"lucide/landmark\",\n                  },\n                ],\n              },\n            ],\n          },\n          {\n            title: \"Resources\",\n            tabs: [\n              {\n                id: \"learn\",\n                title: \"Learn\",\n                links: [\n                  {\n                    title: \"Documentation\",\n                    url: \"#\",\n                    description: \"Complete guides and API examples\",\n                    icon: \"lucide/book-open\",\n                  },\n                  {\n                    title: \"Video Tutorials\",\n                    url: \"#\",\n                    description: \"Step-by-step video guides\",\n                    icon: \"lucide/video\",\n                  },\n                  {\n                    title: \"Webinars\",\n                    url: \"#\",\n                    description: \"Live training sessions\",\n                    icon: \"lucide/presentation\",\n                  },\n                  {\n                    title: \"Blog\",\n                    url: \"#\",\n                    description: \"Latest updates and insights\",\n                    icon: \"lucide/newspaper\",\n                  },\n                  {\n                    title: \"Courses\",\n                    url: \"#\",\n                    description: \"In-depth learning paths\",\n                    icon: \"lucide/graduation-cap\",\n                  },\n                ],\n              },\n              {\n                id: \"support\",\n                title: \"Support\",\n                links: [\n                  {\n                    title: \"Help Center\",\n                    url: \"#\",\n                    description: \"Find answers to common questions\",\n                    icon: \"lucide/help-circle\",\n                  },\n                  {\n                    title: \"Community Forum\",\n                    url: \"#\",\n                    description: \"Connect with other users\",\n                    icon: \"lucide/users\",\n                  },\n                  {\n                    title: \"Contact Support\",\n                    url: \"#\",\n                    description: \"Get help from our team\",\n                    icon: \"lucide/message-square\",\n                  },\n                  {\n                    title: \"System Status\",\n                    url: \"#\",\n                    description: \"Check platform uptime\",\n                    icon: \"lucide/activity\",\n                  },\n                  {\n                    title: \"Report a Bug\",\n                    url: \"#\",\n                    description: \"Submit technical issues\",\n                    icon: \"lucide/bug\",\n                  },\n                ],\n              },\n              {\n                id: \"developers\",\n                title: \"Developers\",\n                links: [\n                  {\n                    title: \"API Reference\",\n                    url: \"#\",\n                    description: \"Complete API documentation\",\n                    icon: \"lucide/code-2\",\n                  },\n                  {\n                    title: \"SDKs & Libraries\",\n                    url: \"#\",\n                    description: \"Official client libraries\",\n                    icon: \"lucide/package\",\n                  },\n                  {\n                    title: \"Code Examples\",\n                    url: \"#\",\n                    description: \"Sample implementations\",\n                    icon: \"lucide/file-code\",\n                  },\n                  {\n                    title: \"Changelog\",\n                    url: \"#\",\n                    description: \"API version history\",\n                    icon: \"lucide/git-commit\",\n                  },\n                  {\n                    title: \"Sandbox\",\n                    url: \"#\",\n                    description: \"Test in development mode\",\n                    icon: \"lucide/terminal\",\n                  },\n                ],\n              },\n              {\n                id: \"company\",\n                title: \"Company\",\n                links: [\n                  {\n                    title: \"About Us\",\n                    url: \"#\",\n                    description: \"Learn about our mission\",\n                    icon: \"lucide/info\",\n                  },\n                  {\n                    title: \"Case Studies\",\n                    url: \"#\",\n                    description: \"Customer success stories\",\n                    icon: \"lucide/file-text\",\n                  },\n                  {\n                    title: \"Partners\",\n                    url: \"#\",\n                    description: \"Partner ecosystem\",\n                    icon: \"lucide/handshake\",\n                  },\n                  {\n                    title: \"Careers\",\n                    url: \"#\",\n                    description: \"Join our team\",\n                    icon: \"lucide/briefcase\",\n                  },\n                  {\n                    title: \"Press Kit\",\n                    url: \"#\",\n                    description: \"Media resources\",\n                    icon: \"lucide/image\",\n                  },\n                ],\n              },\n            ],\n          },\n        ]}\n        authActions={[\n          {\n            label: \"Sign In\",\n            variant: \"ghost\",\n            href: \"#\",\n          },\n          {\n            label: \"Get Started\",\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. 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":1,"maxItems":5,"mediaHints":{"path":"menu[].tabs[].featured.image","roles":["feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Featured card image inside the tabbed dropdown panel. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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":2},"menu[].tabs":{"type":"object","description":"","minItems":1,"maxItems":6},"menu[].tabs[].links":{"type":"object","description":"","minItems":1,"maxItems":8}},"exampleProps":{"logo":{"url":"/","src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","title":"TabbedNav","alt":"TabbedNav Logo"},"menu":[{"title":"Products","tabs":[{"id":"core-features","title":"Core Features","links":[{"title":"Dashboard","url":"#","description":"Centralized command center","icon":"lucide/layout-dashboard"},{"title":"Analytics","url":"#","description":"Track your business metrics","icon":"lucide/bar-chart"}]},{"id":"advanced","title":"Advanced Tools","links":[{"title":"Automation","url":"#","description":"Workflow automation","icon":"lucide/zap"}],"featured":{"title":"New Feature","description":"Check out our latest addition","url":"#","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"}}]}],"authActions":[{"label":"Sign In","variant":"ghost","href":"#"},{"label":"Get Started","variant":"default","href":"#"}]},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","tabbed","organized","categories","featured-content","enterprise","diverse-offerings","multi-section","switchable"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. title Each tab's 'featured' object with 'image' must use an absolute URL. Tabs without a 'featured' field show a simple link grid. The 'authActions' array renders on the right side of the navbar.","usageRequirements":{"requiredProps":["logo","menu"],"mediaSlots":{"logo":{"path":"logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":true,"note":"Brand logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."},"menu[].tabs[].featured.image":{"path":"menu[].tabs[].featured.image","roles":["feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Featured card image inside the tabbed dropdown panel. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"propConstraints":{"menu":{"minItems":1,"maxItems":5},"menu[].tabs":{"minItems":1,"maxItems":6},"menu[].tabs[].links":{"minItems":1,"maxItems":8},"authActions":{"minItems":0,"maxItems":2}}}},{"id":"navbar-fullscreen-menu","name":"Navbar Fullscreen Menu","title":"NavBar Fullscreen Menu","category":"Navbar","categorySlug":"navbar","description":"A dramatic navigation bar with fullscreen overlay navigation. Features a minimal header with logo and MENU/CLOSE text toggle. When activated, a fullscreen overlay appears with large, centered menu items that animate in with blur effects on hover. Social links appear at the bottom with staggered animations. The theatrical presentation creates a memorable navigation experience. Perfect for creative agencies, portfolios, artistic websites, fashion brands, and any site that wants to make a bold visual statement with their navigation.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290190/dyadtk2onqlgelljvple5d6ewjxe/navbar-fullscreen-menu-desktop.png","mobile":"https://cdn.ing/assets/i/r/290191/2dqtlah0m9h03h3e0xwwsu2u6hwq/navbar-fullscreen-menu-mobile.png"},"componentPath":"blocks/navbars/navbar-fullscreen-menu.tsx","code":"import { NavbarFullscreenMenu } from \"@opensite/ui/blocks/navbars/navbar-fullscreen-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      <NavbarFullscreenMenu\n      logo={{\n        url: \"/\",\n        src: brandLogoPlaceholders.black[0],\n        title: \"Creative Studio\",\n        alt: \"Creative Studio Logo\",\n      }}\n      menuItems={[\n        { label: \"Services\", href: \"#\" },\n        { label: \"Branding\", href: \"#\" },\n        { label: \"Web Design\", href: \"#\" },\n        { label: \"Development\", href: \"#\" },\n        { label: \"Work\", href: \"#\" },\n        { label: \"Case Studies\", href: \"#\" },\n        { label: \"Portfolio\", href: \"#\" },\n        { label: \"About\", href: \"#\" },\n        { label: \"Our Story\", href: \"#\" },\n        { label: \"Team\", href: \"#\" },\n        { label: \"Contact\", href: \"#\" },\n      ]}\n      socialLinks={[\n        { platformName: \"x\", label: \"twitter\", href: \"https://twitter.com\" },\n        {\n          platformName: \"instagram\",\n          label: \"instagram\",\n          href: \"https://instagram.com\",\n        },\n        {\n          platformName: \"linkedin\",\n          label: \"linkedin\",\n          href: \"https://linkedin.com\",\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. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"menuItems":{"type":"array","description":"Menu items for fullscreen navigation","items":{"type":"object","description":"","fields":{"label":{"type":"string","description":"","required":true},"href":{"type":"string","description":"","required":true}},"typeLabel":"MenuItem"},"typeLabel":"MenuItem[]","required":true,"minItems":3,"maxItems":12},"socialLinks":{"type":"array","description":"Social links displayed at bottom of fullscreen menu","items":{"type":"object","description":"","fields":{"platformName":{"type":"object","description":"Social platform name - determines which icon to display","typeLabel":"SocialPlatformName","required":true},"href":{"type":"string","description":"URL to the social profile","required":true},"label":{"type":"string","description":"Optional label for accessibility (defaults to platform name)","required":false}},"typeLabel":"NavbarFullscreenMenuSocialLink"},"typeLabel":"NavbarFullscreenMenuSocialLink[]","required":false,"minItems":0,"maxItems":6}},"exampleProps":{"logo":{"url":"/","src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","title":"Creative Studio","alt":"Creative Studio Logo"},"menuItems":[{"label":"Services","href":"#"},{"label":"Branding","href":"#"},{"label":"Web Design","href":"#"},{"label":"Development","href":"#"},{"label":"Work","href":"#"},{"label":"About","href":"#"},{"label":"Contact","href":"#"}],"socialLinks":[{"platformName":"x","label":"Twitter","href":"https://twitter.com"},{"platformName":"instagram","label":"Instagram","href":"https://instagram.com"},{"platformName":"linkedin","label":"LinkedIn","href":"https://linkedin.com"}]},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","fullscreen","overlay","dramatic","creative","portfolio","artistic","fashion","theatrical","animated"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. The 'menuItems' array uses 'label'/'href' fields (not 'title'/'url'). There are no 'authActions' — the fullscreen menu is the sole navigation mechanism. href The overlay animation staggers each link entry — more items create a longer stagger sequence.","usageRequirements":{"requiredProps":["logo","menuItems"],"mediaSlots":{"logo":{"path":"logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":true,"note":"Brand logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"propConstraints":{"menuItems":{"minItems":3,"maxItems":12},"socialLinks":{"minItems":0,"maxItems":6}}}}]},"timestamp":"2026-06-27T18:51:10.487Z"}