@aleph-alpha/ui-library 1.12.0 → 1.14.0

package/src/components/UiNavigationMenu/UiNavigationMenu.stories.ts

@@ -0,0 +1,1196 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref, watch } from 'vue';
+import {
+  UiNavigationMenu,
+  UiNavigationMenuList,
+  UiNavigationMenuItem,
+  UiNavigationMenuTrigger,
+  UiNavigationMenuContent,
+  UiNavigationMenuLink,
+  UiNavigationMenuIndicator,
+  navigationMenuTriggerStyle,
+} from './index';
+
+function useStoryModel(args: { modelValue?: string }) {
+  const value = ref(args.modelValue);
+  watch(
+    () => args.modelValue,
+    (v) => {
+      value.value = v;
+    },
+  );
+  return value;
+}
+
+const meta: Meta<typeof UiNavigationMenu> = {
+  title: 'Components/UiNavigationMenu',
+  component: UiNavigationMenu,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: {
+      control: 'text',
+      description: 'Controlled active menu item value (use with v-model:modelValue)',
+    },
+    defaultValue: {
+      control: 'text',
+      description: 'The value of the menu item that should be active when initially rendered',
+    },
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description: 'The orientation of the menu',
+    },
+    dir: {
+      control: 'select',
+      options: ['ltr', 'rtl'],
+      description: 'The reading direction of the menu',
+    },
+    delayDuration: {
+      control: 'number',
+      description: 'The duration from when the mouse enters a trigger until the content opens',
+    },
+    skipDelayDuration: {
+      control: 'number',
+      description:
+        'How much time a user has to enter another trigger without incurring a delay again',
+    },
+    disableClickTrigger: {
+      control: 'boolean',
+      description: 'Whether to disable the click trigger behavior',
+    },
+    disableHoverTrigger: {
+      control: 'boolean',
+      description: 'Whether to disable the hover trigger behavior',
+    },
+    viewport: {
+      control: 'boolean',
+      description: 'Whether to render the viewport element',
+    },
+  },
+  args: {
+    orientation: 'horizontal',
+    dir: 'ltr',
+    delayDuration: 200,
+    skipDelayDuration: 300,
+    disableClickTrigger: false,
+    disableHoverTrigger: false,
+    viewport: true,
+  },
+  parameters: {
+    docs: {
+      story: {
+        height: '400px',
+        inline: false,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UiNavigationMenu>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  UiNavigationMenu,
+  UiNavigationMenuList,
+  UiNavigationMenuItem,
+  UiNavigationMenuTrigger,
+  UiNavigationMenuContent,
+  UiNavigationMenuLink,
+  navigationMenuTriggerStyle,
+} from '@aleph-alpha/ui-library'
+
+const value = ref('')
+</script>
+
+<template>
+  <UiNavigationMenu v-model:modelValue="value">
+    <UiNavigationMenuList>
+      <UiNavigationMenuItem>
+        <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Home</UiNavigationMenuLink>
+      </UiNavigationMenuItem>
+
+      <UiNavigationMenuItem value="products">
+        <UiNavigationMenuTrigger>Products</UiNavigationMenuTrigger>
+        <UiNavigationMenuContent>
+          <ul class="grid w-[400px]">
+            <li>
+              <UiNavigationMenuLink href="#">
+                <div class="font-medium">Analytics</div>
+                <p class="text-sm text-muted-foreground">Track your metrics and KPIs</p>
+              </UiNavigationMenuLink>
+            </li>
+            <li>
+              <UiNavigationMenuLink href="#">
+                <div class="font-medium">Automation</div>
+                <p class="text-sm text-muted-foreground">Streamline your workflows</p>
+              </UiNavigationMenuLink>
+            </li>
+            <li>
+              <UiNavigationMenuLink href="#">
+                <div class="font-medium">Integrations</div>
+                <p class="text-sm text-muted-foreground">Connect with your favorite tools</p>
+              </UiNavigationMenuLink>
+            </li>
+          </ul>
+        </UiNavigationMenuContent>
+      </UiNavigationMenuItem>
+
+      <UiNavigationMenuItem>
+        <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">About</UiNavigationMenuLink>
+      </UiNavigationMenuItem>
+    </UiNavigationMenuList>
+  </UiNavigationMenu>
+</template>`;
+
+/**
+ * Basic navigation menu with 3 items (Home, Products, About). Products has dropdown content.
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: {
+      UiNavigationMenu,
+      UiNavigationMenuList,
+      UiNavigationMenuItem,
+      UiNavigationMenuTrigger,
+      UiNavigationMenuContent,
+      UiNavigationMenuLink,
+    },
+    setup() {
+      const value = useStoryModel(args);
+      return { args, value, navigationMenuTriggerStyle };
+    },
+    template: `<UiNavigationMenu
+      v-model:modelValue="value"
+      :orientation="args.orientation"
+      :dir="args.dir"
+      :delay-duration="args.delayDuration"
+      :skip-delay-duration="args.skipDelayDuration"
+      :disable-click-trigger="args.disableClickTrigger"
+      :disable-hover-trigger="args.disableHoverTrigger"
+      :viewport="args.viewport"
+    >
+      <UiNavigationMenuList>
+        <UiNavigationMenuItem>
+          <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Home</UiNavigationMenuLink>
+        </UiNavigationMenuItem>
+
+        <UiNavigationMenuItem value="products">
+          <UiNavigationMenuTrigger>Products</UiNavigationMenuTrigger>
+          <UiNavigationMenuContent>
+            <ul class="grid w-[400px]">
+              <li>
+                <UiNavigationMenuLink href="#">
+                  <div class="font-medium">Analytics</div>
+                  <p class="text-sm text-muted-foreground">Track your metrics and KPIs</p>
+                </UiNavigationMenuLink>
+              </li>
+              <li>
+                <UiNavigationMenuLink href="#">
+                  <div class="font-medium">Automation</div>
+                  <p class="text-sm text-muted-foreground">Streamline your workflows</p>
+                </UiNavigationMenuLink>
+              </li>
+              <li>
+                <UiNavigationMenuLink href="#">
+                  <div class="font-medium">Integrations</div>
+                  <p class="text-sm text-muted-foreground">Connect with your favorite tools</p>
+                </UiNavigationMenuLink>
+              </li>
+            </ul>
+          </UiNavigationMenuContent>
+        </UiNavigationMenuItem>
+
+        <UiNavigationMenuItem>
+          <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">About</UiNavigationMenuLink>
+        </UiNavigationMenuItem>
+      </UiNavigationMenuList>
+    </UiNavigationMenu>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: defaultTemplateSource,
+      },
+    },
+  },
+};
+
+const withLinksTemplateSource = `<script setup lang="ts">
+import {
+  UiNavigationMenu,
+  UiNavigationMenuList,
+  UiNavigationMenuItem,
+  UiNavigationMenuLink,
+  navigationMenuTriggerStyle,
+} from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiNavigationMenu>
+    <UiNavigationMenuList>
+      <UiNavigationMenuItem>
+        <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Home</UiNavigationMenuLink>
+      </UiNavigationMenuItem>
+      <UiNavigationMenuItem>
+        <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Features</UiNavigationMenuLink>
+      </UiNavigationMenuItem>
+      <UiNavigationMenuItem>
+        <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Pricing</UiNavigationMenuLink>
+      </UiNavigationMenuItem>
+      <UiNavigationMenuItem>
+        <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Contact</UiNavigationMenuLink>
+      </UiNavigationMenuItem>
+    </UiNavigationMenuList>
+  </UiNavigationMenu>
+</template>`;
+
+/**
+ * Navigation with simple links (no dropdowns).
+ */
+export const WithLinks: Story = {
+  render: (args) => ({
+    components: {
+      UiNavigationMenu,
+      UiNavigationMenuList,
+      UiNavigationMenuItem,
+      UiNavigationMenuLink,
+    },
+    setup() {
+      return { args, navigationMenuTriggerStyle };
+    },
+    template: `<UiNavigationMenu
+      :orientation="args.orientation"
+      :dir="args.dir"
+    >
+      <UiNavigationMenuList>
+        <UiNavigationMenuItem>
+          <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Home</UiNavigationMenuLink>
+        </UiNavigationMenuItem>
+        <UiNavigationMenuItem>
+          <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Features</UiNavigationMenuLink>
+        </UiNavigationMenuItem>
+        <UiNavigationMenuItem>
+          <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Pricing</UiNavigationMenuLink>
+        </UiNavigationMenuItem>
+        <UiNavigationMenuItem>
+          <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Contact</UiNavigationMenuLink>
+        </UiNavigationMenuItem>
+      </UiNavigationMenuList>
+    </UiNavigationMenu>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: withLinksTemplateSource,
+      },
+    },
+  },
+};
+
+const withIndicatorTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  UiNavigationMenu,
+  UiNavigationMenuList,
+  UiNavigationMenuItem,
+  UiNavigationMenuTrigger,
+  UiNavigationMenuContent,
+  UiNavigationMenuLink,
+  UiNavigationMenuIndicator,
+} from '@aleph-alpha/ui-library'
+
+const value = ref('')
+</script>
+
+<template>
+  <UiNavigationMenu v-model:modelValue="value">
+    <UiNavigationMenuList>
+      <UiNavigationMenuItem value="getting-started">
+        <UiNavigationMenuTrigger>Getting Started</UiNavigationMenuTrigger>
+        <UiNavigationMenuContent>
+          <ul class="grid w-[300px]">
+            <li>
+              <UiNavigationMenuLink href="#">
+                <div class="font-medium">Introduction</div>
+                <p class="text-sm text-muted-foreground">Learn the basics</p>
+              </UiNavigationMenuLink>
+            </li>
+            <li>
+              <UiNavigationMenuLink href="#">
+                <div class="font-medium">Installation</div>
+                <p class="text-sm text-muted-foreground">Get up and running</p>
+              </UiNavigationMenuLink>
+            </li>
+          </ul>
+        </UiNavigationMenuContent>
+      </UiNavigationMenuItem>
+
+      <UiNavigationMenuItem value="components">
+        <UiNavigationMenuTrigger>Components</UiNavigationMenuTrigger>
+        <UiNavigationMenuContent>
+          <ul class="grid w-[300px]">
+            <li>
+              <UiNavigationMenuLink href="#">
+                <div class="font-medium">Buttons</div>
+                <p class="text-sm text-muted-foreground">Interactive elements</p>
+              </UiNavigationMenuLink>
+            </li>
+            <li>
+              <UiNavigationMenuLink href="#">
+                <div class="font-medium">Forms</div>
+                <p class="text-sm text-muted-foreground">Input components</p>
+              </UiNavigationMenuLink>
+            </li>
+          </ul>
+        </UiNavigationMenuContent>
+      </UiNavigationMenuItem>
+
+      <UiNavigationMenuIndicator />
+    </UiNavigationMenuList>
+  </UiNavigationMenu>
+</template>`;
+
+/**
+ * Shows the indicator animation when hovering over menu items.
+ */
+export const WithIndicator: Story = {
+  render: (args) => ({
+    components: {
+      UiNavigationMenu,
+      UiNavigationMenuList,
+      UiNavigationMenuItem,
+      UiNavigationMenuTrigger,
+      UiNavigationMenuContent,
+      UiNavigationMenuLink,
+      UiNavigationMenuIndicator,
+    },
+    setup() {
+      const value = useStoryModel(args);
+      return { args, value };
+    },
+    template: `<UiNavigationMenu
+      v-model:modelValue="value"
+      :orientation="args.orientation"
+      :dir="args.dir"
+      :delay-duration="args.delayDuration"
+      :skip-delay-duration="args.skipDelayDuration"
+    >
+      <UiNavigationMenuList>
+        <UiNavigationMenuItem value="getting-started">
+          <UiNavigationMenuTrigger>Getting Started</UiNavigationMenuTrigger>
+          <UiNavigationMenuContent>
+            <ul class="grid w-[300px]">
+              <li>
+                <UiNavigationMenuLink href="#">
+                  <div class="font-medium">Introduction</div>
+                  <p class="text-sm text-muted-foreground">Learn the basics</p>
+                </UiNavigationMenuLink>
+              </li>
+              <li>
+                <UiNavigationMenuLink href="#">
+                  <div class="font-medium">Installation</div>
+                  <p class="text-sm text-muted-foreground">Get up and running</p>
+                </UiNavigationMenuLink>
+              </li>
+            </ul>
+          </UiNavigationMenuContent>
+        </UiNavigationMenuItem>
+
+        <UiNavigationMenuItem value="components">
+          <UiNavigationMenuTrigger>Components</UiNavigationMenuTrigger>
+          <UiNavigationMenuContent>
+            <ul class="grid w-[300px]">
+              <li>
+                <UiNavigationMenuLink href="#">
+                  <div class="font-medium">Buttons</div>
+                  <p class="text-sm text-muted-foreground">Interactive elements</p>
+                </UiNavigationMenuLink>
+              </li>
+              <li>
+                <UiNavigationMenuLink href="#">
+                  <div class="font-medium">Forms</div>
+                  <p class="text-sm text-muted-foreground">Input components</p>
+                </UiNavigationMenuLink>
+              </li>
+            </ul>
+          </UiNavigationMenuContent>
+        </UiNavigationMenuItem>
+
+        <UiNavigationMenuIndicator />
+      </UiNavigationMenuList>
+    </UiNavigationMenu>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: withIndicatorTemplateSource,
+      },
+    },
+  },
+};
+
+const verticalOrientationTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  UiNavigationMenu,
+  UiNavigationMenuList,
+  UiNavigationMenuItem,
+  UiNavigationMenuTrigger,
+  UiNavigationMenuContent,
+  UiNavigationMenuLink,
+  navigationMenuTriggerStyle,
+} from '@aleph-alpha/ui-library'
+
+const value = ref('')
+</script>
+
+<template>
+  <UiNavigationMenu v-model:modelValue="value" orientation="vertical">
+    <UiNavigationMenuList class="flex-col items-start">
+      <UiNavigationMenuItem>
+        <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Dashboard</UiNavigationMenuLink>
+      </UiNavigationMenuItem>
+
+      <UiNavigationMenuItem value="settings">
+        <UiNavigationMenuTrigger>Settings</UiNavigationMenuTrigger>
+        <UiNavigationMenuContent>
+          <ul class="grid gap-2 p-4 w-[200px]">
+            <li>
+              <UiNavigationMenuLink href="#" href="#">
+                Profile
+              </UiNavigationMenuLink>
+            </li>
+            <li>
+              <UiNavigationMenuLink href="#" href="#">
+                Account
+              </UiNavigationMenuLink>
+            </li>
+            <li>
+              <UiNavigationMenuLink href="#" href="#">
+                Security
+              </UiNavigationMenuLink>
+            </li>
+          </ul>
+        </UiNavigationMenuContent>
+      </UiNavigationMenuItem>
+
+      <UiNavigationMenuItem>
+        <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Help</UiNavigationMenuLink>
+      </UiNavigationMenuItem>
+    </UiNavigationMenuList>
+  </UiNavigationMenu>
+</template>`;
+
+/**
+ * Vertical menu layout for sidebar navigation.
+ */
+export const VerticalOrientation: Story = {
+  render: (args) => ({
+    components: {
+      UiNavigationMenu,
+      UiNavigationMenuList,
+      UiNavigationMenuItem,
+      UiNavigationMenuTrigger,
+      UiNavigationMenuContent,
+      UiNavigationMenuLink,
+    },
+    setup() {
+      const value = useStoryModel(args);
+      return { args, value, navigationMenuTriggerStyle };
+    },
+    template: `<UiNavigationMenu
+      v-model:modelValue="value"
+      orientation="vertical"
+      :dir="args.dir"
+      :delay-duration="args.delayDuration"
+      :skip-delay-duration="args.skipDelayDuration"
+    >
+      <UiNavigationMenuList class="flex-col items-start">
+        <UiNavigationMenuItem>
+          <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Dashboard</UiNavigationMenuLink>
+        </UiNavigationMenuItem>
+
+        <UiNavigationMenuItem value="settings">
+          <UiNavigationMenuTrigger>Settings</UiNavigationMenuTrigger>
+          <UiNavigationMenuContent>
+            <ul class="grid gap-2 p-4 w-[200px]">
+              <li>
+                <UiNavigationMenuLink href="#" href="#">
+                  Profile
+                </UiNavigationMenuLink>
+              </li>
+              <li>
+                <UiNavigationMenuLink href="#" href="#">
+                  Account
+                </UiNavigationMenuLink>
+              </li>
+              <li>
+                <UiNavigationMenuLink href="#" href="#">
+                  Security
+                </UiNavigationMenuLink>
+              </li>
+            </ul>
+          </UiNavigationMenuContent>
+        </UiNavigationMenuItem>
+
+        <UiNavigationMenuItem>
+          <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Help</UiNavigationMenuLink>
+        </UiNavigationMenuItem>
+      </UiNavigationMenuList>
+    </UiNavigationMenu>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: verticalOrientationTemplateSource,
+      },
+      story: {
+        height: '500px',
+      },
+    },
+  },
+};
+
+const withCustomContentTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  UiNavigationMenu,
+  UiNavigationMenuList,
+  UiNavigationMenuItem,
+  UiNavigationMenuTrigger,
+  UiNavigationMenuContent,
+  UiNavigationMenuLink,
+  navigationMenuTriggerStyle,
+} from '@aleph-alpha/ui-library'
+
+const value = ref('')
+</script>
+
+<template>
+  <UiNavigationMenu v-model:modelValue="value">
+    <UiNavigationMenuList>
+      <UiNavigationMenuItem value="products">
+        <UiNavigationMenuTrigger>Products</UiNavigationMenuTrigger>
+        <UiNavigationMenuContent>
+          <div class="grid gap-3 p-6 w-[600px] grid-cols-[.75fr_1fr]">
+            <div class="row-span-3 rounded-md bg-gradient-to-b from-muted/50 to-muted p-6">
+              <div class="mb-2 text-lg font-medium">Featured</div>
+              <p class="text-sm text-muted-foreground mb-4">
+                Our most popular product with advanced features and integrations.
+              </p>
+              <UiNavigationMenuLink href="#" class="text-sm font-medium text-primary hover:underline">
+                Learn more
+              </UiNavigationMenuLink>
+            </div>
+            <ul class="grid gap-3">
+              <li>
+                <UiNavigationMenuLink href="#">
+                  <div class="text-sm font-medium">Analytics Platform</div>
+                  <p class="text-sm text-muted-foreground">Real-time insights and reporting</p>
+                </UiNavigationMenuLink>
+              </li>
+              <li>
+                <UiNavigationMenuLink href="#">
+                  <div class="text-sm font-medium">Automation Suite</div>
+                  <p class="text-sm text-muted-foreground">Workflow automation tools</p>
+                </UiNavigationMenuLink>
+              </li>
+              <li>
+                <UiNavigationMenuLink href="#">
+                  <div class="text-sm font-medium">Developer API</div>
+                  <p class="text-sm text-muted-foreground">Build custom integrations</p>
+                </UiNavigationMenuLink>
+              </li>
+            </ul>
+          </div>
+        </UiNavigationMenuContent>
+      </UiNavigationMenuItem>
+
+      <UiNavigationMenuItem value="resources">
+        <UiNavigationMenuTrigger>Resources</UiNavigationMenuTrigger>
+        <UiNavigationMenuContent>
+          <ul class="grid w-[500px] gap-3 p-4 grid-cols-2">
+            <li>
+              <UiNavigationMenuLink href="#">
+                <div class="text-sm font-medium">Documentation</div>
+                <p class="text-sm text-muted-foreground">Guides and API reference</p>
+              </UiNavigationMenuLink>
+            </li>
+            <li>
+              <UiNavigationMenuLink href="#">
+                <div class="text-sm font-medium">Blog</div>
+                <p class="text-sm text-muted-foreground">Latest news and updates</p>
+              </UiNavigationMenuLink>
+            </li>
+            <li>
+              <UiNavigationMenuLink href="#">
+                <div class="text-sm font-medium">Community</div>
+                <p class="text-sm text-muted-foreground">Join the discussion</p>
+              </UiNavigationMenuLink>
+            </li>
+            <li>
+              <UiNavigationMenuLink href="#">
+                <div class="text-sm font-medium">Support</div>
+                <p class="text-sm text-muted-foreground">Get help from our team</p>
+              </UiNavigationMenuLink>
+            </li>
+          </ul>
+        </UiNavigationMenuContent>
+      </UiNavigationMenuItem>
+
+      <UiNavigationMenuItem>
+        <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Pricing</UiNavigationMenuLink>
+      </UiNavigationMenuItem>
+    </UiNavigationMenuList>
+  </UiNavigationMenu>
+</template>`;
+
+/**
+ * Rich dropdown content with grid layout (mega menu style).
+ */
+export const WithCustomContent: Story = {
+  render: (args) => ({
+    components: {
+      UiNavigationMenu,
+      UiNavigationMenuList,
+      UiNavigationMenuItem,
+      UiNavigationMenuTrigger,
+      UiNavigationMenuContent,
+      UiNavigationMenuLink,
+    },
+    setup() {
+      const value = useStoryModel(args);
+      return { args, value, navigationMenuTriggerStyle };
+    },
+    template: `<UiNavigationMenu
+      v-model:modelValue="value"
+      :orientation="args.orientation"
+      :dir="args.dir"
+      :delay-duration="args.delayDuration"
+      :skip-delay-duration="args.skipDelayDuration"
+    >
+      <UiNavigationMenuList>
+        <UiNavigationMenuItem value="products">
+          <UiNavigationMenuTrigger>Products</UiNavigationMenuTrigger>
+          <UiNavigationMenuContent>
+            <div class="grid gap-3 p-6 w-[600px] grid-cols-[.75fr_1fr]">
+              <div class="row-span-3 rounded-md bg-gradient-to-b from-muted/50 to-muted p-6">
+                <div class="mb-2 text-lg font-medium">Featured</div>
+                <p class="text-sm text-muted-foreground mb-4">
+                  Our most popular product with advanced features and integrations.
+                </p>
+                <UiNavigationMenuLink href="#" class="text-sm font-medium text-primary hover:underline">
+                  Learn more
+                </UiNavigationMenuLink>
+              </div>
+              <ul class="grid gap-3">
+                <li>
+                  <UiNavigationMenuLink href="#">
+                    <div class="text-sm font-medium">Analytics Platform</div>
+                    <p class="text-sm text-muted-foreground">Real-time insights and reporting</p>
+                  </UiNavigationMenuLink>
+                </li>
+                <li>
+                  <UiNavigationMenuLink href="#">
+                    <div class="text-sm font-medium">Automation Suite</div>
+                    <p class="text-sm text-muted-foreground">Workflow automation tools</p>
+                  </UiNavigationMenuLink>
+                </li>
+                <li>
+                  <UiNavigationMenuLink href="#">
+                    <div class="text-sm font-medium">Developer API</div>
+                    <p class="text-sm text-muted-foreground">Build custom integrations</p>
+                  </UiNavigationMenuLink>
+                </li>
+              </ul>
+            </div>
+          </UiNavigationMenuContent>
+        </UiNavigationMenuItem>
+
+        <UiNavigationMenuItem value="resources">
+          <UiNavigationMenuTrigger>Resources</UiNavigationMenuTrigger>
+          <UiNavigationMenuContent>
+            <ul class="grid w-[500px] gap-3 p-4 grid-cols-2">
+              <li>
+                <UiNavigationMenuLink href="#">
+                  <div class="text-sm font-medium">Documentation</div>
+                  <p class="text-sm text-muted-foreground">Guides and API reference</p>
+                </UiNavigationMenuLink>
+              </li>
+              <li>
+                <UiNavigationMenuLink href="#">
+                  <div class="text-sm font-medium">Blog</div>
+                  <p class="text-sm text-muted-foreground">Latest news and updates</p>
+                </UiNavigationMenuLink>
+              </li>
+              <li>
+                <UiNavigationMenuLink href="#">
+                  <div class="text-sm font-medium">Community</div>
+                  <p class="text-sm text-muted-foreground">Join the discussion</p>
+                </UiNavigationMenuLink>
+              </li>
+              <li>
+                <UiNavigationMenuLink href="#">
+                  <div class="text-sm font-medium">Support</div>
+                  <p class="text-sm text-muted-foreground">Get help from our team</p>
+                </UiNavigationMenuLink>
+              </li>
+            </ul>
+          </UiNavigationMenuContent>
+        </UiNavigationMenuItem>
+
+        <UiNavigationMenuItem>
+          <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Pricing</UiNavigationMenuLink>
+        </UiNavigationMenuItem>
+      </UiNavigationMenuList>
+    </UiNavigationMenu>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: withCustomContentTemplateSource,
+      },
+    },
+  },
+};
+
+const controlledStateTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  UiNavigationMenu,
+  UiNavigationMenuList,
+  UiNavigationMenuItem,
+  UiNavigationMenuTrigger,
+  UiNavigationMenuContent,
+  UiNavigationMenuLink,
+} from '@aleph-alpha/ui-library'
+
+// Controlled state - menu opens/closes based on this value
+const activeItem = ref('')
+
+// You can programmatically control which menu is open
+function openProducts() {
+  activeItem.value = 'products'
+}
+
+function closeAll() {
+  activeItem.value = ''
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="flex gap-2">
+      <button type="button" @click="openProducts" class="px-3 py-1 text-sm border rounded">
+        Open Products
+      </button>
+      <button type="button" @click="closeAll" class="px-3 py-1 text-sm border rounded">
+        Close All
+      </button>
+      <span class="text-sm text-muted-foreground">
+        Current value: "{{ activeItem }}"
+      </span>
+    </div>
+
+    <UiNavigationMenu v-model:modelValue="activeItem">
+      <UiNavigationMenuList>
+        <UiNavigationMenuItem value="products">
+          <UiNavigationMenuTrigger>Products</UiNavigationMenuTrigger>
+          <UiNavigationMenuContent>
+            <ul class="grid w-[300px]">
+              <li>
+                <UiNavigationMenuLink href="#">
+                  Product A
+                </UiNavigationMenuLink>
+              </li>
+              <li>
+                <UiNavigationMenuLink href="#">
+                  Product B
+                </UiNavigationMenuLink>
+              </li>
+            </ul>
+          </UiNavigationMenuContent>
+        </UiNavigationMenuItem>
+
+        <UiNavigationMenuItem value="services">
+          <UiNavigationMenuTrigger>Services</UiNavigationMenuTrigger>
+          <UiNavigationMenuContent>
+            <ul class="grid w-[300px]">
+              <li>
+                <UiNavigationMenuLink href="#">
+                  Service A
+                </UiNavigationMenuLink>
+              </li>
+              <li>
+                <UiNavigationMenuLink href="#">
+                  Service B
+                </UiNavigationMenuLink>
+              </li>
+            </ul>
+          </UiNavigationMenuContent>
+        </UiNavigationMenuItem>
+      </UiNavigationMenuList>
+    </UiNavigationMenu>
+  </div>
+</template>`;
+
+const keyboardNavigationTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  UiNavigationMenu,
+  UiNavigationMenuList,
+  UiNavigationMenuItem,
+  UiNavigationMenuTrigger,
+  UiNavigationMenuContent,
+  UiNavigationMenuLink,
+  navigationMenuTriggerStyle,
+} from '@aleph-alpha/ui-library'
+
+const value = ref('')
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="p-4 bg-muted rounded-md text-sm">
+      <p class="font-medium mb-2">Keyboard Navigation:</p>
+      <ul class="space-y-1 text-muted-foreground">
+        <li><kbd class="px-1 bg-background rounded">Tab</kbd> - Move focus to/from navigation</li>
+        <li><kbd class="px-1 bg-background rounded">Arrow Left/Right</kbd> - Navigate between menu items</li>
+        <li><kbd class="px-1 bg-background rounded">Enter</kbd> or <kbd class="px-1 bg-background rounded">Space</kbd> - Open dropdown / activate link</li>
+        <li><kbd class="px-1 bg-background rounded">Escape</kbd> - Close open dropdown</li>
+        <li><kbd class="px-1 bg-background rounded">Arrow Down</kbd> - Move focus into dropdown content</li>
+      </ul>
+    </div>
+
+    <UiNavigationMenu v-model:modelValue="value" aria-label="Main navigation" :disable-hover-trigger="true">
+      <UiNavigationMenuList>
+        <UiNavigationMenuItem>
+          <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Home</UiNavigationMenuLink>
+        </UiNavigationMenuItem>
+
+        <UiNavigationMenuItem value="products">
+          <UiNavigationMenuTrigger>Products</UiNavigationMenuTrigger>
+          <UiNavigationMenuContent>
+            <ul class="grid w-[300px]">
+              <li>
+                <UiNavigationMenuLink href="#">
+                  <div class="font-medium">Analytics</div>
+                  <p class="text-sm text-muted-foreground">Track your metrics</p>
+                </UiNavigationMenuLink>
+              </li>
+              <li>
+                <UiNavigationMenuLink href="#">
+                  <div class="font-medium">Automation</div>
+                  <p class="text-sm text-muted-foreground">Streamline workflows</p>
+                </UiNavigationMenuLink>
+              </li>
+            </ul>
+          </UiNavigationMenuContent>
+        </UiNavigationMenuItem>
+
+        <UiNavigationMenuItem value="resources">
+          <UiNavigationMenuTrigger>Resources</UiNavigationMenuTrigger>
+          <UiNavigationMenuContent>
+            <ul class="grid w-[300px]">
+              <li>
+                <UiNavigationMenuLink href="#">
+                  <div class="font-medium">Documentation</div>
+                  <p class="text-sm text-muted-foreground">Guides and API reference</p>
+                </UiNavigationMenuLink>
+              </li>
+              <li>
+                <UiNavigationMenuLink href="#">
+                  <div class="font-medium">Support</div>
+                  <p class="text-sm text-muted-foreground">Get help from our team</p>
+                </UiNavigationMenuLink>
+              </li>
+            </ul>
+          </UiNavigationMenuContent>
+        </UiNavigationMenuItem>
+
+        <UiNavigationMenuItem>
+          <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Contact</UiNavigationMenuLink>
+        </UiNavigationMenuItem>
+      </UiNavigationMenuList>
+    </UiNavigationMenu>
+  </div>
+</template>`;
+
+const withActivePageTemplateSource = `<script setup lang="ts">
+import {
+  UiNavigationMenu,
+  UiNavigationMenuList,
+  UiNavigationMenuItem,
+  UiNavigationMenuLink,
+  navigationMenuTriggerStyle,
+} from '@aleph-alpha/ui-library'
+
+// In a real app, you would determine active state based on current route
+const currentPage = 'features'
+</script>
+
+<template>
+  <UiNavigationMenu aria-label="Main navigation">
+    <UiNavigationMenuList>
+      <UiNavigationMenuItem>
+        <UiNavigationMenuLink href="#" :active="currentPage === 'home'" :class="navigationMenuTriggerStyle()">Home</UiNavigationMenuLink>
+      </UiNavigationMenuItem>
+      <UiNavigationMenuItem>
+        <UiNavigationMenuLink href="#" :active="currentPage === 'features'" :class="navigationMenuTriggerStyle()">Features</UiNavigationMenuLink>
+      </UiNavigationMenuItem>
+      <UiNavigationMenuItem>
+        <UiNavigationMenuLink href="#" :active="currentPage === 'pricing'" :class="navigationMenuTriggerStyle()">Pricing</UiNavigationMenuLink>
+      </UiNavigationMenuItem>
+      <UiNavigationMenuItem>
+        <UiNavigationMenuLink href="#" :active="currentPage === 'contact'" :class="navigationMenuTriggerStyle()">Contact</UiNavigationMenuLink>
+      </UiNavigationMenuItem>
+    </UiNavigationMenuList>
+  </UiNavigationMenu>
+</template>`;
+
+/**
+ * Demonstrates v-model:modelValue for controlled active state.
+ * Use the buttons to programmatically control which menu item is open.
+ */
+export const ControlledState: Story = {
+  render: (args) => ({
+    components: {
+      UiNavigationMenu,
+      UiNavigationMenuList,
+      UiNavigationMenuItem,
+      UiNavigationMenuTrigger,
+      UiNavigationMenuContent,
+      UiNavigationMenuLink,
+    },
+    setup() {
+      const activeItem = ref(args.modelValue || '');
+      watch(
+        () => args.modelValue,
+        (v) => {
+          activeItem.value = v || '';
+        },
+      );
+
+      function openProducts() {
+        activeItem.value = 'products';
+      }
+
+      function closeAll() {
+        activeItem.value = '';
+      }
+
+      return { args, activeItem, openProducts, closeAll };
+    },
+    template: `<div class="space-y-4">
+      <div class="flex gap-2 items-center">
+        <button type="button" @click="openProducts" class="px-3 py-1 text-sm border rounded hover:bg-muted">
+          Open Products
+        </button>
+        <button type="button" @click="closeAll" class="px-3 py-1 text-sm border rounded hover:bg-muted">
+          Close All
+        </button>
+        <span class="text-sm text-muted-foreground">
+          Current value: "{{ activeItem }}"
+        </span>
+      </div>
+
+      <UiNavigationMenu
+        v-model:modelValue="activeItem"
+        :orientation="args.orientation"
+        :dir="args.dir"
+        :delay-duration="args.delayDuration"
+        :skip-delay-duration="args.skipDelayDuration"
+      >
+        <UiNavigationMenuList>
+          <UiNavigationMenuItem value="products">
+            <UiNavigationMenuTrigger>Products</UiNavigationMenuTrigger>
+            <UiNavigationMenuContent>
+              <ul class="grid w-[300px]">
+                <li>
+                  <UiNavigationMenuLink href="#">
+                    Product A
+                  </UiNavigationMenuLink>
+                </li>
+                <li>
+                  <UiNavigationMenuLink href="#">
+                    Product B
+                  </UiNavigationMenuLink>
+                </li>
+              </ul>
+            </UiNavigationMenuContent>
+          </UiNavigationMenuItem>
+
+          <UiNavigationMenuItem value="services">
+            <UiNavigationMenuTrigger>Services</UiNavigationMenuTrigger>
+            <UiNavigationMenuContent>
+              <ul class="grid w-[300px]">
+                <li>
+                  <UiNavigationMenuLink href="#">
+                    Service A
+                  </UiNavigationMenuLink>
+                </li>
+                <li>
+                  <UiNavigationMenuLink href="#">
+                    Service B
+                  </UiNavigationMenuLink>
+                </li>
+              </ul>
+            </UiNavigationMenuContent>
+          </UiNavigationMenuItem>
+        </UiNavigationMenuList>
+      </UiNavigationMenu>
+    </div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: controlledStateTemplateSource,
+      },
+    },
+  },
+};
+
+/**
+ * Demonstrates keyboard navigation support. Click on a menu item and use
+ * Arrow keys to navigate, Enter/Space to activate, and Escape to close.
+ * Hover is disabled in this example to better demonstrate keyboard interaction.
+ */
+export const KeyboardNavigation: Story = {
+  render: (args) => ({
+    components: {
+      UiNavigationMenu,
+      UiNavigationMenuList,
+      UiNavigationMenuItem,
+      UiNavigationMenuTrigger,
+      UiNavigationMenuContent,
+      UiNavigationMenuLink,
+    },
+    setup() {
+      const value = useStoryModel(args);
+      return { args, value, navigationMenuTriggerStyle };
+    },
+    template: `<div class="space-y-4">
+      <div class="p-4 bg-muted rounded-md text-sm">
+        <p class="font-medium mb-2">Keyboard Navigation:</p>
+        <ul class="space-y-1 text-muted-foreground">
+          <li><kbd class="px-1 bg-background rounded">Tab</kbd> - Move focus to/from navigation</li>
+          <li><kbd class="px-1 bg-background rounded">Arrow Left/Right</kbd> - Navigate between menu items</li>
+          <li><kbd class="px-1 bg-background rounded">Enter</kbd> or <kbd class="px-1 bg-background rounded">Space</kbd> - Open dropdown / activate link</li>
+          <li><kbd class="px-1 bg-background rounded">Escape</kbd> - Close open dropdown</li>
+          <li><kbd class="px-1 bg-background rounded">Arrow Down</kbd> - Move focus into dropdown content</li>
+        </ul>
+      </div>
+
+      <UiNavigationMenu
+        v-model:modelValue="value"
+        aria-label="Main navigation"
+        :disable-hover-trigger="true"
+        :dir="args.dir"
+      >
+        <UiNavigationMenuList>
+          <UiNavigationMenuItem>
+            <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Home</UiNavigationMenuLink>
+          </UiNavigationMenuItem>
+
+          <UiNavigationMenuItem value="products">
+            <UiNavigationMenuTrigger>Products</UiNavigationMenuTrigger>
+            <UiNavigationMenuContent>
+              <ul class="grid w-[300px]">
+                <li>
+                  <UiNavigationMenuLink href="#">
+                    <div class="font-medium">Analytics</div>
+                    <p class="text-sm text-muted-foreground">Track your metrics</p>
+                  </UiNavigationMenuLink>
+                </li>
+                <li>
+                  <UiNavigationMenuLink href="#">
+                    <div class="font-medium">Automation</div>
+                    <p class="text-sm text-muted-foreground">Streamline workflows</p>
+                  </UiNavigationMenuLink>
+                </li>
+              </ul>
+            </UiNavigationMenuContent>
+          </UiNavigationMenuItem>
+
+          <UiNavigationMenuItem value="resources">
+            <UiNavigationMenuTrigger>Resources</UiNavigationMenuTrigger>
+            <UiNavigationMenuContent>
+              <ul class="grid w-[300px]">
+                <li>
+                  <UiNavigationMenuLink href="#">
+                    <div class="font-medium">Documentation</div>
+                    <p class="text-sm text-muted-foreground">Guides and API reference</p>
+                  </UiNavigationMenuLink>
+                </li>
+                <li>
+                  <UiNavigationMenuLink href="#">
+                    <div class="font-medium">Support</div>
+                    <p class="text-sm text-muted-foreground">Get help from our team</p>
+                  </UiNavigationMenuLink>
+                </li>
+              </ul>
+            </UiNavigationMenuContent>
+          </UiNavigationMenuItem>
+
+          <UiNavigationMenuItem>
+            <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Contact</UiNavigationMenuLink>
+          </UiNavigationMenuItem>
+        </UiNavigationMenuList>
+      </UiNavigationMenu>
+    </div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: keyboardNavigationTemplateSource,
+      },
+      story: {
+        height: '600px',
+      },
+    },
+  },
+};
+
+/**
+ * Demonstrates active page indication with aria-current="page".
+ * The active link is visually highlighted and announced to screen readers.
+ */
+export const WithActivePage: Story = {
+  render: () => ({
+    components: {
+      UiNavigationMenu,
+      UiNavigationMenuList,
+      UiNavigationMenuItem,
+      UiNavigationMenuLink,
+    },
+    setup() {
+      return { navigationMenuTriggerStyle };
+    },
+    template: `<UiNavigationMenu aria-label="Main navigation">
+      <UiNavigationMenuList>
+        <UiNavigationMenuItem>
+          <UiNavigationMenuLink href="#" :active="false" :class="navigationMenuTriggerStyle()">Home</UiNavigationMenuLink>
+        </UiNavigationMenuItem>
+        <UiNavigationMenuItem>
+          <UiNavigationMenuLink href="#" :active="true" :class="navigationMenuTriggerStyle()">Features</UiNavigationMenuLink>
+        </UiNavigationMenuItem>
+        <UiNavigationMenuItem>
+          <UiNavigationMenuLink href="#" :active="false" :class="navigationMenuTriggerStyle()">Pricing</UiNavigationMenuLink>
+        </UiNavigationMenuItem>
+        <UiNavigationMenuItem>
+          <UiNavigationMenuLink href="#" :active="false" :class="navigationMenuTriggerStyle()">Contact</UiNavigationMenuLink>
+        </UiNavigationMenuItem>
+      </UiNavigationMenuList>
+    </UiNavigationMenu>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: withActivePageTemplateSource,
+      },
+    },
+  },
+};