Bootstrap navigation mark-up using NavEE

Question

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>
    </ul>
  </li>
  <li><a href="#">Contact Us</a></li>
</ul>

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>
{/exp:navee:custom}

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>
{/exp:navee:custom}

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:

{exp:taxonomy:nav 
tree_id="1" 
display_root="no" 
ul_css_class="nav" 
ul_css_class:level_2="dropdown-menu"
entry_id="{entry_id}"
}
<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}
    </a>
{children}
</li>

{/exp:taxonomy:nav}

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

Thanks,
Dan

Answer 1

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>{kids}</li>
            </ul>
        </li>
    {if:else}
        <li{if class != ""} class="{class}"{/if}><a href="{link}" title="{text}">{text}</a></li>
    {/if}
{/exp:navee:custom}
</ul>

Thanks Brandon!

Answer 2

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