Browser: Chrome 110 OS: macOS / Windows / Linux / etc. URL: Link to a page that illustrates this issue Video: Short screen recording that illustrates this issue (free tool: jam.dev)
Hello,
In the dropdown element, if we select the content item, it displays a div tag. however, on the front end, it has a ul tag. It would be great if we could configure the dropdown content so that it doesn’t use ul and li tags. This will be useful for creating a Mini Cart dropdown in version 2.4.
This is expected behavior for the regular Dropdown element. Bricks renders regular dropdown content as a navigation list structure, so the content wrapper becomes ul and child items are wrapped as li items on the frontend.
For a custom structure such as a Mini Cart dropdown, enable Mega menu on the Dropdown element. In Mega menu mode, Bricks does not automatically wrap children in li tags, and the Dropdown Content HTML tag control can be used for a custom wrapper.
Thanks for the guidance. Just one thing: the mega menu defaults to full width, and the “Min. width” control in the dropdown content group doesn’t seem to work at all. So, how can we set a custom width for the mega menu content for example, 300px?
Yes. In the current release, Mega menu mode uses the horizontal CSS selector/reference width for the panel and defaults to the available page width. That is why the normal Content > Min. width control can appear ineffective for a fixed small panel.
For a 300px panel today, either set the Mega menu CSS selector to an element that is 300px wide, or add custom CSS to this Dropdown element: