Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

A library that contains a utility (TBNav) to create Twitter Bootstrap styled nav bar with drop down menus from the output of Lift's Menu.builder. Any menu item that is defined with submenus will automatically rendered as a drop-down menu.

You can download an example of this library used in an application here: and see a running example

To use the utility in your own project:

  1. download and build the TBUtils library:

     git clone
     cd liftTBUtils
     ./sbt publish-local
  2. In the project in which you want to use the library, add the following to the dependencies in the project's build.sbt:

     "com.damianhelme" %% "tbutils" % "0.1.0" % "compile"
  3. In order to tell Lift where to look for the TBNav snippet, in Boot.scala add:

  4. In Boot.scala, define your menu sitemap with something like:

     val entries = List(Menu("Home") / "index",
       Menu("Page 1") / "page1",
       Menu("Page 2") / "page2",
       Menu("Page 3") / "#"  >> PlaceHolder submenus (
         Menu("Page 3a") / "page3a" ,  
         Menu("Page 3b") / "page3b" ,
         Menu("Page 3c") / "page3c"))
     def sitemap = SiteMap(entries: _*)

    Every menu entry with a submenu will the rendered as a menu drop-down. The 'PlaceHolder' is optional, but it's clearer to other developers that you intend this entry to be the root of a drop-down if you include it.

  5. Download the Twitter Bootstrap library and copy into a subdirectory of /src/main/webapp (e.g. /src/main/webapp/bootstrap/2.0.0)

  6. Include the Bootstrap files in your html:

     <link rel="stylesheet" type="text/css" href="/bootstrap/2.0.0/css/bootstrap.css">
     <script id="bootstrap-dropdown" src="/bootstrap/2.0.0/js/bootstrap-dropdown.js" type="text/javascript"></script>
  7. Make sure jquery 1.7.0 or later is included in your html. An easy way to do this would be to copy the jquery file into a subdirectory of /sr/main/webpp (e.g. /src/main/webmapp/jquery) and include a line such as the following in your html:

     <script id="jquery" src="/jquery/jquery-1.7.1.js" type="text/javascript"></script>
  8. In your html, wrap your call to Menu.builder with call to TBNav.menuToTBNav:

     <div class="topbar">
      <div class="navbar-inner">
       <div class="fill">
         <div class="container">
           <a class="brand" href="/">My App</a> 
           <span data-lift="lift:TBNav.menuToTBNav?eager_eval=true"> 
             <span data-lift="lift:Menu.builder?top:class=nav;li_item:class=active;linkToSelf=true;expandAll=true"></span>

    The classes: topbar, navbar-inner, fill and container etc. are Bootstrap class for formatting the navigation bar.

For comments, questions, etc. please see the accompanying blogpost


Contains a utility (TBNav) to generate a Twitter Bootstrap styled nav bar from Lift's Menu.builder







No releases published


No packages published