Grav menus including visble modular component links

navigation.html.twig

{% macro loop(page) %}

	{% set menu_pages = page.children.visible %}

	{# set menu_pages = menu_pages|merge(page.children.modular) #} {# don't know why, but this array merge fails majorly #}
	{# set menu_pages = page.evaluate([{'@page.children.visible': '/', '@page.modular':'/'}]) #}
	{# so .. #}
	{% for frag in page.children.modular if frag.header.visible %}
		{% set menu_pages = menu_pages.addPage(frag) %}
	{% endfor %}

    {% for p in menu_pages %}

        {% set current_page = (p.active or p.activeChild) ? 'active' : '' %}

		{% set has_visible_modular_children = false %}
		{% for frag in p.children.modular if frag.header.visible %}
			{% set has_visible_modular_children = true %}
		{% endfor %}

        {% if p.children.visible.count > 0 or has_visible_modular_children %}
            <li class="has-children {{ current_page }}">
                <a href="{{ p.url }}">
                    {% if p.header.icon %}<i class="fa fa-{{ p.header.icon }}"></i>{% endif %}
                    {{ p.menu }}
                    <span></span>
                </a>
                <ul>
                    {{ _self.loop(p) }}
                </ul>
            </li>
        {% else %}

			{% if p.modular %}
				{% set url_prefix = (p.parent.active or p.parent.activeChild) ? '' : page.url ~ '/' %}
				<li><a href="{{ url_prefix }}#{{ p.header.id }}">{{ p.menu }}</a></li>

			{% else %}
				<li class="{{ current_page }}">
					<a href="{{ p.url }}">
						{% if p.header.icon %}<i class="fa fa-{{ p.header.icon }}"></i>{% endif %}
						{{ p.menu }}
					</a>
				</li>
            {% endif %}

        {% endif %}
    {% endfor %}
{% endmacro %}

<ul class="navigation">
    {% if theme_config.dropdown.enabled %}
        {{ _self.loop(pages) }}
    {% else %}
        {% for page in pages.children.visible %}
            {% set current_page = (page.active or page.activeChild) ? 'active' : '' %}
            <li class="{{ current_page }}">
                <a href="{{ page.url }}">
                    {% if page.header.icon %}<i class="fa fa-{{ page.header.icon }}"></i>{% endif %}
                    {{ page.menu }}
                </a>
            </li>
        {% endfor %}
    {% endif %}
    {% for mitem in site.menu %}
        <li>
            <a href="{{ mitem.url }}">
                {% if mitem.icon %}<i class="fa fa-{{ mitem.icon }}"></i>{% endif %}
                {{ mitem.text }}
            </a>
        </li>
    {% endfor %}
    {% if config.plugins.login.enabled and grav.user.username %}
        <li><i class="fa fa-lock"></i> {% include 'partials/login-status.html.twig' %}</li>
    {% endif %}
</ul>

Refer https://gitter.im/getgrav/grav?at=587f4058cbcb28177084b363 for context

Second revision is my final workaround.