- Issue created by @mortona2k
- Status changed to Needs review
24 days ago 10:20am 23 July 2025
When navbar sections are printed as page.navbar_start, an extra div is wrapping items, coming from the region.
This means that placing dropdown components in the navbar are getting stacked, since they're not in the same flex container.
Add blocks to the navbar component so they can be overridden:
<div {{ attributes.addClass('navbar') }}>
{% block start_content %}
<div class="navbar-start">
{{ start }}
</div>
{% endblock %}
{% block center_content %}
<div class="navbar-center">
{{ center }}
</div>
{% endblock %}
{% block end_content %}
<div class="navbar-end">
{{ end }}
</div>
{% endblock %}
</div>
</div>
And in region.html.twig:
{% if region in ['navbar_start', 'navbar_center', 'navbar_end'] %}
<div{{ attributes.addClass(region|clean_class) }}>
{{ content }}
</div>
{% else %}
{% if content %}
<div{{ attributes }}>
{{ content }}
</div>
{% endif %}
{% endif %}
And in page.html.twig:
{% embed 'ui_suite_daisyui:navbar' %}
{% block start_content %}
{{ page.navbar_start }}
{% endblock %}
{% block center_content %}
{{ page.navbar_center }}
{% endblock %}
{% block end_content %}
{{ page.navbar_end }}
{% endblock %}
{% endembed %}
Active
5.0
Code