Building a bottom navigation bar for iPhone X/XS/XR
How the env() CSS property allowed us to build a touch-friendly, sticky bottom navigation bar for all types of screen sizes and devices.
Perhaps you’ve seen the env() CSS property being used somewhere, but maybe you didn’t know when or why you should use it? I was in a familiar position until a project at Butternut introduced me to its powers and use cases
Feel free to get familiar with theenv() property here on MDN.
Before we get stuck into some CSS though, I need to give you some context to what led me coming across and using this property in the Butternut codebase…
I and the rest of the Existing Customer Team (ECT) have been working on overhauling our customer account over the last few weeks and we’ve been iteratively rolling new pages to replace the old ones.
One of the first steps we took before we started work on updating the pages themselves was introducing an entirely new navigation experience which would include an app-like nav bar that sticks to the bottom of the screen. This would be a huge UI and UX improvement when compared to our previous experience which was solemnly contained in a hamburger many containing both links and dropdown menus.
I’m not going to lie, the old mobile navigation wasn’t a pleasant experience for both customers and developers…
Out with the old and in with the new
Full Gist can be found: https://gist.github.com/James-Bovis/63d5de260a4bddd879b875a115d49ee6
Prefer CodePen? Sure, here you go
In the Gist above is (a slimmed-down version) the exact HTML and Sass that appears on Butternut Box today, in all its glory.
I’d like to bring your attention to lines 12–15 in StickyFooter.sass where our wonderous env() property appears inside a calc() function:
// When a user is on a iPhone X device, we can use this user agent styling to ensure that the right amount of space is given to prevent phone UI form interfering with our elementpadding-bottom: calc(.5rem + env(safe-area-inset-bottom))
This padding-bottom property is placed upon our root .sticky-footer class and allows the element to always show the correct amount of bottom padding regardless of whether the user is using a traditional rectangular screened device or not.
In thecalc() function itself, we are summing our intended default padding value of .5rem (the space that appears all around the navigation bar) and what the current User Agent value of safe-area-inset-bottom is.
For iOS devices like the iPhone X/XR/XS/11/11 Pro — the Safari User Agent is able to calculate the sum of both our desired padding plus whatever the value of the safe area is at the bottom of the screen.
If safe-area-inset-bottom happens to be 0, we don’t get any extra padding when the Safari UI shrinks away, but when we do have a value for safe-area-inset-bottom , the combination of padding-bottom values come together nicely
On these devices then, our navbar has just the right amount of padding-bottom needed to not interfere with the Home Indicator and gives us a nice amount of padding when the bottom UI of Safari is brought back into view.
All in all, this is a problem I’ve run into a few times when using other websites on my iPhone Xs and have always thought that Apple must have thought of the UI implications before they released the iPhone X. And it turns out, they did… but it seems that some developers out there didn’t get the memo.
So, whether you’re building a bottom navigation in your next web project or a basket total indicator in your e-commerce project, be sure to keep the env() function in mind, especially for your users with non-rectangular phones and devices.
