Hi Steve

Isn't because the context in your subnavigation is not right? it says Model.Id == page.id...but in your subnavigation you're using item? Shouldn't it read Model.id == item.id? (In the context of the second foreach loop of course).

/Jan

Hi Steve,

Try something like this 

var style = subpage.IsAncestorOrSelf(Model) ? "class=active" : "";

<li @style><a href="@subpage.Url">@subPage.Name</li> 

Hope it helps

Fuji, That works perfectly! Thanks!

One more question. How could I hide the children unless the user is on the page that contains the children?

You can do this

<li @style><a href="@subpage.Url">@subPage.Name
@if(subPage.Children.Any()){
<ul>
@foreach(var item in subPage.Children.Where("Visible")){
<li>@item.Name</li>
}
</ul>
}
</li>

This doesn't seem to work, and I don't see how it would:

@{
var page = Model.AncestorOrSelf(3).Children;

<ul>
@foreach (var subPage in page) {

    var style = subPage.IsAncestorOrSelf(Model) ? "class=active" : "";
    <li @style ><a href="@subPage.Url">@subPage.Name</a>
    @if(subPage.Children.Any()){
    <ul class="academics-items">
        @foreach (var item in subPage.Children.Where("Visible")) {

            <li @style ><a href='@(item.NodeTypeAlias == "AcademicsItem" ? item.academicsUrl : item.Url)'>@item.Name</a></li>
        }
    </ul>
    }
    </li>
    }
</ul>
}

Are you building a Navigation here ? You should be able to get this working with some css as well 

What about this ?

<li@style><ahref="@subpage.Url">@subPage.Name
 @if(subPage.Children.Where("Visible").Count() > 0 ){
 <ul>
@foreach(var item in subPage.Children.Where("Visible")){
<li>@item.Name</li>
}
</ul>
}
</li>

It needs to only display the children if the current page has children, otherwise it would just display all the top level nodes. Sorry if I was not clear. Thanks for all your help.

No prob but have you tried the code i posted ? Just change this bit then 

<li@style><a href="@subpage.Url">@subPage.Name </a> </li>
 if(subPage.Children.Where("Visible").Count() > 0 ){ 
foreach(var item in subPage.Children.Where("Visible")){
<li>@item.Name</li>
}
}

Yes, I tried it. It will always display all the children wheather or not the current page has children because if there are children the count is allways greater than 0.

Oh i see then you should try 

sorry i dont know what happened with the previous post

anyways this should work

var pager = Model.AncestorOrSelf(2).Children;

                foreach (var subPage in page) {
                <li><a href="@subPage.Url">@subPage.Name</a></li> 
                    if(Model.Id == subPage.Id){
                            if(Model.Children.Where("Visible").Any()){
                                foreach(var item in subPage.Children.Where("Visible")){
                                    @t.Name
                                }
                            }
                    }
                }

Well, I couldn't get your code to work, but I have it sort of working. Except it is applying the @style to every child under the current page as well.

@{
var page = Model.AncestorOrSelf(3).Children;

<ul>
@foreach (var subPage in page) {
     var style = subPage.IsAncestorOrSelf(Model) ? "class=active" : "";
  @*  var style = subPage.IsAncestorOrSelf(Model) ? "class=active" : ""; *@

    <li @style ><a href="@subPage.Url">@subPage.Name</a>
@if(subPage.Children.Any() && subPage.IsAncestorOrSelf(Model)){ 
    <ul class="academics-items">
        @foreach (var item in subPage.Children.Where("Visible")) {

            <li @style ><a href='@(item.NodeTypeAlias == "AcademicsItem" ? item.academicsUrl : item.Url)'>@item.Name</a></li>
        }
    </ul>
   } 
    </li>
    }
</ul>
}

You need to change that part since you only want the sub page to be highlighted.

 var active = item.IsAncestorOrSelf(Model)?"class=active":"";

<li @active><a href="">@item.Name</a></li> 

Glad i could help 

Fuji,

One more question. If on my main page, I don't want any of the tabs which are children of @Model (current page), but once I get to one of the child pages I do want the children of @Model (current page) to have the "active" class. As it is now, the landing page has all the tabs or children as "active", untill you go to one of their pages. Look here: https://edit-wwwprep.rose-hulman.edu/student-life.aspx

@inherits umbraco.MacroEngines.DynamicNodeContext

    @{
        var home = Model.AncestorOrSelf(2);
        var nav = home.Children.Where("Visible");
    <ul>
        @foreach(var item in nav){
            var style = item.IsDescendantOrSelf(Model) ? "class=active" : "";
            <li @style ><a href="@item.Url"><span>@item.Name</span></a>

@* test to see if there are child nodes and if so make the dropdown list *@
                @if(item.Children.Count() > 0){  
                <ul>
            @foreach(var subNav in item.Children){
                var first = subNav.IsFirst() ? "class=first" : "";
                <li @first ><a href="@subNav.Url"><span>@subNav.Name</span></a></li>
            }       
        </ul> 
            }
                </li>
        }
        </ul>
@* test to see if property useAlternateNavigation is checked if not load the image below the tabs *@            
        if(Model.Parent.Where("!useAlternateNavigation") || Model.Where("!useAlternateNavigation")){ 
    <img src="/static/phase2/tabNavBorderBottom.jpg" class="tabBorder" />
        } 
    }

Got it! 

var style = item.IsAncestorOrSelf(Model) ? "class=active" : "";

is working on a reply...