muli-level dropdown menu in MDB Angular Version

Topic: muli-level dropdown menu in MDB Angular Version

bcn2017 priority asked 7 years ago

Dears, We have a pro licence of MDBOOSTRAP Angular Version In our proyect, we need to build a muli-level dropdown menu, but we didn't found documentation about it. Can you help us find the way to do it? Thanks David!

Add comment

Alex GuaMi pro answered 7 years ago

0 0 Best answer

You just need to repeat the process inside your dropdown again (create a new list inside your dropdown list)

Ps: Si necesitais mas ayuda me lo dices. Tambien soy de barcelona ;)

For example:
<pre></pre>
<pre>
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark">

<logo><a class="navbar-brand" href="#">BML</a></logo>

<links>

<ul class="navbar-nav mr-auto">
            
            <li class="nav-item dropdown active"dropdown>
                <a dropdownToggle  class="nav-link dropdown-toggle waves-light" mdbRippleRadius>
                    Dropdown1
                    <span class="caret"></span>
                </a>
                <div  class="dropdown-menu dropdown dropdown-primary" role="menu">
                    <a class="dropdown-item waves-light" mdbRippleRadius href="#">Button1.1</a>
                    <a class="dropdown-item waves-light" mdbRippleRadius href="#">Button1.2</a>
            <li class="nav-item dropdown active"dropdown>
                <a dropdownToggle  class="nav-link dropdown-toggle waves-light" mdbRippleRadius>
                    Dropdown2
                    <span class="caret"></span>
                </a>
                <div  class="dropdown-menu dropdown dropdown-primary" role="menu">
                    <a class="dropdown-item waves-light waves-effect" mdbRippleRadius href="#">Button2.1</a>
                    <a class="dropdown-item waves-light" mdbRippleRadius >Button2.2</a>
                </div>
            </li>

</div>
            </li>
        </ul>

</links>

</mdb-navbar>
</pre>

Please insert min. 20 characters.

You just need to repeat the process inside your dropdown again (create a new list inside your dropdown list) Ps: Si necesitais mas ayuda me lo dices. Tambien soy de barcelona ;) For example:

<!--Navbar-->
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark">

    <!-- Navbar brand -->
    <logo><a class="navbar-brand" href="#">BML</a></logo>

    <!-- Collapsible content -->
    <links>

        <!-- Links -->
        <ul class="navbar-nav mr-auto">
            <!-- Dropdown -->
            <li class="nav-item dropdown active"dropdown>
                <a dropdownToggle  class="nav-link dropdown-toggle waves-light" mdbRippleRadius>
                    Dropdown1
                    <span class="caret"></span>
                </a>
                <div  class="dropdown-menu dropdown dropdown-primary" role="menu">
                    <a class="dropdown-item waves-light" mdbRippleRadius href="#">Button1.1</a>
                    <a class="dropdown-item waves-light" mdbRippleRadius href="#">Button1.2</a>
            <li class="nav-item dropdown active"dropdown>
                <a dropdownToggle  class="nav-link dropdown-toggle waves-light" mdbRippleRadius>
                    Dropdown2
                    <span class="caret"></span>
                </a>
                <div  class="dropdown-menu dropdown dropdown-primary" role="menu">
                    <a class="dropdown-item waves-light waves-effect" mdbRippleRadius href="#">Button2.1</a>
                    <a class="dropdown-item waves-light" mdbRippleRadius >Button2.2</a>
                </div>
            </li>

            </div>
            </li>
        </ul>
        <!-- Links -->

    </links>
    <!-- Collapsible content -->

</mdb-navbar>
<!--/.Navbar-->

Add comment

Write

Create snippet

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 Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

bcn2017

0Support score
1Questions 0Answers 0Snippets