Add `visible` option to NavigationMenuItem for conditional rendering

[anhthang]

Package

v4.0.0-alpha.x

Description

Currently, all NavigationMenuItem entries are always rendered if included in the items prop.
There is no built-in way to conditionally hide or show an item without removing it from the array.

This feature request adds a new boolean option visible to NavigationMenuItem.

export interface NavigationMenuItem {
  ...
  /**
   * Control whether the item should be rendered.
   * @defaultValue true
   */
  visible?: boolean
}

• If visible: false → the item (and its children) will not be rendered in the menu.
• If omitted, it defaults to true.

Additional context

• Useful for conditionally hiding menu entries (e.g., based on permissions, feature flags, or environment).
• Avoids the need to dynamically mutate the items array in parent components.
• Keeps the developer experience simple and consistent with existing props.

[benjamincanac]

There was already an issue related but couldn't find it. I'm not really in favor of this because it would need to be implemented in every component having an items prop for consistency which would add complexity to all components.

But most importantly, the logic needed on the user's side to add this prop requires almost the same effort as filtering the array in the first place. To make this prop reactive you would need to wrap your items in a computed anyway:

<script setup lang="ts">
const visible = ref(false)

const items = computed(() => [
  {
    label: 'Show Bookmarks',
    icon: 'i-lucide-bookmark'
  },
- !!visible.value && {
+ {
    label: 'Show History',
    icon: 'i-lucide-clock',
+   visible: visible.value
  }
-].filter(Boolean))
+])
</script>