ASP.NET Core Navigation markers
Tags: javascript, webdev, tutorial, frontend
Published: 2024-05-25 18:50:11

## Introduction

Learn how to make standard navigation links user friendly and accessible. With the standard ASP.NET Core project template the navigation appears as shown below.


![standard asp.net core navigation using Bootstrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpkn43ed50hgqn375i2z.png)

This is okay if there is a header (H1 tag) or breadcrumbs on each page while without either of these there is no indication on which page a visitor is on.

There is an easy way to show the visitor which page they are on by adding a handful of lines of JavaScript to the project’s site.js file located under the wwwroot/js folder of a project.

## Examples

{% cta https://github.com/karenpayneoregon/bootstrap-samples/tree/master/Project1 %} Sample project {% endcta %}


All of the following examples shown below are easy to implement, copy the example code in wwwroot/js/site.js and run the project. If the example code colors are not desirable simply change the colors to suite the application color schemes.

### Example 1

This version places a top and bottom border on the navigation link for the current page.


![current page link with border top and bottom](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xmrfkoqiso90li3yk0ub.png)

```javascript
document.addEventListener('DOMContentLoaded', () => {

    document.querySelectorAll('.nav-link').forEach(link => {

        link.classList.remove('border-bottom');
        link.classList.remove('border-top');

        if (link.getAttribute('href').toLowerCase() === location.pathname.toLowerCase()) {
            link.classList.add('border-dark');
            link.classList.add('border-bottom');
            link.classList.add('border-top');
        } else {
            link.classList.add('text-dark');
        }
    });
});
```

Here the border-dark has been changed to border-danger.


![same as above, different border color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3hb5fyb1g4pputevmt1.png)

### Example 2

This example has no border but could, instead, on the active page the background color is changed to `bg-primary` and forecolor set to `text-white`


![navigation current page has back and foreground colors set](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6rpi2gldrkhh5lu1ghui.png)

```javascript
document.addEventListener('DOMContentLoaded', () => {

    document.querySelectorAll('.nav-link').forEach(link => {

        link.classList.remove('text-dark');
        link.classList.remove('bg-primary');

        if (link.getAttribute('href').toLowerCase() === location.pathname.toLowerCase()) {
            link.classList.add('text-white');
            link.classList.add('bg-primary');
        } else {
            link.classList.add('text-dark');
        }
    });
})
```

### Example 2
This version places an underline beneath the active navigation link for the current page, see Bootstrap [documentation](https://blog.getbootstrap.com/#new-link-helpers-and-utilities) [New nav underline](https://getbootstrap.com/docs/5.3/components/navs-tabs/#underline).

**Step 1** 
Add `nav-underline` to the `nav` element in _Layout.cshtml.


![_Layout.cshtml code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bf3765q2rjc11vjm53k.png)

**Step 2**

Add the following code to wwwroot/js.site.js

```javascript
document.addEventListener('DOMContentLoaded', () => {

    document.querySelectorAll('.nav-link').forEach(link => {

        link.classList.remove('active');

        if (link.getAttribute('href').toLowerCase() === location.pathname.toLowerCase()) {
            link.classList.add('active');
        }
    });
});
```
![underline nav link](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46t829jib6g687hdhp0j.png)


## Special cases

For some cases the rule indicates not to repeat links. The following code adds event listeners for an about page directly below any of the above code samples.

```javascript
document.querySelectorAll('a#aboutFooter').forEach(link => {
    link.addEventListener('click', (e) => {
        window.location = 'About';
    });
});

document.querySelectorAll('a#aboutNav').forEach(link => {
    link.addEventListener('click', (e) => {
        window.location = 'About';
    });
});

```


## Mechanics 

The file site.js run before a page is rendered via the code samples shown by running in document load event. There may be cases where this clashes with current document load events which means code needs to be refactored.


## Summary

The basics have been shown and demonstrated to use borders and colors to indicate to a visitor of a web page is the active page for ASP.NET Core projects.

**Next steps** 
For accessibility, consider adding `aria-current="page"` and `aria-current="true"` when setting the active page in the code samples presented as some visitors may be vision impaired and can not see colors.

## Resources

- Bootstrap [Navbar](https://getbootstrap.com/docs/5.0/components/navbar/) documentation.
- Bootstrap [colors](https://getbootstrap.com/docs/5.0/utilities/colors/)
- Bootstrap [JavaScript](https://getbootstrap.com/docs/5.0/getting-started/javascript/)