{"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":false},"menu":{"type":"array","description":"Navigation menu items","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":false},"tabs":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":true},"title":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false},"links":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":false},"url":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false}},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }"},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }[]","required":true},"featured":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":true},"image":{"type":"string","description":"","required":true}},"typeLabel":"{ title: string; description: string; url: string; image: string; }","required":false}},"typeLabel":"TabItem"},"typeLabel":"TabItem[]","required":false}},"typeLabel":"MenuItem"},"typeLabel":"MenuItem[]","required":false},"authActions":{"type":"array","description":"Authentication action configurations","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","header","dropdown","menu","responsive","mobile-menu","sheet","accordion","cta-buttons"],"performance":{},"importantUsageNotes":"Use this navbar when the site needs a standard SaaS-style navigation with 4 top-level 'menu' items where some items open standard dropdown menus — well-suited for product-led sites with Features, Solutions, flat Resources, and flat Pricing links. The demo uses exactly 4 menu items: 'Features' with 4 icon-linked dropdown 'items', 'Solutions' with 3 icon-linked dropdown 'items', and 2 flat href items; each dropdown item supports 'title', 'url', 'description', and 'icon' (lucide name) — use 3-5 sub-items per dropdown. The 'authActions' prop accepts 1-2 buttons: the demo shows a ghost 'Login' and a default 'Start Free Trial' — use a non-default variant (ghost or link) for the first and 'default' for the primary CTA. Only set 'logo.src' if a real brand logo exists in the media library; otherwise omit 'logo.src' and rely on 'logo.title' as plain text. Only use real internal route hrefs and important external URLs — do not invent or guess routes. The mobile menu is built into this block — do not strip it or override its behavior; preserve the demo's mobile structure. Follow the example props closely for this block — the demo encodes the canonical layout, and deviating from it will produce broken or unusable navigation."},{"id":"navbar-centered-menu","name":"Navbar Centered Menu","title":"NavBar Centered Menu","category":"Navbar","categorySlug":"navbar","description":"A navigation bar with centered navigation links and dropdown menus that appear directly below each trigger. Features logo on the left, centered navigation with dropdowns, and CTA buttons on the right. Uses a custom NavigationMenu implementation that centers dropdown content below each menu item rather than spanning the full width. Mobile view uses a sheet with accordion navigation. Perfect for brands that want a balanced, symmetrical header layout.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290152/r1rsnx5tjtc304cyf3dngmfsqdyh/navbar-centered-menu-desktop.png","mobile":"https://cdn.ing/assets/i/r/290153/qkha1sruf9hd9z99x0u9rlvvl24t/navbar-centered-menu-mobile.png"},"componentPath":"blocks/navbars/navbar-centered-menu.tsx","code":"import { NavbarCenteredMenu } from \"@opensite/ui/blocks/navbars/navbar-centered-menu\";\nimport { brandLogoPlaceholders } from \"@/lib/media\";\nimport CarouselAnimatedSections from \"@/blocks/carousel/carousel-animated-sections\";\nimport FeatureShowcase from \"@/blocks/features/feature-showcase\";\nimport FaqSplitHelp from \"@/blocks/faq/faq-split-help\";\n\nexport default function Demo() {\n  return (\n    <>\n      <NavbarCenteredMenu\n        logo={{\n          url: \"/\",\n          src: brandLogoPlaceholders.black[0],\n          title: \"Company\",\n          alt: \"Company Logo\",\n        }}\n        menu={[\n          {\n            title: \"Products\",\n            url: \"#\",\n            items: [\n              {\n                title: \"Analytics\",\n                url: \"#\",\n                description: \"Track your business metrics\",\n                icon: \"lucide/bar-chart\",\n              },\n              {\n                title: \"Marketing\",\n                url: \"#\",\n                description: \"Grow your audience\",\n                icon: \"lucide/megaphone\",\n              },\n              {\n                title: \"Sales CRM\",\n                url: \"#\",\n                description: \"Manage customer relationships\",\n                icon: \"lucide/users\",\n              },\n            ],\n          },\n          {\n            title: \"Solutions\",\n            url: \"#\",\n            items: [\n              {\n                title: \"Enterprise\",\n                url: \"#\",\n                description: \"For large organizations\",\n                icon: \"lucide/building\",\n              },\n              {\n                title: \"Small Business\",\n                url: \"#\",\n                description: \"For growing companies\",\n                icon: \"lucide/briefcase\",\n              },\n            ],\n          },\n          {\n            title: \"Resources\",\n            url: \"#\",\n          },\n          {\n            title: \"Pricing\",\n            url: \"#\",\n          },\n        ]}\n        authActions={[\n          {\n            label: \"Sign Up\",\n            variant: \"outline\",\n            href: \"#\",\n            asButton: true,\n            size: \"sm\",\n          },\n        ]}\n      />\n\n      <CarouselAnimatedSections />\n      <FeatureShowcase />\n      <FaqSplitHelp />\n    </>\n  );\n}","propsSchema":{"logo":{"type":"object","description":"Logo configuration","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"menu":{"type":"array","description":"Navigation menu items","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":false},"tabs":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":true},"title":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false},"links":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":false},"url":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false}},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }"},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }[]","required":true},"featured":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":true},"image":{"type":"string","description":"","required":true}},"typeLabel":"{ title: string; description: string; url: string; image: string; }","required":false}},"typeLabel":"TabItem"},"typeLabel":"TabItem[]","required":false}},"typeLabel":"MenuItem"},"typeLabel":"MenuItem[]","required":false},"authActions":{"type":"array","description":"Authentication action configurations","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","header","centered","dropdown","balanced","symmetrical","responsive","mobile-menu"],"performance":{},"importantUsageNotes":"Use this navbar when the site has a clean, symmetrical layout with the logo on the left, 4 centered top-level 'menu' items, and a single auth action on the right — typical for SaaS marketing pages or professional product sites that want a balanced, editorial look. The demo uses exactly 4 menu items: 2 have dropdown 'items' arrays (with icon-linked sub-items), and 2 are flat href-only links — do not add more than 4-5 top-level items or the centered layout will break. Items with dropdowns support 'icon' (lucide icon name), 'title', 'url', and optional 'description' per sub-item; use 2-4 sub-items per dropdown. Only set 'logo.src' if a real brand logo exists in the media library; otherwise omit 'logo.src' and rely on 'logo.title' as plain text. The 'authActions' prop drives the right-side buttons — if you supply multiple entries, use a variant of 'default' for the first and 'outline' for the second. Only use real internal route hrefs and important external URLs — do not invent or guess routes. The mobile menu is built into this block — do not strip it or override its behavior; preserve the demo's mobile structure. Follow the example props closely for this block — the demo encodes the canonical layout, and deviating from it will produce broken or unusable navigation."},{"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, imagePlaceholders } 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":false},"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":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","mega-menu","enterprise","multi-level","platform","developers","resources","full-width","complex-navigation"],"performance":{},"importantUsageNotes":"Use this navbar when the site has broad product and solution categories with multiple grouped sub-links — each top-level 'menuLinks' item can have 'dropdownGroups', where each group has a 'label' and 2-3 icon-linked items; suitable for mid-size SaaS or platform products. The demo uses 4 top-level items: 'Products' with 2 dropdownGroups (2 links each), 'Solutions' with 2 dropdownGroups (2 links each), and 2 flat href items — keep the structure to 2 groups per dropdown with 2-4 links per group; each link requires a lucide 'iconName'. Only set 'logo.src' if a real brand logo exists in the media library; otherwise omit 'logo.src' and rely on 'logo.title' as plain text. If you supply multiple 'actions', use a variant of 'default' for the first action and 'outline' for the second action to ensure proper visual distinction between the two CTAs — most navbars expect 1-2 actions max, do not exceed 2. Only use real internal route hrefs and important external URLs — do not invent or guess routes. The mobile menu is built into this block — do not strip it or override its behavior; preserve the demo's mobile structure. Follow the example props closely for this block — the demo encodes the canonical layout, and deviating from it will produce broken or unusable navigation."},{"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, imagePlaceholders } 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: imagePlaceholders[10],\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: imagePlaceholders[11],\n                  },\n                  {\n                    id: \"warehouse\",\n                    title: \"Data Warehouse\",\n                    description: \"Centralized data storage and management\",\n                    href: \"#\",\n                    image: imagePlaceholders[12],\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: imagePlaceholders[13],\n                  },\n                  {\n                    id: \"social\",\n                    title: \"Social Media\",\n                    description: \"Social media management suite\",\n                    href: \"#\",\n                    image: imagePlaceholders[14],\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: imagePlaceholders[15],\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: imagePlaceholders[16],\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":false},"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":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","enterprise","mega-menu","solutions","products","global","partners","resources","b2b","corporate"],"performance":{},"importantUsageNotes":"Use this navbar when the site is a B2B enterprise or large SaaS platform that needs multiple distinct mega-menu layouts — 'solutions-with-platform', 'products-categorized', and 'resources-with-topics' — each with a featured hero card image; typically for enterprise software, cloud platforms, or large product suites. The demo locks 5 top-level 'menuLinks': 3 with mega-menu layouts and 2 as flat href links — 'Solutions' uses layout 'solutions-with-platform' with 2 solutionCards (each with 3 subpages) and 4 platformItems; 'Products' uses layout 'products-categorized' with 2 productCategories (each with 2 products with images); 'Resources' uses layout 'resources-with-topics' with 4 resourceItems and 1 topicGroup of 3 topics; all 3 mega-menu items require a 'featuredHeroCard' with a real image — DO NOT USE this block without real images for each mega-menu panel's featuredHeroCard. Only set 'logo.src' if a real brand logo exists in the media library; otherwise omit 'logo.src' and rely on 'logo.title' as plain text. If you supply multiple 'actions', use a variant of 'default' for the first action and 'outline' for the second action. Only use real internal route hrefs and important external URLs — do not invent or guess routes. The mobile menu is built into this block — do not strip it or override its behavior; preserve the demo's mobile structure. Follow the example props closely for this block — the demo encodes the canonical layout, and deviating from it will produce broken or unusable navigation."},{"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":false},"items":{"type":"array","description":"Navigation menu items","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true},"url":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false},"iconName":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false}},"typeLabel":"NavItem"},"typeLabel":"NavItem[]","required":false},"authActions":{"type":"array","description":"Authentication action configurations","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","floating","pill","glassmorphism","backdrop-blur","modern","premium","creative","animated-hamburger"],"performance":{},"importantUsageNotes":"Use this navbar when the site needs a minimal modern aesthetic with the navigation rendered as a floating pill/capsule that hovers above content — ideal for landing pages, personal sites, or agency sites with 3-5 top-level destinations and a single CTA. The demo uses exactly 5 flat 'items' (Home, Features, Pricing, About, Contact) with no dropdowns and a single 'authActions' entry — keep 'items' to 4-6 plain links, as more will overflow the pill shape. Only set 'logo.src' if a real brand logo exists in the media library; otherwise omit 'logo.src' and rely on the alt/title fallback. The 'authActions' prop drives the pill's right-side button — if you supply multiple entries, use a variant of 'default' for the first and 'outline' for the second. Only use real internal route hrefs and important external URLs — do not invent or guess routes. The mobile menu is built into this block — do not strip it or override its behavior; preserve the demo's mobile structure. Follow the example props closely for this block — the demo encodes the canonical layout, and deviating from it will produce broken or unusable navigation."},{"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":false},"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":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","platform","resources","mega-menu","solutions","use-cases","documentation","saas","developer-tools"],"performance":{},"importantUsageNotes":"Use this navbar when the site is a developer platform or cloud services product with two main dropdown sections (Platform and Resources) each rendered as a 'simple-list' of icon-linked items, plus 2 flat links — a good match for infrastructure, API, or devtools companies. The demo uses 4 top-level 'menuLinks': 'Platform' with layout 'simple-list' and 4 icon-linked links, 'Resources' with layout 'simple-list' and 4 icon-linked links, 'Pricing' as a flat href, and 'Company' as a flat href — each 'links' sub-item needs 'label', 'description', 'url', and a lucide 'iconName'; provide 3-5 links per dropdown. Only set 'logo.src' if a real brand logo exists in the media library; otherwise omit 'logo.src' and rely on 'logo.title' as plain text. If you supply multiple 'actions', use a variant of 'default' for the first action and 'outline' for the second action. Only use real internal route hrefs and important external URLs — do not invent or guess routes. The mobile menu is built into this block — do not strip it or override its behavior; preserve the demo's mobile structure. Follow the example props closely for this block — the demo encodes the canonical layout, and deviating from it will produce broken or unusable navigation."},{"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, imagePlaceholders } 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: imagePlaceholders[20],\n            },\n            {\n              label: \"Web Design\",\n              description: \"Modern and responsive websites\",\n              url: \"#\",\n              image: imagePlaceholders[21],\n            },\n            {\n              label: \"UI/UX Design\",\n              description: \"User-centered design solutions\",\n              url: \"#\",\n              image: imagePlaceholders[22],\n            },\n            {\n              label: \"Motion Graphics\",\n              description: \"Engaging animated content\",\n              url: \"#\",\n              image: imagePlaceholders[23],\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":false},"navigation":{"type":"array","description":"Navigation menu items","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":false},"tabs":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":true},"title":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false},"links":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":false},"url":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false}},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }"},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }[]","required":true},"featured":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":true},"image":{"type":"string","description":"","required":true}},"typeLabel":"{ title: string; description: string; url: string; image: string; }","required":false}},"typeLabel":"TabItem"},"typeLabel":"TabItem[]","required":false}},"typeLabel":"MenuItem"},"typeLabel":"MenuItem[]","required":false},"authActions":{"type":"array","description":"Authentication action configurations","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","image-preview","hover-preview","visual","creative","portfolio","e-commerce","fixed","scroll-aware"],"performance":{},"importantUsageNotes":"Use this navbar when the site is a creative agency, design studio, or visual-heavy brand that needs dropdown menus where each sub-link shows a real image preview on hover — DO NOT USE this block if you do not have a real image URL for every link item in every dropdown. The demo uses 4 top-level 'navigation' items: 'Services' with 4 sub-links each requiring a real 'image' URL, and 3 flat href-only items (Portfolio, About, Contact) — every item in a 'links' array must have a real, accessible 'image' URL from the media library. Only set 'logo.src' if a real brand logo exists in the media library; otherwise omit 'logo.src' and rely on 'logo.title' as plain text. The 'authActions' prop drives the right-side buttons — if you supply multiple entries, use a variant of 'default' for the first and 'outline' for the second. Only use real internal route hrefs and important external URLs — do not invent or guess routes. The mobile menu is built into this block — do not strip it or override its behavior; preserve the demo's mobile structure. Follow the example props closely for this block — the demo encodes the canonical layout, and deviating from it will produce broken or unusable navigation."},{"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":false},"navigation":{"type":"array","description":"Navigation menu items","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":false},"tabs":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":true},"title":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false},"links":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":false},"url":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false}},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }"},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }[]","required":true},"featured":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":true},"image":{"type":"string","description":"","required":true}},"typeLabel":"{ title: string; description: string; url: string; image: string; }","required":false}},"typeLabel":"TabItem"},"typeLabel":"TabItem[]","required":false}},"typeLabel":"MenuItem"},"typeLabel":"MenuItem[]","required":false},"authActions":{"type":"array","description":"Authentication action configurations","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","dark-theme","colorful-icons","github-stars","developer-tools","open-source","tech","modern","icon-indicators"],"performance":{},"importantUsageNotes":"Use this navbar when the site has a dark-themed or developer/devtools aesthetic and needs dropdown menus where each sub-link has a distinctly colored lucide icon — ideal for developer platforms, API products, or infrastructure services. The demo uses a 'navigation' array of 3 items: 2 have 'links' sub-arrays (4 links and 3 links respectively, each with 'iconName' and 'iconColor'), and 1 is a flat href-only entry — keep top-level items to 3-5, and provide a unique lucide 'iconName' and a distinct hex 'iconColor' for every sub-link. Only set 'logo.src' if a real brand logo exists in the media library; otherwise omit 'logo.src' and rely on 'logo.title' as plain text. The 'authActions' prop drives the right-side buttons — if you supply multiple entries, use a variant of 'default' for the first and 'outline' for the second. Only use real internal route hrefs and important external URLs — do not invent or guess routes. The mobile menu is built into this block — do not strip it or override its behavior; preserve the demo's mobile structure. Follow the example props closely for this block — the demo encodes the canonical layout, and deviating from it will produce broken or unusable navigation."},{"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, imagePlaceholders } 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      <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: imagePlaceholders[0],\n              url: \"#\",\n              iconName: \"lucide/bar-chart\",\n            },\n            {\n              label: \"Marketing Suite\",\n              description: \"Complete marketing automation tools\",\n              image: imagePlaceholders[1],\n              url: \"#\",\n              iconName: \"lucide/megaphone\",\n            },\n            {\n              label: \"CRM System\",\n              description: \"Customer relationship management\",\n              image: imagePlaceholders[2],\n              url: \"#\",\n              iconName: \"lucide/users\",\n            },\n            {\n              label: \"API Platform\",\n              description: \"Developer-friendly APIs\",\n              image: imagePlaceholders[3],\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: imagePlaceholders[4],\n            },\n            {\n              label: \"Small Business\",\n              description: \"Perfect tools for growing companies\",\n              url: \"#\",\n              iconName: \"lucide/briefcase\",\n              background: imagePlaceholders[5],\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: imagePlaceholders[6],\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":false},"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":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","animated","image-preview","transitions","products","solutions","developers","full-width","engaging"],"performance":{},"importantUsageNotes":"Use this navbar when the site has 4 top-level destinations where at least some items need rich animated dropdown panels — e.g., a SaaS or developer tool platform that wants to visually showcase products, solution cards, and grouped documentation links. The demo locks 4 top-level 'menuLinks': the first uses layout 'animated-image-preview' with 4 image-linked sub-items, the second uses layout 'featured-cards-grid' with 2 featuredLinks and 4 additional links, the third uses layout 'grouped-links-image' with 2 groupLinks groups (2 links each) plus one imageLink featured banner, and the fourth is a flat href link — do not exceed this structure. Every top-level item that uses 'animated-image-preview' layout MUST have a real image per sub-item (from the media library); DO NOT USE this block if you do not have real images for every link in those panels. Only set 'logo.src' if a real brand logo exists in the media library; otherwise omit 'logo.src' and rely on 'logo.title' as plain text. If you supply multiple 'actions', use a variant of 'default' for the first action and 'outline' for the second action to ensure proper visual distinction between the two CTAs — most navbars expect 1-2 actions max, do not exceed 2. Only use real internal route hrefs and important external URLs — do not invent or guess routes. The mobile menu is built into this block — do not strip it or override its behavior; preserve the demo's mobile structure. Follow the example props closely for this block — the demo encodes the canonical layout, and deviating from it will produce broken or unusable navigation."},{"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":false},"navigation":{"type":"array","description":"Navigation menu items","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":false},"tabs":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":true},"title":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false},"links":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":false},"url":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false}},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }"},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }[]","required":true},"featured":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":true},"image":{"type":"string","description":"","required":true}},"typeLabel":"{ title: string; description: string; url: string; image: string; }","required":false}},"typeLabel":"TabItem"},"typeLabel":"TabItem[]","required":false}},"typeLabel":"MenuItem"},"typeLabel":"MenuItem[]","required":false},"authActions":{"type":"array","description":"Authentication action configurations 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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","multi-column","grouped","categories","organized","enterprise","extensive","dynamic-width","dark-mobile"],"performance":{},"importantUsageNotes":"Use this navbar when the site has a large product suite that needs a multi-column mega-menu dropdown — each 'navigation' item can contain a 'groups' array of columns, each column having a 'title' and 'links' sub-array; ideal for all-in-one platforms with distinct feature categories. The demo uses 3 top-level items: 'Products' with 3 groups (Core Platform, Productivity, Collaboration — each with exactly 3 links), 'Solutions' as a flat href, and 'Pricing' as a flat href — lock each group to 3 links per column and use a lucide 'iconName' per link item. Only set 'logo.src' if a real brand logo exists in the media library; otherwise omit 'logo.src' and rely on 'logo.title' as plain text. The 'authActions' prop drives the right-side buttons — if you supply multiple entries, use a variant of 'default' (or 'link') for the first and 'default' for the primary CTA, keeping 1-2 actions total. Only use real internal route hrefs and important external URLs — do not invent or guess routes. The mobile menu is built into this block — do not strip it or override its behavior; preserve the demo's mobile structure. Follow the example props closely for this block — the demo encodes the canonical layout, and deviating from it will produce broken or unusable navigation."},{"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":false},"menu":{"type":"array","description":"Navigation menu items","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":false},"tabs":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":true},"title":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false},"links":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":false},"url":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false}},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }"},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }[]","required":true},"featured":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":true},"image":{"type":"string","description":"","required":true}},"typeLabel":"{ title: string; description: string; url: string; image: string; }","required":false}},"typeLabel":"TabItem"},"typeLabel":"TabItem[]","required":false}},"typeLabel":"MenuItem"},"typeLabel":"MenuItem[]","required":false},"authActions":{"type":"array","description":"Authentication action configurations","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","sidebar","slide-out","mobile","app-like","accordion","dashboard","application","immersive"],"performance":{},"importantUsageNotes":"Use this navbar when mobile-first navigation is critical and the site has grouped navigation sections that benefit from a slide-in sidebar drawer on mobile — well suited for apps, dashboards, and tool sites where items naturally cluster into groups like Projects, Team, and Settings. The demo uses 5 top-level 'menu' items: 2 flat href links (Dashboard, Analytics) and 3 items with expandable 'items' sub-arrays of 3 icon-linked entries each (Projects, Team, Settings); keep top-level items to 4-7 and sub-items to 2-4 per group, each with 'title', 'url', and a lucide 'icon' name. Only set 'logo.src' if a real brand logo exists in the media library; otherwise omit 'logo.src' and rely on 'logo.title' as plain text. The 'authActions' prop drives the right-side action — use 1 action with 'default' variant; if you supply 2, use 'outline' for the second. Only use real internal route hrefs and important external URLs — do not invent or guess routes. The sidebar IS the mobile menu for this block — do not strip it or override its behavior; it is the primary mobile navigation mechanism. Follow the example props closely for this block — the demo encodes the canonical layout, and deviating from it will produce broken or unusable navigation."},{"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":false},"navItems":{"type":"array","description":"Navigation items","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true},"url":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false},"iconName":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false}},"typeLabel":"NavItem"},"typeLabel":"NavItem[]","required":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","transparent","overlay","scroll-transition","hero","landing-page","portfolio","creative","staggered-animation"],"performance":{},"importantUsageNotes":"Use this navbar when the site needs a minimal, modern aesthetic where the navbar renders with a transparent background that overlays the hero section below — ideal for portfolio sites, creative agencies, and personal/branding sites with 3-5 top-level flat destinations and a single CTA. The demo uses 4 flat 'navItems' (Work, About, Services, Contact) and 1 'authActions' entry with 'outline' variant — keep navItems to 3-5 flat links with no dropdowns, since the transparent background makes complex dropdowns visually conflicting. Only set 'logo.src' if a real brand logo exists in the media library; otherwise omit 'logo.src' and rely on 'logo.title' as plain text. The 'authActions' prop drives the right-side button — if you supply multiple entries, use a variant of 'default' for the first and 'outline' for the second. Only use real internal route hrefs and important external URLs — do not invent or guess routes. The mobile menu is built into this block — do not strip it or override its behavior; preserve the demo's mobile structure. Follow the example props closely for this block — the demo encodes the canonical layout, and deviating from it will produce broken or unusable navigation."},{"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, imagePlaceholders } 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: imagePlaceholders[10],\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":false},"menu":{"type":"array","description":"Navigation menu items - can be simple links or dropdowns with grouped links","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":false},"tabs":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":true},"title":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false},"links":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":false},"url":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false}},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }"},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }[]","required":true},"featured":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":true},"image":{"type":"string","description":"","required":true}},"typeLabel":"{ title: string; description: string; url: string; image: string; }","required":false}},"typeLabel":"TabItem"},"typeLabel":"TabItem[]","required":false}},"typeLabel":"MenuItem"},"typeLabel":"MenuItem[]","required":false},"authActions":{"type":"array","description":"Authentication action configurations","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","education","lms","learning","courses","support","documentation","knowledge-base","e-learning"],"performance":{},"importantUsageNotes":"Use this navbar when the site is an education platform, LMS, or edtech product that needs group-structured dropdown menus — each top-level 'menu' item can contain one or more 'groups', each group has a 'label', a 'links' array of icon-linked items, and optionally a 'featuredImage' thumbnail. The demo uses 4 top-level items: 'About' with 1 group of 4 tool links plus a featuredImage, 'Resources' with 1 group of 3 links, 'Company' with 1 group of 3 links, and 'Pricing' as a flat href — maintain this 4-item structure; each group's 'links' use 'title', 'description', 'icon' (lucide name), and 'href'. The 'featuredImage' per group requires a real image from the media library — DO NOT set 'featuredImage' unless a real image is available. Only set 'logo.src' if a real brand logo exists in the media library; otherwise omit 'logo.src' and rely on 'logo.title' as plain text. The 'authActions' prop drives the right-side buttons — if you supply multiple entries, use a variant of 'default' (or 'link') for the first and 'outline' for the second. Only use real internal route hrefs and important external URLs — do not invent or guess routes. The mobile menu is built into this block — do not strip it or override its behavior; preserve the demo's mobile structure. Follow the example props closely for this block — the demo encodes the canonical layout, and deviating from it will produce broken or unusable navigation."},{"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":false},"menu":{"type":"array","description":"Navigation menu items","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":false},"tabs":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":true},"title":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false},"links":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":false},"url":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false}},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }"},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }[]","required":true},"featured":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":true},"image":{"type":"string","description":"","required":true}},"typeLabel":"{ title: string; description: string; url: string; image: string; }","required":false}},"typeLabel":"TabItem"},"typeLabel":"TabItem[]","required":false}},"typeLabel":"MenuItem"},"typeLabel":"MenuItem[]","required":false},"authActions":{"type":"array","description":"Authentication action configurations","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","sticky","compact","shrink-on-scroll","space-efficient","content-heavy","blog","documentation","smooth-transition"],"performance":{},"importantUsageNotes":"Use this navbar when the site needs a minimal, compact sticky navigation that remains visible on scroll without occupying much vertical space — suitable for landing pages, blogs, and personal/agency sites with 4-6 top-level flat links and a single CTA. The demo uses 5 flat 'menu' items and 1 small 'authActions' entry with 'size: sm' and 'outline' variant — keep menu items to 4-6 flat links with no dropdowns; the compact height means no mega-menus or tall dropdowns should be used. Only set 'logo.src' if a real brand logo exists in the media library; otherwise omit 'logo.src' based on available media. The 'authActions' prop drives the right-side buttons — if you supply multiple entries, use a variant of 'default' for the first and 'outline' for the second; prefer 'size: sm' to maintain compact proportions. Only use real internal route hrefs and important external URLs — do not invent or guess routes. The mobile menu is built into this block — do not strip it or override its behavior; preserve the demo's mobile structure. Follow the example props closely for this block — the demo encodes the canonical layout, and deviating from it will produce broken or unusable navigation."},{"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":false},"navItems":{"type":"array","description":"Navigation items array","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true},"url":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false},"iconName":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false}},"typeLabel":"NavItem"},"typeLabel":"NavItem[]","required":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","simple","minimal","animated-indicator","underline","clean","portfolio","landing-page","straightforward"],"performance":{},"importantUsageNotes":"Use this navbar for sites with a flat 4-7 link top-level navigation, no dropdowns, and a single primary CTA — the simplest navbar option, ideal for landing pages, small business sites, personal portfolios, and any site where the full navigation fits in a single row of named links. The demo uses 5 flat 'navItems' (each with 'name' and 'link') and 1 'actions' entry — set 'defaultActiveItem' to the name of the currently active page; keep navItems to 4-7 entries. Only set 'logo.src' if a real brand logo exists in the media library; otherwise omit 'logo.src' and rely on 'logo.title' as plain text. If you supply multiple 'actions', use a variant of 'default' for the first action and 'outline' for the second action to ensure proper visual distinction between the two CTAs — most navbars expect 1-2 actions max, do not exceed 2. Only use real internal route hrefs and important external URLs — do not invent or guess routes. The mobile menu is built into this block — do not strip it or override its behavior; preserve the demo's mobile structure. Follow the example props closely for this block — the demo encodes the canonical layout, and deviating from it will produce broken or unusable navigation."},{"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":false},"menu":{"type":"array","description":"Navigation menu items","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":false},"tabs":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":true},"title":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false},"links":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":false},"url":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false}},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }"},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }[]","required":true},"featured":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":true},"image":{"type":"string","description":"","required":true}},"typeLabel":"{ title: string; description: string; url: string; image: string; }","required":false}},"typeLabel":"TabItem"},"typeLabel":"TabItem[]","required":false}},"typeLabel":"MenuItem"},"typeLabel":"MenuItem[]","required":false},"authActions":{"type":"array","description":"Authentication action configurations","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","split-cta","dual-buttons","login-signup","demo-trial","saas","conversion","balanced-layout","prominent-cta"],"performance":{},"importantUsageNotes":"Use this navbar when the site's primary conversion goal requires two visible CTA buttons side by side on the right — a softer 'link'-variant secondary action alongside a solid primary action, typical for startup or SaaS landing pages that want to offer both a soft opt-in and a direct conversion path. The demo uses 4 flat 'menu' items and 2 'authActions': first with 'link' variant (soft CTA like 'Start Free Trial') and second with 'default' variant (hard CTA like 'Book a Demo') — keep the menu to 3-5 flat items and always supply exactly 2 authActions with this variant pairing. Only set 'logo.src' if a real brand logo exists in the media library; otherwise omit 'logo.src' and rely on 'logo.title' as plain text. Only use real internal route hrefs and important external URLs — do not invent or guess routes. The mobile menu is built into this block — do not strip it or override its behavior; preserve the demo's mobile structure. Follow the example props closely for this block — the demo encodes the canonical layout, and deviating from it will produce broken or unusable navigation."},{"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":false},"navItems":{"type":"array","description":"Navigation items with icons","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true},"url":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false},"iconName":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false}},"typeLabel":"NavItem"},"typeLabel":"NavItem[]","required":false},"authActions":{"type":"array","description":"Authentication action configurations","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","icon-only","tooltips","compact","minimalist","dashboard","admin-panel","application","space-efficient"],"performance":{},"importantUsageNotes":"Use this navbar when the site is an app dashboard or tool with named, icon-backed top-level 'navItems' that double as the primary navigation — each link must have a lucide 'icon' name; best for internal tools, admin panels, or SaaS apps with 4-6 main sections. The demo uses 5 'navItems' each with 'title', 'url', and a lucide 'icon' name (e.g., 'lucide/layout-dashboard', 'lucide/bar-chart-3'); provide a unique, semantically relevant lucide icon for every nav item — do not omit icons on any item. The 'authActions' in the demo are utility icons (Notifications, Profile) with ghost variant — if you supply multiple 'authActions', use 'ghost' for utility/icon actions; if adding a primary CTA, use 'default' variant for it. Only set 'logo.src' if a real brand logo exists in the media library; otherwise omit 'logo.src' and rely on 'logo.title' as plain text. Only use real internal route hrefs and important external URLs — do not invent or guess routes. The mobile menu is built into this block — do not strip it or override its behavior; preserve the demo's mobile structure. Follow the example props closely for this block — the demo encodes the canonical layout, and deviating from it will produce broken or unusable navigation."},{"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":false},"menu":{"type":"array","description":"Navigation menu items","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":false},"tabs":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":true},"title":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false},"links":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":false},"url":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false}},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }"},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }[]","required":true},"featured":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":true},"image":{"type":"string","description":"","required":true}},"typeLabel":"{ title: string; description: string; url: string; image: string; }","required":false}},"typeLabel":"TabItem"},"typeLabel":"TabItem[]","required":false}},"typeLabel":"MenuItem"},"typeLabel":"MenuItem[]","required":false},"authActions":{"type":"array","description":"Authentication action configurations","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","tabbed","organized","categories","featured-content","enterprise","diverse-offerings","multi-section","switchable"],"performance":{},"importantUsageNotes":"Use this navbar when the site has deep, multi-category content under each top-level item and needs tabbed panel navigation inside the dropdown — each 'menu' item has a 'tabs' array, and clicking a top-level item reveals a panel with multiple tabs, each tab containing its own icon-linked 'links' list. The demo uses 3 top-level items each with tabs: 'Products' has 3 tabs (Core Features with 6 links, Advanced Tools with 5 links, Collaboration with 5 links); 'Solutions' has 3 tabs (By Industry 6 links, By Team 6 links, By Company Size 4 links); 'Resources' has 4 tabs (Learn 5 links, Support 5 links, Developers 5 links, Company 5 links) — provide 3-4 tabs per top-level item and 4-6 icon-linked links per tab for a complete and functional layout. Only set 'logo.src' if a real brand logo exists in the media library; otherwise omit 'logo.src' and rely on 'logo.title' as plain text. The 'authActions' prop accepts 1-2 buttons — use a ghost or link variant for a secondary sign-in and 'default' for the primary CTA; if you supply multiple, use 'default' for the first and 'outline' or 'ghost' to distinguish. Only use real internal route hrefs and important external URLs — do not invent or guess routes. The mobile menu is built into this block — do not strip it or override its behavior; preserve the demo's mobile structure. Follow the example props closely for this block — the demo encodes the canonical layout, and deviating from it will produce broken or unusable navigation."},{"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":false},"menuItems":{"type":"array","description":"Menu items for fullscreen navigation","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":false},"tabs":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":true},"title":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false},"links":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":false},"url":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false}},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }"},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }[]","required":true},"featured":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":true},"image":{"type":"string","description":"","required":true}},"typeLabel":"{ title: string; description: string; url: string; image: string; }","required":false}},"typeLabel":"TabItem"},"typeLabel":"TabItem[]","required":false}},"typeLabel":"MenuItem"},"typeLabel":"MenuItem[]","required":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","fullscreen","overlay","dramatic","creative","portfolio","artistic","fashion","theatrical","animated"],"performance":{},"importantUsageNotes":"Use this navbar when mobile-first navigation is critical and the site has a longer link list — the hamburger opens a fullscreen overlay that can accommodate 8-12 'menuItems' along with social links, making it ideal for creative studios, portfolios, and agencies. The demo uses 11 'menuItems' as flat label/href pairs and 3 'socialLinks' (x, instagram, linkedin); keep 'menuItems' to 6-12 and only include 'socialLinks' with real, verified social profile URLs — do not invent social handles. Only set 'logo.src' if a real brand logo exists in the media library; otherwise omit 'logo.src' and rely on 'logo.title' as plain text. This block does not use an 'actions' or 'authActions' array — call-to-action should be embedded as one of the 'menuItems'. Only use real internal route hrefs and important external URLs — do not invent or guess routes. The fullscreen overlay IS the mobile menu — do not strip it or override its behavior; the entire interaction depends on it. Follow the example props closely for this block — the demo encodes the canonical layout, and deviating from it will produce broken or unusable navigation."}]},"timestamp":"2026-05-13T10:13:20.597Z"}