Topic: Sidenav with icons

Zaffar free asked 4 years ago


I am using the sidenav from pro template. When toggling it is closed completey but I would like to keep it only showing the icons. Is there any opportunity?

If not, how can I get access to the properties like width and body padding to set the properties on my own. JQuery is not working with my Typescript.

Thanks in advance!

Arkadiusz Idzikowski staff commented 4 years ago

Did you try to use our slim sidenav version?

Zaffar free commented 4 years ago

Yes but there are no icons and i want to minimize the sidenav and keep only icons. Is it possible?

Arkadiusz Idzikowski staff answered 4 years ago

The slim sidenav works just as you described. It has two modes - normal and minimized, and in the second mode it display only icons. Copy this code to your component html file and click on the 'minimize' button to see how it works:

The default sidenav breakpoint is 1440px. When screen width is lower than 1440px, then sidenav will be hidden automatically. You can adjust this breakpoint with [sidenavBreakpoint] input.

<mdb-side-nav #sidenav class="wide sn-bg-1 fixed" [fixed]="true" [sidenavBreakpoint]="800">


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.10.1
  • Device: All
  • Browser: All
  • OS: Windows
  • Provided sample code: No
  • Provided link: No