Page 1 of 1

Text support in Morpheus top-level menu

Posted: 14 Dec 2019, 09:59
by auzair
Hi. I'm interested in purchasing Morpheus PrimeNG template. I have a couple of questions before I proceed.
  • Can I use the Morpheus template offline for a project that will be used on my local network? Or is there any functionality in the template that shall need online connectivity?
  • One of the reasons I have chosen Morpheus template is because I like its hierarchical menu structure. Top-level menu in Morpheus has icons only (Features, Inbox, Calendar, Projects, etc.). My question is, can I replace the icons in this top-level menu with some text of my choice? I mean that instead of the Folder icon for Features menu item, can I display "Features" as text?
Thank you.

Re: Text support in Morpheus top-level menu

Posted: 16 Dec 2019, 10:52
by merve7
Hi,
  • Firstly, yes you can use offline and you don't need online connectivity for functionalities.
  • Secondly, yes you can use text instead of icons but you may need to add or change some style(really small changes like font-size) in the stylesheet.

Re: Text support in Morpheus top-level menu

Posted: 22 Dec 2022, 08:11
by madinaapps
You mentioned
"Secondly, yes you can use text instead of icons but you may need to add or change some style(really small changes like font-size) in the stylesheet."

Can you please put those changes here.

Also is it possible to keep menu expanded all the times. If yes How to do it.

Re: Text support in Morpheus top-level menu

Posted: 06 Jan 2023, 11:25
by cetincakiroglu
Hi,

To change the menu as you want, follow the steps below:

1-) Navigate to app.sidebar.component.html
2-) locate the ul with class "layout-tabmenu-nav"
3-) This line of code is responsible to render menuitem as icon

Code: Select all

    <a href="#" class="tabmenuitem-link" (click)="app.onTabClick($event, 0)" pRipple><i class="pi pi-folder-open"></i></a>
Change it to:

Code: Select all

    <a href="#" class="tabmenuitem-link" (click)="app.onTabClick($event, 0)" pRipple>Features</a>
After changing the icon with text, you'll see the text is rendered instead of the folder icon.

Hope it helps.