Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Carlos Mosqueda 244 posts 435 karma points
    Aug 26, 2021 @ 19:08
    Carlos Mosqueda
    0

    Setting navigation "current" or "active" class when navigation is built with Multi Url Picker

    I am using the MUP (Multi Url Picker) to build my navigation.
    This requires us to use the <Link> object vs the <IPublishedContent> . That said I am trying to get the current URL or page and adding the "active" CSS class to it. When I try to use the "IsAncestorOrSelf()" like in every post suggested in Our, but because I am using the MUP, the "IsAncestorOrSelf()" is not working.

    I get the error: 'Link' does not contain a definition for 'IsAncestorOrSelf' and no accessible extension method 'IsAncestorOrSelf' accepting a first argument of type 'Link'

    My code is below:

      @{ var topLevelNavItemLink = topLevelNavItem.GetPropertyValue<Link>("navigationElementLinkMUP");}
    
    @if (topLevelNavItemLink != null)
    {
        @*This doesn't work using IsAncestorOrSelf()*@
                <a href="@topLevelNavItemLink.Url" class="navItem" @(topLevelNavItemLink.IsAncestorOrSelf(Model) ? "active" : null)>
                        @topLevelNavItemLink.Name
                </a>
    
    }
    
  • Alex Skrypnyk 6175 posts 24186 karma points MVP 8x admin c-trib
    Aug 27, 2021 @ 10:14
    Alex Skrypnyk
    0

    Hi Carlos

    You can get umbraco page by URL with this method - UmbracoContext.Current.ContentCache.GetByRoute(string URL)

    Then compare URLs and if they are the same it's an actual page

    If you are using only umbraco pages in the navigation then use Multiple Content Picker instead of Multy URL picker

    Thanks,

    Alex

  • Carlos Mosqueda 244 posts 435 karma points
    Aug 27, 2021 @ 16:40
    Carlos Mosqueda
    0

    So I ended up finding out what I needed by simply using "CurrentPage.Url" which is only in U7 I know. We are on 8 and 9 as an RC, we are not there yet.

    That said this was my solution,

    But here is my code this far

         <a href="@topLevelNavItemLink.Url" class="navItem @(CurrentPage.Url == topLevelNavItemLink.Url ? "nav-item-active" : null)">
                        @topLevelNavItemLink.Name
           </a>
    
Please Sign in or register to post replies

Write your reply to:

Draft