Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: collapsed (but visible) sidebar navigation menu

regattacentral priority asked 1 year ago


The admin dashboard is missing a key feature for us to be able to continue purchasing MDP Pro. Specifically, that is a sidebar nav that is collapsible, similar to the version used by gitlab.com. the UX with their sidebar is superior in that it still provides visual icons and thus context to the user when the sidebar is not fully expanded.

See examples here...

enter image description here

enter image description here


Grzegorz Bujański staff answered 1 year ago


Adding this feature is simple. I created an example for you with this feature: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/5285486#js-tab-view


regattacentral priority commented 1 year ago

Thank you - that looks really nice. how do I add the notification 'pills' (the numbers to the right of specific menu items)?


Grzegorz Bujański staff commented 1 year ago

I added it to the snippet. Check it again


regattacentral priority answered 1 year ago


Thank you for the prompt reply. How would I go about adding the 'pills' with the notification counts beside each item? (see the screenshot from gitlab above with the '323' and '0' indicators'). These are helpful because they draw attention to that menu item at a quick glace.

Likewise, how would I include the expand/collapse icons like gitlab has? again, see screenshots with the 'Collapse sidebar' and '>>' icons that provide visual cue to user on how they can expand & collapse the menu.

p.s. with gitlab there i no need for a 'burger menu' icon at the top hide/show the menu. This is because it is always visible, either in collapsed form or expanded.

Their sidebar is the most feature-complete sidebar nav I have seen and it would be really great if MDB had feature parity with it.


Quang Huy Nguyễn priority commented 1 year ago

I think this is what you mean: https://mdbootstrap.com/docs/standard/components/badges/


Quang Huy Nguyễn priority answered 1 year ago


You can try the slim sidenav.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No