hi how can i make clicked menu item active im new to umbraco - Using Umbraco and getting started

Press Ctrl / CMD + C to copy this to your clipboard.

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

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
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

0

This was worked.

Thank you so much!

Copy Link
is working on a reply...

Please Sign in or register to post replies