Responsive Menu Items in <UNavigationMenu>

[frankdema]

Description

Description

Problem Statement:
When using a horizontal layout, having too many menu items can lead to a cluttered interface on smaller screens. This can negatively impact the user experience as the menu becomes overwhelming or improperly formatted.

Desired Functionality:
We propose that implements an internal mechanism to manage responsive menu item display. This functionality should work as follows:

Horizontal Mode:
When the menu is rendered horizontally, items that are configured with the optional hideOnMobile property should only be displayed if the screen width exceeds the specified breakpoint (e.g., 'lg'). This allows for a cleaner, less crowded horizontal menu on mobile devices.

Fallback Behavior:
If a menu item does not have a hideOnMobile property defined, it should always be displayed, regardless of screen size.

Vertical Mode:
The responsive hiding functionality should only apply when the menu is in horizontal mode. In vertical mode, all menu items should remain visible, independent of any hideOnMobile settings.

Benefits for Developers:
This approach provides a clear and flexible API, allowing developers to simply set the desired breakpoint directly in the menu items configuration. The component will then automatically apply the appropriate CSS classes based on the current layout and screen size. This keeps the menu configuration clean and minimizes manual CSS adjustments while ensuring a consistent and user-friendly interface across different devices.

const items = [
  {
    label: 'Always Visible',
    to: '/always'
  },
  {
    label: 'Responsive Item',
    to: '/responsive',
    hideOnMobile: 'lg'
  }
]

Additional context

No response

Additional context

No response

[benjamincanac]

You should use slots to achieve this: https://ui3.nuxt.dev/components/navigation-menu#with-content-slot

[frankdema]

Hello benjamincanac,

Thank you for your response. Unfortunately, I haven’t been able to get the slot approach to work, and I have no idea how to determine whether the menu is displayed in horizontal or vertical mode – the intention is for the menu items to be hidden only in the horizontal layout.

It would be much simpler if I could just specify a parameter like hideOnMobile: 'lg'. Perhaps you could include a corresponding example in the documentation that shows how to define all menu items in a single array, and then:

• When the screen width is larger than, for example, xl, all items are visible.
• When it is between lg and xl, only fewer items are shown.
• When it is smaller than, say, lg, only the hamburger menu appears, which then displays the menu in a vertical layout (for mobile devices).

Best regards

[benjamincanac]

Have you tried adding class: 'lg:hidden'?