How to create bootstrap Typoscript menu with shortcut active link three level ? Typo3 9.5 | HMENU | TMENU | Typoscript

Today we are going to learn bootstrap menu Typoscript level three. It's sub menu link has no link. Lets see the Frontend of menu 

It's level three menu but here i am not able to take screenshot 

Let's check backend tree structure

Now Let's add our Typoscript 


lib.mainmenu = HMENU
lib.mainmenu{

    special = directory
    special.value = 1
   
    1 = TMENU
    1{
        wrap = <ul class="nav navbar-nav">|</ul>
        expAll = 1
        noBlur = 1
        NO = 1
        NO{
            ATagTitle{
                field = title
                fieldRequired = nav_title
            }
            ATagParams = class=""
            ATagBeforeWrap = 1
            linkWrap = |

            wrapItemAndSub.insertData = 1
            wrapItemAndSub = <li class="first">|</li>
            wrapItemAndSub.override.cObject = COA
            wrapItemAndSub.override.cObject {
                if {
                    value = 4
                    equals.field = doktype
                    isTrue = 1
                    isTrue.if {
                        value.data = TSFE:page|uid
                        equals.field = shortcut
                    }
                }
                10 = TEXT
                10.value = <li class="active first">|</li>
            }
        }
        ACT = 1
        ACT < .NO
        ACT{
           
            wrapItemAndSub = <li class="active">|</li>
        }

        CUR = 1
        CUR < .NO
        CUR{
            
            wrapItemAndSub = <li class="active">|</li>
        }

        IFSUB = 1
        IFSUB < .NO
        IFSUB{
            ATagTitle.field = title
ATagParams = class="" 
linkWrap = |
doNotLinkIt = 1
allWrap = <a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">|&nbsp;<i class="fa fa-angle-down"></i></a>
ATagBeforeWrap = 1
wrapItemAndSub = <li class="dropdown">|</li>

        }
ACTIFSUB < .IFSUB
        ACTIFSUB {
                wrapItemAndSub = <li class="dropdown active">|</li>
        }

        CURIFSUB < .ACTIFSUB

    }

2 < .1
2.wrap = <ul class="dropdown-menu">|</ul>
2{

IFSUB = 1
IFSUB{
allWrap = <a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown">|</a>
wrapItemAndSub = <li class="dropdown-submenu">|</li>
}
ACTIFSUB < .IFSUB
ACTIFSUB{
wrapItemAndSub = <li class="dropdown-submenu">|</li>
}
CURIFSUB < .ACTIFSUB
CURIFSUB{
wrapItemAndSub = <li class="dropdown-submenu">|</li>
}
}

3 < .1
3.wrap = <ul class="dropdown-menu">|</ul>
    

}


hope you understand Typoscript, If any query please commment here