Typoscript config for twitter bootstrap navbar

readme.md

How to use it

Bootstrap version

• This script is compatible with Bootstrap 2.2.2

Constants settings

• set the constant lib.page.homepage with the id of your homepage
• set the constant lib.navbar.main with the id of the root page of your navigation
• set the constant lib.navbar.right with the id of the root page of your right navigation

Level menu

You can build a navigation with 3 levels ... and no more.

Divider

Page of type SPC are :

• on the first level vertical divider
• on the seconde & third level horizontal divider. The title of the page is use as the title of the next section.

Improvements

• Can't creat divider on level 2 & 3 without a title

---

... and of course

Feel free to use it at your own risk

bootstrap-navbar.ts

#####################################################################
# [Navbar]

lib.field_navbar = COA
lib.field_navbar {

    wrap = <div class="navbar navbar-fixed-top"><div class="navbar-inner"><div class="container">|</div></div></div>

    # collapse button
    10 = COA
    10 {
        wrap = <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">|</a>

        10 = TEXT
        10.value = <span class="icon-bar"></span>

        20 < .10

        30 < .10
    }

    # brand
    20 = TEXT
    20 {
        value = My brand
        typolink.parameter = {$lib.page.homepage}
        typolink.title = Back to homepage
        typolink.ATagParams = class="brand"
    }

    # collapse
    30 = COA
    30 {
        wrap = <div class="nav-collapse collapse">|</div>

        # nav
        10 = HMENU
        10 {
            wrap = <ul class="nav">|</ul>
            special = directory
            special.value = {$lib.navbar.main}

            1 = TMENU
            1 {
                noBlur = 1
                expAll = 1

                NO = 1
                NO.wrapItemAndSub = <li>|</li>

                ACT < .NO
                ACT.wrapItemAndSub = <li class="active">|</li>

                CUR < .ACT

                IFSUB = 1
                IFSUB {
                    wrapItemAndSub = <li class="dropdown">| </li>
                    stdWrap.wrap = | <b class="caret"></b>
                    ATagParams = class="dropdown-toggle" data-toggle="dropdown"
                }

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

                CURIFSUB < .ACTIFSUB

                SPC = 1
                SPC {
                    wrapItemAndSub = <li class="divider-vertical">|</li>
                    doNotShowLink = 1
                }

            } # /1

            2 < .1 
            2 {
                wrap = <ul class="dropdown-menu">|</ul>
                
                IFSUB >
                IFSUB = 1
                IFSUB {
                    wrapItemAndSub = <li class="dropdown-submenu">|</li>
                    ATagParams = tabindex="-1"
                }
                
                ACTIFSUB >
                ACTIFSUB < .IFSUB
                ACTIFSUB.wrapItemAndSub = <li class="dropdown-submenu active">|</li>
                
                CURIFSUB >
                CURIFSUB < .ACTIFSUB

                SPC >
                SPC = 1
                SPC {
                    wrapItemAndSub = <li class="divider"></li><li class="nav-header">|</li>
                }
            
            } # /2

            3 < .2
            3 {
                IFSUB >
                ACTIFSUB >
                CURIFSUB >
            } # /3

        } # /10

        # Search
        /*
        20 = TEXT
        20.value (

            <!-- search -->
            <form class="navbar-search pull-left">
                <label for="search" class="hide">Recherche</label>
                <input id="search" type="text" class="search-query span2" placeholder="Recherche">
            </form><!-- /search -->

        )
        */

        # right menu
        30 < .10
        30 {
            wrap = <ul class="nav pull-right">|</ul>
            special = directory
            special.value = {$lib.navbar.right}
        } # /30

    }

}

Hi,

Couldn't get your TS running first, but after some modifications all runs well now.
Thanx a lot, had spent hours and hours with my own coding ...

lib.field_navbar = COA
lib.field_navbar {
wrap (

|

) # collapse button

10 = COA
10 {
wrap = |
10 = TEXT
10.value =
20 < .10
30 < .10
}

brand

20 = TEXT
20 {
value = My brand
typolink.parameter = {$lib.page.homepage}
typolink.title = Back to homepage
typolink.ATagParams = class="brand"
}

collapse

30 = COA
30 {
wrap =

|

nav

10 = HMENU
10 {
    wrap = <ul class="nav navbar-nav">|</ul>
    special = directory
    special.value = {$lib.navbar.main}
    1 = TMENU
    1 {
        noBlur = 1
        expAll = 1
        NO = 1
        NO.wrapItemAndSub = <li class="men">|</li>
        ACT < .NO
        ACT.wrapItemAndSub = <li class="active">|</li>
        CUR < .ACT
        IFSUB = 1
        IFSUB {
            wrapItemAndSub = <li class="dropdown">| </li>
            stdWrap.wrap = | <b class="caret"></b>
            ATagParams = class="dropdown-toggle" data-toggle="dropdown"
        }
        ACTIFSUB < .IFSUB
        ACTIFSUB {
            wrapItemAndSub = <li class="dropdown active">|</li>
        }
        CURIFSUB < .ACTIFSUB
        SPC = 1
        SPC {
            wrapItemAndSub = <li class="divider-vertical">|</li>
            doNotShowLink = 1
        }
    }
    2 < .1
    2 {
        wrap = <ul class="dropdown-menu">|</ul>
        IFSUB >
        IFSUB = 1
        IFSUB {
            wrapItemAndSub = <li class="dropdown-submenu">|</li>
            ATagParams = tabindex="-1"
        }
        ACTIFSUB >
        ACTIFSUB < .IFSUB
        ACTIFSUB.wrapItemAndSub = <li class="dropdown-submenu active">|</li>
        CURIFSUB >
        CURIFSUB < .ACTIFSUB
        SPC >
        SPC = 1
        SPC {
            wrapItemAndSub = <li class="divider"></li><li class="nav-header">|</li>
        }
    }
    3 < .2
    3 {
        IFSUB >
        ACTIFSUB >
        CURIFSUB >
    }
}

/*

Search

20 = TEXT
20.value (

Recherche ) # right menu

30 < .10
30 {
    wrap = <ul class="nav pull-right">|</ul>
    special = directory
    special.value = {$lib.navbar.right}
}

*/
}
}