My site is built on Bootstrap 3 framework and I am using NavEE as the navigation plugin. One thing I cannot figure out is how to implement the conditionals required to build out the navigation structure eg. if there are children nav items then display modified mark-up as required in Bootstrap.

Below is the Bootstrap structure I need to create using NavEE:

<ul class="nav navbar-nav">
  <li class="active"><a href="/">Home</a></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Options <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">Option 1</a></li>
      <li><a href="#">Option 2</a></li>
  <li><a href="#">Contact Us</a></li>

I can easily create the top-level navigation using the basic NavEE syntax:

{exp:navee:nav nav_title="main" class="nav navbar-nav" selected_class="active"}

I have tried using the custom NavEE syntax but have found the documentation limited so have not been able to work out the correct conditionals:

{exp:navee:custom nav_title="main" class="nav navbar-nav" selected_class="active"}
   <li class="{class}"><a href="{link}">{text}</a>{kids}</li>

I want to be able to say something like this:

{exp:navee:custom nav_title="main" class="nav navbar-nav" selected_class="active"}
   <li class="{if kids}dropdown{/if}"><a {if kids}class="dropdown-toggle" data-toggle="dropdown"{/if} href="{link}">{text}{if kids} <b class="caret"></b>{/if}</a>{kids}</li>

Even if I could get that to work I still need to target the nested UL.

I have used Taxonomy in the past and have been able to create the required Bootstrap 2 navigation structure:

<li class="{if node_has_children}dropdown{/if}{if node_active} active{/if}">
    <a{if node_has_children} class="dropdown-toggle" data-toggle="dropdown"{/if} href="{node_url}">
    {if node_has_children}<b class="icon-chevron-down"></b> {/if}{node_title}


Any assistance in allowing me to control NavEE in the same way I have been able to with Taxonomy would be greatly appreciated.


2 Answers 2


After days or trying to work it out and then finally posting my question on EESO I actually stumbled across the answer (literally minutes after posting my question).

Brandon Richards posted the answer on The Outfit, Inc forum (https://getsatisfaction.com/booyant/topics/twitter_bootstrap#reply_14550626).

Below is how you can achieve Bootstrap 3 navigation structure using NavEE:

<ul class="nav navbar-nav">
{exp:navee:custom nav_title="main" wrap_type="none" selected_class="active" selected_class_on_parents="true" parent_selected_class="active"}
    {if has_kids}
        <li{if has_kids} class="dropdown"{/if}>
            <a href="{link}" class="dropdown-toggle" data-toggle="dropdown">{text} <b class="caret"></b></a>
            <ul class="dropdown-menu">
        <li{if class != ""} class="{class}"{/if}><a href="{link}" title="{text}">{text}</a></li>

Thanks Brandon!

  • Brilliant, works perfectly
    – CreateSean
    Sep 12, 2016 at 17:41

Well glad it helps, I haven't tried working in the seperators in the drop down or split navigations (left and right)

  • Please make messages like these comments, thank you.
    – jrothafer
    Nov 23, 2015 at 20:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.