Unanswered

Left menu navigation bar options

(0) Share

Report

Posted on by PN-28081327-0

Hi all

I have a question regarding the portal menu. Instead of showing it at the top of the portal we want to show it in a panel on the left.

In addition we want to group the menu items into vertically collapsible groups where the group will contain related menu items e.g.

Furthermore we also want to be able to collapse the menu groups horizontally into icons, similar to the Microsoft 365 menu structure e.g.

We are also considering the hamburger menu control to fully collapse the menu structure.

We are considering using kendo to achieve this. Any advice would be welcome.

Many Thanks

Categories:

General topics

I have the same question (0)

All responses (3)

Answers (0)

Lucas001 2,429 Super User 2025 Season 2 on at

Like (0)

Report

Hi @paulinolan,

I think that link will help you: https://www.inogic.com/blog/2023/08/design-custom-sidebar-within-microsoft-power-pages/

There is another tutorial from MS themselves: https://learn.microsoft.com/en-us/power-pages/getting-started/tutorial-add-custom-page-layout#step-1-create-a-web-template-and-write-the-liquid-template-code

--------------------------------------------------------------------------------------

Hope that helps.

If the post solves your problem, please mark it as solution. If it helps, consider a thumbs up.

Was this reply helpful? Yes No
PreetSharma 18 on at

Like (0)

Report

Hi,
You can try by creating a web template having navigation in it and then include that template in each page.
Something like below will work:

<div class="col-md-3" style="padding-left:0px;">
{% assign profile_nav = weblinks[WEBLINKSET NAME] %}
<div class="xrm-editable-adx_weblinkset xrm-entity">
<div class="weblinks-depth-1 weblinks list-group" data-weblinks-depth="1">
{% for link in profile_nav.weblinks %}
<a class="weblink list-group-item" href="{{link.url}}" title="{{link.name}}" aria-label="{{link.name}}"><span class="weblink-name">{{link.name}}</span></a>
{% endfor %}
</div>
</div>
</div>

Was this reply helpful? Yes No
Jady 147 on at

Like (0)

Report

You don't need Kendo to create a side navigation menu. There's already a web template with side navigation. Depending which Power Pages template you chose to begin with, it might need some setup and configuration.

You could probably mimic the open/close behaviour of the icons & link text with CSS :focus, or a little jQuery hide/show.

Was this reply helpful? Yes No