Responsive Menu

Created on 18 July 2025, 29 days ago

The menu is rendered by https://git.drupalcode.org/project/ui_suite_daisyui/-/blob/5.0.x/templat... =

{% if items %}
  {{ include('my_daisyui_theme:menu', {
  items: items,
  variant: 'horizontal__md',
  collapsible: 'closed',
  }, with_context: false) }}
{% endif %}

https://git.drupalcode.org/project/ui_suite_daisyui/-/blob/5.0.x/compone... has 10 Variants = vertical menu with 5 sizes and horizontal menu with 5 sizes, but does not have a responsive option ie vertical menu for a phone, switching to a horizontal menu for bigger screens.

https://daisyui.com/components/menu/ does this with

<ul class="menu menu-vertical lg:menu-horizontal bg-base-200 rounded-box">
  <li><a>Item 1</a></li>
  <li><a>Item 2</a></li>
  <li><a>Item 3</a></li>
</ul>

So maybe we just need another Variant to add the class lg:menu-horizontal - but this simple Daisy example above does not mention the size suffix - so to include the five size options might need a crazy amount of Variants ie each of the 5 vertical sizes could be combined with each of the 5 horizontal sizes so I think that would be 5 x 5 = 25 new Variants required ??

Another thing is I would say “Normal menu behaviour”, and I think most site builders today would expect this option OOTB (even Olivero theme does this OOTB), is that the vertical menu is hidden on page load and then displays on click of a menu icon (hamburger or similar).

So does https://www.drupal.org/project/ui_suite_daisyui want to provide this behaviour OOTB ? (I hope yes).

If yes, can https://daisyui.com/components/menu/ do this? I think no, because the vertical menu just displays immediately on page load. Perhaps Pouya expects you to provide your own javascript.

There is also https://daisyui.com/components/navbar/ “responsive (dropdown menu on small screen, center menu on large screen)" - but this is actually two different menus in the html ie is not intended for the scenario of one menu with two orientations. I think it could do the job of one menu with two displays but would have the undesirable result of duplicating the menu html.

So a question is should https://www.drupal.org/project/ui_suite_daisyui is provide this “Normal menu behaviour” option OOTB ? Or not provide it and expect each Drupal website to find / implement a solution with javascript etc ?

📌 Task
Status

Active

Version

5.0

Component

User interface

Created by

🇬🇧United Kingdom juc1

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024