{"success":true,"data":{"block":{"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."}},"timestamp":"2026-05-13T10:42:50.944Z"}