Sign in Register
Copied to clipboard

Flag this post as spam?

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


  • Vijay 2 posts 72 karma points
    Oct 13, 2023 @ 08:05
    Vijay
    0

    Hi, How can I make clicked menu item active? I'm new to umbraco.

    @using Umbraco.Cms.Web.Common.PublishedModels;
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;


@{
    Layout = null;

}

<!DOCTYPE HTML>
<html>
<head>
    <title>Welcome - UmbracoTV</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
 <!-- Bootstrap5 CDN ....-->
</head>

<body>

    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg fixed-top py-4 ">
            <div class="container-fluid">
                <a class="navbar-brand text-white font-monospace " href="/">ALHAMRA</a>

            <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                @{
                    var selection = Umbraco.ContentAtRoot().FirstOrDefault()
                    .Children()
                    .Where(x => x.IsVisible());
                }

                <ul class="navbar-nav flex-grow-1 justify-content-end">
                    @foreach (var item in selection)
                    {
                     <li class="nav-item">
                        <a class="nav-link" href="@item.Url()">@item.Name()</a>
                    </li>
                }

            </ul>


        </div>
    </div>
</nav>
</header>

<main>

   @RenderBody()
</main>

<footer class="footer-bg">
   <!-- Footer  -->
</footer>

</body>
</html>

    Above my code. I'm using master template

    Copy Link
  • Billy 55 posts 266 karma points c-trib
    Oct 13, 2023 @ 10:55
    Billy
    1 
    @{
  var current = Umbraco.AssignedContentItem;
}

<li class="nav-item">
  <a class="@(current.Id == item.Id ? "active" : null)" nav-link" href="@item.Url()">@item.Name()</a>
</li>

    You can check Umbraco.AssignedContentItem to get the current page. Then compare the ID of current page in the list of items to detect the current.

    Copy Link
  • Vijay 2 posts 72 karma points
    Oct 16, 2023 @ 04:33
    Vijay
    0

    This was worked.

    Thank you so much!

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies