Breaking

Monday, February 3, 2020

How to create Typo3 breadcrumb menu Typoscript with home icon, TYPO3 9.5.13

Here below you can see html where there is icon instead of root page, so how can we write Typoscript of breadcrumb ? Let's see ,here below you can see the html 














In our inner page breadcrumb  start , it is not in home page. you can see below page tree structure in Backend 


















Now you can see the Typoscript of Breadcrumb menu below 



lib.breadcrumb = COA
lib.breadcrumb {
    10 = HMENU
    10 {
        special = rootline
        special.range = 1|-1
    
        includeNotInMenu = 1
        1 = TMENU
        1 {
            noBlur = 1
            #target = _self by default target self
            wrap = <ul class="breadcrumb">|</ul>
            NO {
                stdWrap.field = title
                ATagTitle.field = nav_title // title
ATagBeforeWrap = 1
wrapItemAndSub = <li class="norml"><a href="http://www.example.com/"><i class="fa fa-home"></i></a><i class="icon-angle-right"></i></li><li class="first">|<i class="icon-angle-right"></i></li>|*|<li class="middle">|<i class="icon-angle-right"></i></li>|*| 
            }
           

CUR = 1
            CUR {
# Current item should be not linked
doNotLinkIt = 1 
wrapItemAndSub =  <li class="norml"><a href="http://www.example.com/"><i class="fa fa-home"></i></a><i class="icon-angle-right"></i></li><li class="active">|<i class="icon-angle-right"></i></li>|*|<li class="active">|<i class="icon-angle-right"></i></li>|*| 
}

        }

    }


Note : you can set your website home url  instead of  http://www.example.com/


In breadcrumb menu you dont need IFSUB, ACTIFSUB, CURIFSUB, you need to same code with <li class="active">|</li>  as above in current section, here our home page is icon so 
 special.range = 1|-1, If you want to include home page than range should start from 0 which is root page

Thank you for visiting my blog , 


Nilesh Boricha

No comments:

Post a Comment

your suggestion are welcome by me