Customize Blazor’s NavMenu

The default Blazor navigation menu is in NavMenu.razor. Its CSS is in NavMenu.razor.css, and contains such exciting classes as bi-plus-square-fill-nav-menu and bi-house-door-fill-nav-menu.

These are all Bootstrap Icons. Here I’ll show you how to add another Bootstrap icon to the NavMenu.

I’m going to add the “Envelope exclamation fill” icon. From the Bootstrap page, copy the SVG code to your clipboard, e.g.

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-exclamation-fill" viewBox="0 0 16 16">
  <path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.026A2 2 0 0 0 2 14h6.256A4.5 4.5 0 0 1 8 12.5a4.49 4.49 0 0 1 1.606-3.446l-.367-.225L8 9.586zM16 4.697v4.974A4.5 4.5 0 0 0 12.5 8a4.5 4.5 0 0 0-1.965.45l-.338-.207z"/>
  <path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7m.5-5v1.5a.5.5 0 0 1-1 0V11a.5.5 0 0 1 1 0m0 3a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0"/>
</svg>

In the above, change the fill=”currentColor” to fill=”white”.

We’re gonna need to URL encode the above which you can do anywhere such as https://www.urlencoder.org/, which gives you

%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%20class%3D%22bi%20bi-envelope-exclamation-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20d%3D%22M.05%203.555A2%202%200%200%201%202%202h12a2%202%200%200%201%201.95%201.555L8%208.414zM0%204.697v7.104l5.803-3.558zM6.761%208.83l-6.57%204.026A2%202%200%200%200%202%2014h6.256A4.5%204.5%200%200%201%208%2012.5a4.49%204.49%200%200%201%201.606-3.446l-.367-.225L8%209.586zM16%204.697v4.974A4.5%204.5%200%200%200%2012.5%208a4.5%204.5%200%200%200-1.965.45l-.338-.207z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M12.5%2016a3.5%203.5%200%201%200%200-7%203.5%203.5%200%200%200%200%207m.5-5v1.5a.5.5%200%200%201-1%200V11a.5.5%200%200%201%201%200m0%203a.5.5%200%201%201-1%200%20.5.5%200%200%201%201%200%22%2F%3E%0A%3C%2Fsvg%3E

Now open the NavMenu.razor.css and copy one of the existing styles such as .bi-list-nested-nav-menu and give it a new name, such as .bi-envelope-fill-nav-menu. Paste in the above after “data:image/svg+xml,”.

.bi-envelope-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%20class%3D%22bi%20bi-envelope-exclamation-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20d%3D%22M.05%203.555A2%202%200%200%201%202%202h12a2%202%200%200%201%201.95%201.555L8%208.414zM0%204.697v7.104l5.803-3.558zM6.761%208.83l-6.57%204.026A2%202%200%200%200%202%2014h6.256A4.5%204.5%200%200%201%208%2012.5a4.49%204.49%200%200%201%201.606-3.446l-.367-.225L8%209.586zM16%204.697v4.974A4.5%204.5%200%200%200%2012.5%208a4.5%204.5%200%200%200-1.965.45l-.338-.207z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M12.5%2016a3.5%203.5%200%201%200%200-7%203.5%203.5%200%200%200%200%207m.5-5v1.5a.5.5%200%200%201-1%200V11a.5.5%200%200%201%201%200m0%203a.5.5%200%201%201-1%200%20.5.5%200%200%201%201%200%22%2F%3E%0A%3C%2Fsvg%3E");
}

Now you can use the bi-envelope-fill-nav-menu class in the NavMenu.razor:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="rating-unit-dead-letter">
        <span class="bi bi-envelope-fill-nav-menu" aria-hidden="true"></span> Rating Unit Dead Letter
    </NavLink>
</div>

And here it is:
Image may be NSFW.
Clik here to view.