{"name":"navigation-menu","title":"Navigation Menu","description":"A collection of links for navigating websites.","installCommand":"bunx marko-ui add navigation-menu -y","usageTags":"<NavigationMenu>","importSnippet":"import NavigationMenu from \"@/components/ui/navigation-menu/navigation-menu.marko\";","usageSnippet":"<NavigationMenu items=[{ type: \"menu\", value: \"one\", label: \"Item One\", links: [{ title: \"Link\", href: \"#\" }] }]/>","tags":["NavigationMenu"],"parts":[{"name":"entry","variants":[{"typeName":"NavigationMenuLinkAttrs","attributes":[{"name":"type","type":"\"link\"","required":false,"description":"Discriminant; omit (or \"link\") for a link rendered directly in the bar."},{"name":"value","type":"string","required":true},{"name":"label","type":"string","required":true},{"name":"href","type":"string","required":true},{"name":"current","type":"boolean","required":false},{"name":"disabled","type":"boolean","required":false}]},{"typeName":"NavigationMenuMenuAttrs","attributes":[{"name":"type","type":"\"menu\"","required":true},{"name":"value","type":"string","required":true},{"name":"label","type":"string","required":true},{"name":"disabled","type":"boolean","required":false}]}],"repeatable":true,"description":"Compound attr-tag API (primary, Marko-idiomatic form). One tag name\ncarries both kinds — `<@entry .../>` is a bar link (the default kind) and\n`<@entry type=\"menu\">` opens a content panel in the shared viewport (its\nbody renders directly inside the panel) — so entries render in exactly\nthe order written: links may sit before, between, or after menus. When\nany `<@entry>` tags are supplied they replace `items=` entirely for this\nrender."}],"props":[{"name":"align","type":"'end' | 'start' | 'center'","required":false,"description":"Alignment of the shared viewport relative to the active trigger."},{"name":"closeDelay","type":"number | undefined","required":false,"default":"300","description":"The delay before the menu closes"},{"name":"defaultValue","type":"string | undefined","required":false,"description":"The default value of the navigation menu.\nUse when you don't want to control the value of the menu."},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"disableClickTrigger","type":"boolean | undefined","required":false,"description":"Whether to disable the click trigger"},{"name":"disableHoverTrigger","type":"boolean | undefined","required":false,"description":"Whether to disable the hover trigger"},{"name":"disablePointerLeaveClose","type":"boolean | undefined","required":false,"description":"Whether to disable the pointer leave close"},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The ids of the elements in the machine."},{"name":"items","type":"NavigationMenuItem[]","required":false},{"name":"openDelay","type":"number | undefined","required":false,"default":"200","description":"The delay before the menu opens"},{"name":"orientation","type":"'horizontal' | 'vertical' | undefined","required":false,"default":"horizontal","description":"The orientation of the element."},{"name":"translations","type":"IntlTranslations | undefined","required":false,"description":"Specifies the localized strings that identifies the accessibility elements and their states"},{"name":"value","type":"string | undefined","required":false,"description":"The controlled value of the navigation menu"}],"events":[{"name":"onValueChange","arg":"ValueChangeDetails","description":"Function called when the value of the menu changes"},{"name":"valueChange","arg":"string"}],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"navigation-menu-demo","title":"Default","source":"import NavigationMenu from \"@marko-ui/shadcn/ui/navigation-menu/navigation-menu.marko\";\n\n<NavigationMenu\n  items=[\n    {\n      type: \"menu\",\n      value: \"getting-started\",\n      label: \"Getting Started\",\n      links: [\n        {\n          title: \"Introduction\",\n          description: \"Re-usable components built with Marko and Tailwind CSS.\",\n          href: \"#introduction\",\n        },\n        {\n          title: \"Installation\",\n          description: \"How to install dependencies and structure your app.\",\n          href: \"#installation\",\n        },\n        {\n          title: \"Typography\",\n          description: \"Styles for headings, paragraphs, lists, and more.\",\n          href: \"#typography\",\n        },\n        {\n          title: \"Theming\",\n          description: \"Customize tokens for light and dark color schemes.\",\n          href: \"#theming\",\n        },\n      ],\n    },\n    {\n      type: \"menu\",\n      value: \"components\",\n      label: \"Components\",\n      links: [\n        { title: \"Button\", description: \"Displays a button or a component that looks like a button.\", href: \"#button\" },\n        { title: \"Dialog\", description: \"A window overlaid on the primary window.\", href: \"#dialog\" },\n        { title: \"Switch\", description: \"A control that toggles between checked and not checked.\", href: \"#switch\" },\n        { title: \"Tooltip\", description: \"A popup that displays information on hover.\", href: \"#tooltip\" },\n      ],\n    },\n    { value: \"docs\", label: \"Docs\", href: \"#docs\" },\n  ]\n/>","description":"Menu items open a shared content panel of links; plain items navigate directly."},{"id":"navigation-menu-panel","title":"Rich content panel","source":"import NavigationMenu from \"@marko-ui/shadcn/ui/navigation-menu/navigation-menu.marko\";\n\n<NavigationMenu|panel|\n  items=[\n    {\n      type: \"menu\",\n      value: \"product\",\n      label: \"Product\",\n      links: [\n        {\n          featured: true,\n          title: \"marko-ui\",\n          description: \"Accessible components for Marko 6, powered by Zag.js state machines.\",\n          href: \"#overview\",\n        },\n        { title: \"Introduction\", description: \"What marko-ui is and why it exists.\", href: \"#introduction\" },\n        { title: \"Installation\", description: \"Add components to your app with the CLI.\", href: \"#installation\" },\n        { title: \"Theming\", description: \"Semantic tokens for light and dark modes.\", href: \"#theming\" },\n      ],\n    },\n    { value: \"pricing\", label: \"Pricing\", href: \"#pricing\" },\n  ]\n>\n  <if=panel.value === \"product\">\n    <p class=\"text-muted-foreground mt-2 border-t px-2 pt-2 text-xs\">\n      Everything is copy-paste — no runtime package to install.\n    </p>\n  </if>\n</NavigationMenu>","description":"Use the `content` body to append extra markup — like a featured link or a footer note — to a panel."},{"id":"navigation-menu-disabled","title":"Disabled item","source":"import NavigationMenu from \"@marko-ui/shadcn/ui/navigation-menu/navigation-menu.marko\";\n\n<NavigationMenu\n  items=[\n    {\n      type: \"menu\",\n      value: \"resources\",\n      label: \"Resources\",\n      links: [\n        { title: \"Blog\", description: \"Read the latest posts from the team.\", href: \"#blog\" },\n        { title: \"Changelog\", description: \"See what shipped in every release.\", href: \"#changelog\" },\n      ],\n    },\n    {\n      type: \"menu\",\n      value: \"enterprise\",\n      label: \"Enterprise\",\n      disabled: true,\n      links: [{ title: \"Contact sales\", description: \"Talk to us about volume plans.\", href: \"#sales\" }],\n    },\n    { value: \"support\", label: \"Support\", href: \"#support\" },\n  ]\n/>","description":"Set `disabled` on a menu item to skip it in the tab order and ignore pointer input."},{"id":"navigation-menu-controlled","title":"Controlled","source":"import NavigationMenu from \"@marko-ui/shadcn/ui/navigation-menu/navigation-menu.marko\";\n\n<let/activeValue=\"\"/>\n\n<div class=\"space-y-4\">\n  <NavigationMenu\n    value:=activeValue\n    items=[\n      {\n        type: \"menu\",\n        value: \"account\",\n        label: \"Account\",\n        links: [\n          { title: \"Profile\", description: \"Manage your public profile and avatar.\", href: \"#profile\" },\n          { title: \"Billing\", description: \"Update payment methods and invoices.\", href: \"#billing\" },\n        ],\n      },\n      {\n        type: \"menu\",\n        value: \"team\",\n        label: \"Team\",\n        links: [\n          { title: \"Members\", description: \"Invite and manage teammates.\", href: \"#members\" },\n          { title: \"Roles\", description: \"Configure permissions per role.\", href: \"#roles\" },\n        ],\n      },\n    ]\n  />\n  <p data-testid=\"controlled-value\" class=\"text-sm text-muted-foreground\">\n    Open panel: ${activeValue || \"none\"}\n  </p>\n  <button\n    type=\"button\"\n    data-testid=\"open-team\"\n    class=\"inline-flex h-9 items-center justify-center rounded-md border bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground\"\n    onClick() {\n      activeValue = activeValue === \"team\" ? \"\" : \"team\";\n    }\n  >\n    Toggle Team panel\n  </button>\n</div>","description":"Zag machines are controlled: a `value` prop without a change handler never moves. Pair it with `valueChange`, or use Marko's bind shorthand `value:=state`.","essential":true},{"id":"navigation-menu-compound","title":"Compound (attr tags)","source":"import NavigationMenu from \"@marko-ui/shadcn/ui/navigation-menu/navigation-menu.marko\";\n\n<NavigationMenu>\n  <@entry type=\"menu\" value=\"getting-started\" label=\"Getting Started\">\n    <div class=\"grid w-[400px] gap-1\">\n      <a href=\"#introduction\" class=\"rounded-md p-2 text-sm hover:bg-accent\">Introduction</a>\n      <a href=\"#installation\" class=\"rounded-md p-2 text-sm hover:bg-accent\">Installation</a>\n      <a href=\"#theming\" class=\"rounded-md p-2 text-sm hover:bg-accent\">Theming</a>\n    </div>\n  </@entry>\n  <@entry value=\"docs\" label=\"Docs\" href=\"#docs\"/>\n  <@entry type=\"menu\" value=\"components\" label=\"Components\">\n    <div class=\"grid w-[400px] gap-1\">\n      <a href=\"#button\" class=\"rounded-md p-2 text-sm hover:bg-accent\">Button</a>\n      <a href=\"#dialog\" class=\"rounded-md p-2 text-sm hover:bg-accent\">Dialog</a>\n      <a href=\"#tooltip\" class=\"rounded-md p-2 text-sm hover:bg-accent\">Tooltip</a>\n    </div>\n  </@entry>\n</NavigationMenu>","description":"Use `<@entry>` attribute tags instead of `items=` to compose each entry directly in markup: `type=\"menu\"` opens a shared content panel (the tag body renders inside it), and the default kind is a plain bar link. One tag name means entries render in exactly the order written — links can sit before, between, or after menus.","essential":true},{"id":"navigation-menu-precedence","title":"Precedence","source":"import NavigationMenu from \"@marko-ui/shadcn/ui/navigation-menu/navigation-menu.marko\";\n\n<NavigationMenu items=[{ type: \"link\", value: \"ignored\", label: \"Ignored\", href: \"#ignored\" }]>\n  <@entry value=\"wins\" label=\"Wins\" href=\"#wins\"/>\n</NavigationMenu>","description":"When both `items=` and `<@entry>` attribute tags are supplied, the attribute tags win — the `items=` entry here is replaced entirely."},{"id":"navigation-menu-rtl","title":"RTL","source":"import NavigationMenu from \"@marko-ui/shadcn/ui/navigation-menu/navigation-menu.marko\";\n\n<NavigationMenu dir=\"rtl\" align=\"end\">\n  <@entry type=\"menu\" value=\"getting-started\" label=\"البدء\">\n    <ul class=\"w-96\">\n      <li>\n        <a href=\"/docs\" class=\"mu-navigation-menu-link\">\n          <div class=\"flex flex-col gap-1 text-sm\">\n            <div class=\"leading-none font-medium\">مقدمة</div>\n            <div class=\"text-muted-foreground line-clamp-2\">مكونات قابلة لإعادة الاستخدام مبنية باستخدام Tailwind CSS.</div>\n          </div>\n        </a>\n      </li>\n      <li>\n        <a href=\"/docs/installation\" class=\"mu-navigation-menu-link\">\n          <div class=\"flex flex-col gap-1 text-sm\">\n            <div class=\"leading-none font-medium\">التثبيت</div>\n            <div class=\"text-muted-foreground line-clamp-2\">كيفية تثبيت التبعيات وتنظيم تطبيقك.</div>\n          </div>\n        </a>\n      </li>\n      <li>\n        <a href=\"/docs/primitives/typography\" class=\"mu-navigation-menu-link\">\n          <div class=\"flex flex-col gap-1 text-sm\">\n            <div class=\"leading-none font-medium\">الطباعة</div>\n            <div class=\"text-muted-foreground line-clamp-2\">أنماط للعناوين والفقرات والقوائم...إلخ</div>\n          </div>\n        </a>\n      </li>\n    </ul>\n  </@entry>\n  <@entry type=\"menu\" value=\"components\" label=\"المكونات\">\n    <ul class=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n      <li>\n        <a href=\"/docs/primitives/alert-dialog\" class=\"mu-navigation-menu-link\">\n          <div class=\"flex flex-col gap-1 text-sm\">\n            <div class=\"leading-none font-medium\">حوار التنبيه</div>\n            <div class=\"text-muted-foreground line-clamp-2\">حوار نافذة يقطع المستخدم بمحتوى مهم ويتوقع استجابة.</div>\n          </div>\n        </a>\n      </li>\n      <li>\n        <a href=\"/docs/primitives/hover-card\" class=\"mu-navigation-menu-link\">\n          <div class=\"flex flex-col gap-1 text-sm\">\n            <div class=\"leading-none font-medium\">بطاقة التحويم</div>\n            <div class=\"text-muted-foreground line-clamp-2\">للمستخدمين المبصرين لمعاينة المحتوى المتاح خلف الرابط.</div>\n          </div>\n        </a>\n      </li>\n      <li>\n        <a href=\"/docs/primitives/progress\" class=\"mu-navigation-menu-link\">\n          <div class=\"flex flex-col gap-1 text-sm\">\n            <div class=\"leading-none font-medium\">التقدم</div>\n            <div class=\"text-muted-foreground line-clamp-2\">يعرض مؤشرًا يوضح تقدم إتمام المهمة، عادةً يتم عرضه كشريط تقدم.</div>\n          </div>\n        </a>\n      </li>\n      <li>\n        <a href=\"/docs/primitives/scroll-area\" class=\"mu-navigation-menu-link\">\n          <div class=\"flex flex-col gap-1 text-sm\">\n            <div class=\"leading-none font-medium\">منطقة التمرير</div>\n            <div class=\"text-muted-foreground line-clamp-2\">يفصل المحتوى بصريًا أو دلاليًا.</div>\n          </div>\n        </a>\n      </li>\n      <li>\n        <a href=\"/docs/primitives/tabs\" class=\"mu-navigation-menu-link\">\n          <div class=\"flex flex-col gap-1 text-sm\">\n            <div class=\"leading-none font-medium\">التبويبات</div>\n            <div class=\"text-muted-foreground line-clamp-2\">مجموعة من أقسام المحتوى المتعددة الطبقات المعروفة بألواح التبويب.</div>\n          </div>\n        </a>\n      </li>\n      <li>\n        <a href=\"/docs/primitives/tooltip\" class=\"mu-navigation-menu-link\">\n          <div class=\"flex flex-col gap-1 text-sm\">\n            <div class=\"leading-none font-medium\">تلميح</div>\n            <div class=\"text-muted-foreground line-clamp-2\">نافذة منبثقة تعرض معلومات متعلقة بعنصر عند التركيز أو التحويم.</div>\n          </div>\n        </a>\n      </li>\n    </ul>\n  </@entry>\n  <@entry type=\"menu\" value=\"with-icon\" label=\"مع أيقونة\">\n    <ul class=\"grid w-[200px]\">\n      <li>\n        <a href=\"#\" class=\"mu-navigation-menu-link flex-row items-center gap-2\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n            <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\n            <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\n          </svg>\n          قائمة الانتظار\n        </a>\n        <a href=\"#\" class=\"mu-navigation-menu-link flex-row items-center gap-2\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\" stroke-dasharray=\"2 4\"/>\n          </svg>\n          المهام\n        </a>\n        <a href=\"#\" class=\"mu-navigation-menu-link flex-row items-center gap-2\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n            <path d=\"m9 12 2 2 4-4\"/>\n          </svg>\n          منجز\n        </a>\n      </li>\n    </ul>\n  </@entry>\n  <@entry value=\"docs\" label=\"الوثائق\" href=\"/docs\"/>\n</NavigationMenu>","description":"Pass `dir=\"rtl\"` (with `align=\"end\"` to mirror the viewport) for right-to-left layout. Unlike dropdown-menu/menubar's static-wrapper RTL demos, `dir` here is a real @zag-js/navigation-menu machine prop our Input type re-exposes, so this drives the machine's own RTL positioning. The content is static Arabic rather than upstream's live language switcher (English/Arabic/Hebrew), which has no equivalent on this site."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","body":{"param":"NavigationMenuContentContext","description":"Extra markup appended to every open panel — headings, promos, footers.\nReceives the item's value; branch on it to render per item. Links belong in\nthe item's `links` array so the machine can wire them."},"nativeAttributes":"nav","itemTypes":[{"prop":"items","typeName":"NavigationMenuLinkItem","fields":[{"name":"type","type":"\"link\"","required":false},{"name":"value","type":"string","required":true},{"name":"label","type":"string","required":true},{"name":"href","type":"string","required":true},{"name":"current","type":"boolean","required":false},{"name":"disabled","type":"boolean","required":false}],"unionOf":"NavigationMenuItem"},{"prop":"items","typeName":"NavigationMenuMenuItem","fields":[{"name":"type","type":"\"menu\"","required":true},{"name":"value","type":"string","required":true},{"name":"label","type":"string","required":true},{"name":"disabled","type":"boolean","required":false},{"name":"links","type":"NavigationMenuPanelLink[]","required":false}],"unionOf":"NavigationMenuItem"},{"prop":"NavigationMenuMenuItem.links","typeName":"NavigationMenuPanelLink","fields":[{"name":"title","type":"string","required":true},{"name":"description","type":"string","required":false},{"name":"href","type":"string","required":true},{"name":"current","type":"boolean","required":false},{"name":"featured","type":"boolean","required":false}]}],"composition":"`<NavigationMenu>` renders the whole tree from its input — there is no separate trigger/content/link sub-component to compose:\n\n```text\nNavigationMenu (nav, data-slot=\"navigation-menu\")\n└── ul (data-slot=\"navigation-menu-list\")\n    ├── li (data-slot=\"navigation-menu-item\"), one per entry\n    │   ├── button (data-slot=\"navigation-menu-trigger\") — entries with type=\"menu\"\n    │   └── a (data-slot=\"navigation-menu-link\") — plain link entries\n    ├── div (data-slot=\"navigation-menu-indicator\") — caret that slides under the active trigger\n    └── div (data-slot=\"navigation-menu-viewport-positioner\")\n        └── div (data-slot=\"navigation-menu-viewport\") — shared animated panel\n            └── div (data-slot=\"navigation-menu-content\"), one per menu entry\n\nFeed entries as data with `items=[{ type: \"menu\" | \"link\", ... }]`, or compose them directly in markup with `<@entry>` attribute tags — both normalize to the same tree above. A menu entry's panel renders its `links=` array (with an optional `featured` lead link), a `content` body passed to `<@entry type=\"menu\">`, or the top-level `content` render-prop keyed by entry value."}