[[Voyager? &service=`megaMenu`]]

<nav class="navbar navbar-default navbar-static-top navbar-main" role="navigation">
    <div class="navbar-container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="[[~[[++site_url]]]]">
                <img src="[[++assets_url]]site/img/equityEstates-logo.png" alt="Equity Estates">
            </a>
        </div>

        <div class="collapse navbar-collapse mainNav">
            <ul class="nav navbar-nav">
                <li class="dropdown dropdown-mega[[UltimateParent:is=`36`:then=` active`]]">
                    <a href="[[~36]]" title="Equity Estates Portfolio" data-hover="dropdown" data-delay="300" data-close-others="true">
                        The Portfolio <b class="caret"></b>
                    </a>
                    
                    <div class="megaMenu dropdown-menu">
                        <nav class="megaMenuNav">
                            <ul class="nav">
                                <li class="locationType active">
                                    <a href="#location_type" data-toggle="tab">View by Location Type</a>
                                </li>

                                <li class="viewAll">
                                    <a href="#view_all" data-toggle="tab">View All Residences</a>
                                </li>

                                <li class="viewMap">
                                    <a href="[[~36]]">
                                        Go to Residence Map <span class="glyphicons glyphicons-globe"></span>
                                    </a>
                                </li>

                            </ul>

                        </nav><!-- /.megaMenuNav -->

                        <div class="tab-content">
                            <div class="megaMenuPane tab-pane active" id="location_type">
                                <nav class="megaMenuNav">
                                    <ul class="nav">
                                        <li class="beach active">
                                            <a href="#beach_list" data-toggle="tab">Beach</a>
                                        </li>

                                        <li class="city">
                                            <a href="#city_list" data-toggle="tab">City</a>
                                        </li>

                                        <li class="mtn">
                                            <a href="#mtn_list" data-toggle="tab">Mountain</a>
                                        </li>

                                        <li class="leisure">
                                            <a href="#leisure_list" data-toggle="tab">Leisure</a>
                                        </li>

                                    </ul>

                                </nav><!-- .megaMenuNav -->

                                <div class="tab-content residenceLists">
                                    <div class="residenceListWrapper tab-pane active" id="beach_list">
                                        <header class="residenceListHeader">
                                            <h4 class="residenceListTitle">Beach Residences</h4>
                                        </header>

                                        <ul class="residenceList twoColumns">
                                            [[+voyager.megaMenuList_beach]]
                                        </ul>
                                        
                                    </div><!-- /#beach_list.residenceListWrapper -->
                                    
                                    <div class="residenceListWrapper tab-pane" id="city_list">
                                        <header class="residenceListHeader">
                                            <h4 class="residenceListTitle">City Residences</h4>
                                        </header>

                                        <ul class="residenceList twoColumns">
                                            [[+voyager.megaMenuList_city]]
                                        </ul>
                                        
                                    </div><!-- /#city_list.residenceListWrapper -->

                                    <div class="residenceListWrapper tab-pane" id="mtn_list">
                                        <header class="residenceListHeader">
                                            <h4 class="residenceListTitle">Mountain Residences</h4>
                                        </header>

                                        <ul class="residenceList twoColumns">
                                            [[+voyager.megaMenuList_mtn]]
                                        </ul>
                                        
                                    </div><!-- /#mtn_list.residenceListWrapper -->

                                    <div class="residenceListWrapper tab-pane" id="leisure_list">
                                        <header class="residenceListHeader">
                                            <h4 class="residenceListTitle">Leisure Residences</h4>
                                        </header>

                                        <ul class="residenceList twoColumns">
                                            [[+voyager.megaMenuList_leisure]]
                                        </ul>
                                        
                                    </div><!-- /#leisure_list.residenceListWrapper -->

                                </div><!-- /.residenceLists.tab-content -->

                            </div><!-- /#location_type.megaMenuPane -->

                            <div class="megaMenuPane tab-pane" id="view_all">
                                <div class="residenceLists">
                                    <div class="residenceListWrapper">
                                        <header class="residenceListHeader">
                                            <h4 class="residenceListTitle">Our Portfolio</h4>

                                        </header>

                                        <ul class="residenceList portfolioResidences">
                                            [[+voyager.megaMenuList_portfolio]]

                                        </ul>

                                    </div>

                                    <div class="residenceListWrapper">
                                        <header class="residenceListHeader">
                                            <h4 class="residenceListTitle">Reciprocity Residences</h4>

                                        </header>

                                        <ul class="residenceList allianceResidences">
                                            [[+voyager.megaMenuList_alliance]]

                                        </ul>

                                    </div>

                                </div>

                            </div><!-- /#view_all.megaMenuPane -->

                        </div><!-- /.tab-content -->

                    </div><!-- /.megaMenu.dropdown-menu -->

                </li>

                <li class="dropdown[[UltimateParent:is=`40`:then=` active`]]">
                    <a href="[[~40]]" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="300" data-close-others="true">
                        The Experience <b class="caret"></b>
                    </a>
                    
                    [[Wayfinder?
                        &startId=`40`
                        &level=`1`
                        &outerClass=`dropdown-menu`
                    ]]
                    
                </li>

                <li class="dropdown[[UltimateParent:is=`46`:then=` active`]]">
                    <a href="[[~46]]" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="300" data-close-others="true">
                        The Investment <b class="caret"></b>
                    </a>
                    
                    [[Wayfinder?
                        &startId=`46`
                        &level=`1`
                        &outerClass=`dropdown-menu`
                    ]]
                    
                </li>

                <li class="dropdown[[UltimateParent:is=`2`:then=` active`]]">
                    <a href="[[~2]]" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="300" data-close-others="true">
                        About Us <b class="caret"></b>
                    </a>
                    
                    [[Wayfinder?
                        &startId=`2`
                        &level=`1`
                        &outerClass=`dropdown-menu`
                    ]]
                    
                </li>

                <li[[!*id:is=`4`:then=` class="active"`]]>
                    <a href="[[~4]]">Contact Us</a>
                </li>

                <li[[!*id:is=`203`:then=` class="active"`]]>
                    <a href="[[~203]]">Member Login</a>
                </li>

            </ul>

        </div><!-- /.navbar-collapse -->

    </div>

</nav>