Forum

Thread tagged as: Question

Bootstrap 3 Menu using Perch

Has anyone managed to get a working version of Boostrap 3 Navigation menu working in Perch with dropdowns etc?
Rob Broley

Rob Broley 0 points

  • 7 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

Yes, many. We've started building up some Bootstrap examples here:

https://solutions.grabaperch.com/templates/bootstrap-templates
Rob Broley

Rob Broley 0 points

7 years ago

Thats great Drew. Would you be able to add a navigation part in with drop downs etc?
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

As I say, it's a start, and we aim to add more examples over time.
Michael Wilkinson

Michael Wilkinson 6 points
Registered Developer

7 years ago

Hi Rob

Not sure if this is still relevant to you, but this is my navigation template I use with bootstrap which has dropdowns...

<perch:before>
    <ul class="nav navbar-nav">
</perch:before>
        <li class="<perch:if exists="current_page">active </perch:if><perch:if exists="subitems">dropdown</perch:if>"<perch:if exists="ancestor_page"> class="ancestor"</perch:if>>
            <a <perch:if exists="subitems">class="dropdown-toggle" data-toggle="dropdown"</perch:if> href="<perch:pages id="pagePath" />">
                <perch:pages id="pageNavText" /> <perch:if exists="subitems"><span class="caret"></span></perch:if>
            </a>   
            <perch:pages id="subitems" encode="false" />         
        </li>
<perch:after>
    </ul>
</perch:after>

And then the template for the sub items:

<perch:before>
    <ul class="dropdown-menu">
</perch:before>
        <li<perch:if exists="current_page"> class="active"</perch:if><perch:if exists="ancestor_page"> class="ancestor"</perch:if>>
            <a href="<perch:pages id="pagePath" />">
                <perch:pages id="pageNavText" />
            </a>   
            <perch:pages id="subitems" encode="false" />         
        </li>
<perch:after>
    </ul>
</perch:after>

And then you use them by doing (obviously you change it to the bits you need):

<?php
            perch_pages_navigation(
              array(
                'from-path' => '/', 
                'levels' => 0, 
                'hide-extensions' => true, 
                'template' => array('nav-main.html', 'nav-main-level2.html')
              )
            );
          ?>

Hope that helps..
Rob Broley

Rob Broley 0 points

7 years ago

Michael your solution worked perfectly. Thank you so much.
Erin Bell

Erin Bell 0 points

6 years ago

I'm just getting to know Perch (and Bootstrap) so this was super helpful, thanks!