diff --git a/docs/content/3.components/navigation-menu.md b/docs/content/3.components/navigation-menu.md index 344f5da8..a8764c24 100644 --- a/docs/content/3.components/navigation-menu.md +++ b/docs/content/3.components/navigation-menu.md @@ -137,7 +137,7 @@ Each item can take a `children` array of objects with the following properties t Use the `orientation` prop to change the orientation of the NavigationMenu. -When orientation is `vertical`, a [Collapsible](/components/collapsible) component is used to display children. +When orientation is `vertical`, a [Collapsible](/components/collapsible) component is used to display children. You can control the open state of each item using the `open` and `defaultOpen` properties. ::component-code --- @@ -152,6 +152,7 @@ props: items: - - label: Guide icon: i-lucide-book-open + defaultOpen: true children: - label: Introduction description: Fully styled and customizable components for Nuxt. diff --git a/playground/app/pages/components/navigation-menu.vue b/playground/app/pages/components/navigation-menu.vue index 3eaa0393..ebd2ca1f 100644 --- a/playground/app/pages/components/navigation-menu.vue +++ b/playground/app/pages/components/navigation-menu.vue @@ -8,7 +8,7 @@ const orientations = Object.keys(theme.variants.orientation) const color = ref(theme.defaultVariants.color) const highlightColor = ref() const variant = ref(theme.defaultVariants.variant) -const orientation = ref('horizontal' as const) +const orientation = ref('vertical' as const) const highlight = ref(true) const items = [ @@ -16,6 +16,7 @@ const items = [ label: 'Documentation', icon: 'i-lucide-book-open', badge: 10, + defaultOpen: true, children: [{ label: 'Introduction', description: 'Fully styled and customizable components for Nuxt.', diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue index 697577cb..46e86ad6 100644 --- a/src/runtime/components/NavigationMenu.vue +++ b/src/runtime/components/NavigationMenu.vue @@ -1,6 +1,6 @@