Android (bottom) style navbar with icons on MAUI blazor

Question

I'm trying to make a navbar fixed to the bottom that simulates a Tab Bar, with icons on top of the page name. Here's the code on my NavMenu.razor:

<nav class="navbar navbar-dark navbar-expand fixed-bottom bg-dark justify-content-center">
<div class="container-fluid">
    <ul class="navbar-nav nav-justified w-100 text-center">
        <li class="nav-item">
            <NavLink class="nav-link d-flex flex-column" href="" Match="NavLinkMatch.All">
                <i class="bi bi-house-fill" aria-hidden="true"></i>
                <span>Home</span>
            </NavLink>
        </li>
        <li class="nav-item">
            <NavLink class="nav-link d-flex flex-column" href="book">
                <i class="bi bi-calendar-check-fill" aria-hidden="true"></i>
                <span>Book</span>
            </NavLink>
        </li>
        <li class="nav-item">
            <NavLink class="nav-link d-flex flex-column" href="profile">
                <i class="bi bi-person-fill" aria-hidden="true"></i>
                <span>Profile</span>
            </NavLink>
        </li>
        <li class="nav-item">
            <NavLink class="nav-link d-flex flex-column" href="settings">
                <i class="bi bi-gear-fill" aria-hidden="true"></i>
                <span>Settings</span>
            </NavLink>
        </li>
    </ul>
</div>

And this is my MainLayout.razor:

<div class="page">
<NavMenu />

<main>
    <article class="content px-4">
        @Body
    </article>
</main>

But the result is terrible:

Even though this jsfiddle shows the correct behaviour: https://jsfiddle.net/5orphjv4/2/

Any idea what I'm doing wrong?

Answer 1

I can reproduce you problem and this is because the navbar uses the default NavMenu.razor.css. You can fix it by change the default css style.

1. Make the first nav item at the same line as others:

Open the NavMenu.razor.css below the NavMenu.razor, and delete the below code:

.nav-item:first-of-type {
        padding-top: 1rem;
    }

2. Make the clicked effect contains the text:

Open the NavMenu.razor.css below the NavMenu.razor, and change the height of the nav item:

.nav-item ::deep a {
    color: #d7d7d7;
    border-radius: 4px;
    height: 5rem;<!-- old value is 3rem -->
    display: flex;
    align-items: center;
    line-height: 3rem;
}

And the result image: