ASP.NET Core Navigation markers

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.

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

Sample project

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.

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.

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

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 New nav underline.

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

Step 2

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

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');
        }
    });
});

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.

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 documentation.
• Bootstrap colors
• Bootstrap JavaScript

Comments

[João Angelo]

Hi Karen Payne,
Top, very nice !
Thanks for sharing