Advertisement

#17 Bottom Navigation

One of the most defining features of a mobile device is its relativaly small viewport. A popular way of dealing with this when it comes navigation is to place our anchor tags within a collapsable menu that is animated in and out with the press of a button. I have used and continue to use the hamburger icon for this very purpose. If you do any amount of searching you can find plenty of negativity around its use. One possible alternative, which we will implement here, is a bottom navigation menu that is displayed only on smaller form factor devices.

Parts

Starting with the markup

  • WebUi
    • Pages
      • Shared
        • _BottomNav.cshtml

We will start by specifying the starting markup for our bottom navigation (a).

_BottomNav.cshtml

<nav class="bottom-navigation">
    <ul>
        <li>
            <a href="/">
                <i class="fas fa-home fa-2x"></i>
                <p>Home</p>
            </a>
        </li>
        <li>
            <a href="/applications/page-1">
                <i class="fas fa-cloud fa-2x"></i>
                <p>Apps</p>
            </a>
        </li>
        <li>
            <a href="/articles/page-1">
                <i class="fas fa-newspaper fa-2x"></i>
                <p>Articles</p>
            </a>
        </li>
        <li>
            <a href="/articles/series/page-1">
                <i class="fas fa-book-open fa-2x"></i>
                <p>Series</p>
            </a>
        </li>
    </ul>
</nav>
(a) The starting markup for our bottom navigation.

Adding the bottom navigation to our pages

  • WebUi
    • Pages
      • Shared
        • _Layout.cshtml

Just like our main navigation menu we will want to include the bottom navigation bar on each pages which we can easily accomplish by adding it to our layout page (b).

_Layout.cshtml

...
<html>
    ...
    <body>
        ...
        <partial name="_BottomNav"/>
        ...
    </body>
</html>
(b) Adding the bottom navigation to our layout page means it will be available on each page.

We need some icons

  • WebUi
    • Source
      • main.page.ts

As we can see in the markup our bottom navigation is going to make use of a few different icons. As we have done before we are going to getting this icons from a font awesome package that we have previously installed (c).

main.page.ts

...
import { faBookOpen } from "@fortawesome/free-solid-svg-icons/faBookOpen";
import { faCloud } from "@fortawesome/free-solid-svg-icons/faCloud";
import { faHome } from "@fortawesome/free-solid-svg-icons/faHome";
import { faNewspaper } from "@fortawesome/free-solid-svg-icons/faNewspaper";

library.add(
    ...
    faBookOpen,
    faCloud,
    ...
    faHome,
    faNewspaper,
    ...
);
...
(c) Importing a few font awesome icons for us to use.
Advertisement

Time to make it look good

  • WebUi
    • Source
      • components
        • bottom-nav
          • bottom-nav.component.scss

Now that we have the markup and all of the icons that we are using in place it is time for us to do some styling (d).

bottom-nav.component.scss

@import "../../sass/_non-rendering.scss";

$dark-gray: #333 !default;
$action-color: #0984e3 !default;

$navigation-anchor-color: lighten($dark-gray, 20%) !default;
$navigation-background-color: white !default;
$navigation-border-color: $navigation-anchor-color !default;

$mobile-break-width: 1024px !default;

.bottom-navigation {
    @include position(fixed, null 0 0 0);
    background-color: $navigation-background-color;
    border-color: $navigation-border-color;
    border-style: solid;
    @include border-width(1px 0 0 0);
    z-index: 2000;

    @include media-gt($mobile-break-width) {
        display: none;
    }

    ul {
        display: flex;
        flex-direction: row;
        max-width: 500px;
        @include margin(null auto);
    }

    li {
        flex: 1;
    }

    p {
        margin: 0;
    }

    a {
        display: block;
        text-align: center;
        text-decoration: none;
        @include padding(0.625em 0);
        color: $navigation-anchor-color;
    }
}
(d) The initial styling of our bottom navigation.

Adding the css to our pages

  • WebUi
    • Source
      • main.page.scss

To add our styles to each of our pages we just need to import our sass file into our main sass file (e). At the same time we also need to add some bottom padding.

main.page.scss

...
@import "./components/bottom-nav/bottom-nav.component.scss";

body {
    .body-content {
        @include padding(em(56.33px) null null null);

        @include media-lt-or-eq(1024px) {
            @include padding(null null em(79px) null);
        }
    }
}
(e) Importing the bottom navigation styles into our main scss file and adding some padding to the bottom of our pages.

Deciding which anchor is active

  • WebUi
    • Pages
      • Shared
        • _BottomNav.cshtml

The last thing we would like to do is to have the ability to visual show which, if any, of our bottom navigation routes is active. To do this we will apply a css class based on the current route (f).

_BottomNav.cshtml

@{
    const string activeClass = "active";
    var homeCssClass = "";
    var applicationsCssClass = "";
    var articlesCssClass = "";
    var seriesCssClass = "";

    if (Context.Request.Path.HasValue) {
        var path = Context.Request.Path.Value;
        if (path == "/") 
        {
            homeCssClass = activeClass;
        }
        else if (path.Contains("applications/page"))
        {
            applicationsCssClass = activeClass;
        }
        else if (path.Contains("articles/page"))
        {
            articlesCssClass = activeClass;
        }
        else if (path.Contains("series/page"))
        {
            seriesCssClass = activeClass;
        }
    }
}

<nav class="bottom-navigation">
    <ul>
        <li>
            <a class="@homeCssClass" ...>
                ...
            </a>
        </li>
        <li>
            <a class="@applicationsCssClass" ...>
                ...
            </a>
        </li>
        <li>
            <a class="@articlesCssClass" ...>
                ...
            </a>
        </li>
        <li>
            <a class="@seriesCssClass" ...>
                ...
            </a>
        </li>
    </ul>
</nav>
(f) Applying an active class to our bottom navigation anchors based on the current route.

Styling the active anchor

  • WebUi
    • Source
      • components
        • bottom-nav
          • bottom-nav.component.scss

Last but not least we just need to add a little styling to our active anchor (g).

bottom-nav.component.scss

...
.bottom-navigation {
    ...
    a {
        ...
        &.active {
            background-color: darken($navigation-anchor-color, 10%);
            color: $navigation-background-color;
        }
    }
}
(g) Adding a few simple style changes to show the active anchor.
Exciton Interactive LLC
Advertisement