{"success":true,"data":{"block":{"id":"navbar-fullscreen-menu","name":"Navbar Fullscreen Menu","title":"NavBar Fullscreen Menu","category":"Navbar","categorySlug":"navbar","description":"A dramatic navigation bar with fullscreen overlay navigation. Features a minimal header with logo and MENU/CLOSE text toggle. When activated, a fullscreen overlay appears with large, centered menu items that animate in with blur effects on hover. Social links appear at the bottom with staggered animations. The theatrical presentation creates a memorable navigation experience. Perfect for creative agencies, portfolios, artistic websites, fashion brands, and any site that wants to make a bold visual statement with their navigation.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290190/dyadtk2onqlgelljvple5d6ewjxe/navbar-fullscreen-menu-desktop.png","mobile":"https://cdn.ing/assets/i/r/290191/2dqtlah0m9h03h3e0xwwsu2u6hwq/navbar-fullscreen-menu-mobile.png"},"componentPath":"blocks/navbars/navbar-fullscreen-menu.tsx","code":"import { NavbarFullscreenMenu } from \"@opensite/ui/blocks/navbars/navbar-fullscreen-menu\";\nimport { brandLogoPlaceholders } from \"@/lib/media\";\nimport CarouselAnimatedSections from \"@/blocks/carousel/carousel-animated-sections\";\nimport FeatureShowcase from \"@/blocks/features/feature-showcase\";\nimport FaqSplitHelp from \"@/blocks/faq/faq-split-help\";\n\nexport default function Demo() {\n  return (\n    <>\n      <NavbarFullscreenMenu\n      logo={{\n        url: \"/\",\n        src: brandLogoPlaceholders.black[0],\n        title: \"Creative Studio\",\n        alt: \"Creative Studio Logo\",\n      }}\n      menuItems={[\n        { label: \"Services\", href: \"#\" },\n        { label: \"Branding\", href: \"#\" },\n        { label: \"Web Design\", href: \"#\" },\n        { label: \"Development\", href: \"#\" },\n        { label: \"Work\", href: \"#\" },\n        { label: \"Case Studies\", href: \"#\" },\n        { label: \"Portfolio\", href: \"#\" },\n        { label: \"About\", href: \"#\" },\n        { label: \"Our Story\", href: \"#\" },\n        { label: \"Team\", href: \"#\" },\n        { label: \"Contact\", href: \"#\" },\n      ]}\n      socialLinks={[\n        { platformName: \"x\", label: \"twitter\", href: \"https://twitter.com\" },\n        {\n          platformName: \"instagram\",\n          label: \"instagram\",\n          href: \"https://instagram.com\",\n        },\n        {\n          platformName: \"linkedin\",\n          label: \"linkedin\",\n          href: \"https://linkedin.com\",\n        },\n      ]}\n      />\n\n      <CarouselAnimatedSections />\n      <FeatureShowcase />\n      <FaqSplitHelp />\n    </>\n  );\n}","propsSchema":{"logo":{"type":"object","description":"Logo configuration","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":true,"mediaHints":{"path":"logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":true,"note":"Brand logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"menuItems":{"type":"array","description":"Menu items for fullscreen navigation","items":{"type":"object","description":"","fields":{"label":{"type":"string","description":"","required":true},"href":{"type":"string","description":"","required":true}},"typeLabel":"MenuItem"},"typeLabel":"MenuItem[]","required":true,"minItems":3,"maxItems":12},"socialLinks":{"type":"array","description":"Social links displayed at bottom of fullscreen menu","items":{"type":"object","description":"","fields":{"platformName":{"type":"object","description":"Social platform name - determines which icon to display","typeLabel":"SocialPlatformName","required":true},"href":{"type":"string","description":"URL to the social profile","required":true},"label":{"type":"string","description":"Optional label for accessibility (defaults to platform name)","required":false}},"typeLabel":"NavbarFullscreenMenuSocialLink"},"typeLabel":"NavbarFullscreenMenuSocialLink[]","required":false,"minItems":0,"maxItems":6}},"exampleProps":{"logo":{"url":"/","src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","title":"Creative Studio","alt":"Creative Studio Logo"},"menuItems":[{"label":"Services","href":"#"},{"label":"Branding","href":"#"},{"label":"Web Design","href":"#"},{"label":"Development","href":"#"},{"label":"Work","href":"#"},{"label":"About","href":"#"},{"label":"Contact","href":"#"}],"socialLinks":[{"platformName":"x","label":"Twitter","href":"https://twitter.com"},{"platformName":"instagram","label":"Instagram","href":"https://instagram.com"},{"platformName":"linkedin","label":"LinkedIn","href":"https://linkedin.com"}]},"dependencies":["@opensite/ui"],"tags":["navbar","navigation","fullscreen","overlay","dramatic","creative","portfolio","artistic","fashion","theatrical","animated"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. The 'menuItems' array uses 'label'/'href' fields (not 'title'/'url'). There are no 'authActions' — the fullscreen menu is the sole navigation mechanism. href The overlay animation staggers each link entry — more items create a longer stagger sequence.","usageRequirements":{"requiredProps":["logo","menuItems"],"mediaSlots":{"logo":{"path":"logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":true,"note":"Brand logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"propConstraints":{"menuItems":{"minItems":3,"maxItems":12},"socialLinks":{"minItems":0,"maxItems":6}}}}},"timestamp":"2026-06-27T20:16:21.422Z"}