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: Is there any way to create a split nav-link button that operates like a split button

goodfellastech priority asked 9 months ago


Expected behavior

I would like to have a navigation link that operates like a split button. This way you can have a link to a main landing page and then the sub landing pages would be triggered on the click of the down carat.

Actual behavior The only option provided is a traditional dropdown nav-link

Resources (screenshots, code snippets etc.) see MDB source code.


Kamila Pieńkowska staff answered 9 months ago


You can do that with regular split button: https://mdbootstrap.com/docs/standard/components/dropdowns/#section-split-button


goodfellastech priority commented 9 months ago

Correct, but then the styling is not the same as your other normal navigational links. I was wondering if there was a way to fit it in naturally and not have it look so different.

My example is that I am building a website for a commercial painting company. I want the main link to be for commercial painting, and then the drop arrow would be for the sub-pages exterior commercial painting, interior commercial painting, and industrial commercial painting.

As of right now, there is no way to make the button look right or have the functionality I am looking for without it wrapping two lines or having clearly different styling


goodfellastech priority commented 9 months ago

Ok, you have to basically change the classes but use the split dropdown to your advantage like this

" class="nav-link shadow-0">Action Toggle Dropdown

That did it



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: MDB5 7.1.0
  • Device: mac OSX
  • Browser: chrome
  • OS: Ventura
  • Provided sample code: No
  • Provided link: No