web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Pages / Anyone know how to add...
Power Pages
Unanswered

Anyone know how to add a dropdown to the header?

(0) ShareShare
ReportReport
Posted on by 457

Greetings, community. I am trying to replicate the Pages dropdown in the menu but populate it with data. I know I'll need to Liquid to achieve this, but I'm having trouble figuring out how to create and add a dropdown to the menu.

 

arpost_0-1684937293534.png

 

Categories:
I have the same question (0)
  • Christian Leverenz Profile Picture
    1,214 on at

    Hi @arpost ,

    late answer, i know :-).

    The standard header template (in my installation) renders the menu sth like this:

    ...
     <nav aria-label="{{ resx.Main_Navigation | default: "Main Navigation" }}" class="navbar-right menu-bar {% if primary_nav.editable %}xrm-entity xrm-editable-adx_weblinkset{% endif %}" data-weblinks-maxdepth="2">
     <ul class="nav navbar-nav weblinks">
     {% for link in primary_nav.weblinks %}
     {% unless forloop.first %}
     <li class="divider-vertical" aria-hidden="true"></li>
     {% endunless %}
     {% if link.display_page_child_links %}
     {% if link.url != null %}
     {% assign sublinks = sitemap[link.url].children %}
     {% endif %}
     {% else %}
     {% assign sublinks = link.weblinks %}
     {% endif %}
     <li class="weblink {% if sublinks.size > 0 %} dropdown{% endif %}">
     <a aria-label="{{ link.name | escape }}" aria-roledescription = "link" {% if sublinks.size > 0 -%} href="#" class="dropdown-toggle" data-toggle="dropdown" {%- else -%} href="{{ link.url | escape }}" {%- endif -%} {%- if link.Open_In_New_Window %} target="_blank" {% endif -%} {%- if link.nofollow %} rel="nofollow" {% endif -%} {%- if link.tooltip %} title="{{ link.tooltip | escape }}" {% endif %}>
     {%- if link.image -%}
     {%- if link.image.url -%}
     {%- if link.image.url.first == '.' -%}
     <span class="{{ link.image.url | split:'.' | join }}" aria-hidden="true"></span>
     {%- endif -%}
     {%- else -%}
     <img src="{{ link.image.url | escape }}" alt="{{ link.image.alternate_text | default:link.tooltip | escape }}" {% if link.image.width %}width="{{ link.image.width | escape }}" {% endif %} {% if link.image.height %}height="{{ link.image.height | escape }}" {% endif %} />
     {%- endif -%}
     {%- endif -%}
     {%- unless link.display_image_only -%}
     {{ link.name | escape }}
     {%- endunless -%}
     {%- if sublinks.size > 0 -%}
     <span class="caret"></span>
     {%- endif -%}
     </a>
     {% if sublinks.size > 0 %}
     <ul class="dropdown-menu" aria-roledescription = "link">
     {% if link.name %}
     <li>
    ...

    so, in principle its an unnumbered list of items. You could just copy this standard and add another li below (or above, depending where you want it) of equal items with your informations.

    The informations could be read by a fetchxml (do not forget to give permissions to the data to be read)

    When the modifications are done, just use your template as the header template in your website and you should be done.

    !Watch out! The header is subject of heavy caching. So, when your data changes, it might take a while in order to see the changes. So, when the data in the header is for example user or language dependent, you should consider switchig off the header cache (!of course performance loss) or try to apply the principles advised here: https://learn.microsoft.com/en-us/power-pages/configure/enable-header-footer-output-caching (never tried it by my own...). But i do not know your concrete requirement 🙂

    Have fun,

      Christian

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Introducing the 2026 Season 1 community Super Users

Congratulations to our 2026 Super Users!

Kudos to our 2025 Community Spotlight Honorees

Congratulations to our 2025 community superstars!

Leaderboard > Power Pages

#1
Suriyanarayanan V Profile Picture

Suriyanarayanan V 45

#2
oliver.rodrigues Profile Picture

oliver.rodrigues 14 Most Valuable Professional

#3
Fubar Profile Picture

Fubar 6 Super User 2026 Season 1

Last 30 days Overall leaderboard