There are a variety of ways you can use Brandcast to design website navigation that’s usable on both desktop and mobile devices.
This article walks through the most common method: swapping from one navigation on desktop, to a mobile-friendly one on smaller devices that toggles open and closed when the user taps a "hamburger" icon.
You should be familiar with the way that Device Modes work in Brandcast before you attempt this. Since site navigation typically appears across the whole website, you’ll probably want to do this entire process on a Master Page. And, if you haven’t had a chance to experiment with the Interactions framework, you should familiarize yourself with it first!
Take a moment to watch our pre-recorded webinar on how to create a mobile menu.
Overall, the steps you’ll take to build this navigation are:
- Use the Show/Hide on Device Panel to hide your regular desktop nav on mobile devices.
- Create your mobile menu icon. Use the Show/Hide on Device panel to hide it in desktop view, so it's only visible on mobile devices.
- Create your mobile navigation in its visible, expanded state. (This is commonly a full-screen takeover, but it’s completely up to you how you want to design it.)
- When you’re satisfied, hide this full-screen mobile navigation, so that it's not visible in its default state. The simplest way to do this is to use the Transform Panel to apply an x- or y-transform on it.
- Select your mobile menu icon, and create a new interaction.
- While still in Interaction Mode, reveal the mobile menu. (If you used an x- or y-transform to hide the menu in its default state, just zero it out.)
Hide the Desktop Navigation in Mobile Views
A typical website navigation might be something like a series of links in a header at the top of the site -- like this, for example:
This navigation doesn’t translate well to smaller screens, because there isn’t room for all of the elements and links in it.
The first thing to do is to hide the navigation on mobile devices. In this example, we'll hide the links on the right-hand side, while leaving the logo and header bar visible. We’ll do this by selecting the links and using the Show/Hide on Device Panel:
It’s up to you which devices you want to select — in some cases, you may need to swap to a mobile menu on anything narrower than a desktop screen; in other cases, only on phones.
Create your Mobile Menu Icon
Next, swap to the Device Mode where your default navigation first becomes hidden (in this example, that would be tablet portrait view.) Now add the icon that will toggle the mobile navigation open / closed when the user taps it.
You could upload your icon as an image to the Media Library and place it as a new image element. Or, you could build a simple icon like a hamburger from scratch, by creating a few small containers and placing them inside a larger one, like this:
(The advantage to creating your icon out of container elements is that it will be easy to animate changes in its size, position, or color if you want to later on.)
To ensure that the icon stays visible all the time, give it a very high z-index in the Positioning Panel.
Once you’ve created your mobile menu icon, use the Show/Hide on Device Panel once again to hide it on the corresponding desktop views, so that it only appears on the mobile devices you want:
Create your Mobile Navigation
Now that you have a mobile nav icon, next you’ll create the mobile-friendly navigation that it opens. You’re free to design this however you want; the important thing is that it should be easy to use on a small screen.
In this example, we’ll have it take over the entire screen, and display the navigation as a vertical stack of large text links.
First, we’ll put a new container anywhere on the page, and give it a background color:
Then, we’ll use the Positioning Panel to fix it to the page (so that it's always within view when it opens). We will give it a high z-index, so that it covers other page elements — but lower than the z-index we applied to our hamburger icon, to ensure the icon always remains visible:
We’ll also use the Dimensions Panel to give it a height of 100vh (100% of the user’s viewport), so that it takes over the entire screen:
Now that we’ve got a full-screen takeover menu that’s covering the whole page, we can add our navigation links, style them, and add any other design elements that we might want to appear on this mobile menu. We might end up with something like this:
Hide the Mobile Navigation
Our mobile navigation is now in its “open” state. By default, we want it to be hidden, and only toggle open when the user taps the hamburger icon.
Select the mobile menu, open the Transform Panel, and use a transform to hide it completely:
In this example, we’re using translate-X to hide it off the right-hand side of the page. You could just as easily hide it off to the left side, or use translate-Y to hide it off the top or bottom of the page. Your decision will determine which direction the menu appears from when the user opens it.
Create the Open/Close Menu Interaction
Now that our mobile menu has been created and is hidden in its default state, the final step is to apply an interaction to the hamburger icon which will toggle the menu open and closed.
Select the icon, and using the Interactions Panel, create a new interaction:
You can leave the trigger settings as-is: we want the mobile menu to open when the user clicks (or taps) the icon, and we want them to be able to toggle the menu open and closed.
While still in Interaction Mode, select the mobile menu. Because it’s hidden off the screen, you’ll need to use the Page Structure Panel to locate and select it:
Now open the Transform Panel again. Set the translation that you used to hide the menu back to 0:
Preview Your Mobile Menu
You’re done! Exit Interaction Mode and check out the result by switching back to Desktop Device Mode, and entering Preview Mode.
As you make your browser window narrower, you should see your desktop navigation disappear and be replaced by your mobile menu icon. You should be able to click the icon to open and close your mobile navigation.
This is a starting point for building animated menus; there are lots of other techniques you can use to make your UI unique. Some possibilities:
- As part of the interaction, animate the hamburger icon so that it changes color, changes size, or reconfigures itself into a different shape. Here's an example. (If you’re using an image for the icon, you can achieve a similar effect by swapping to a different image as part of the interaction.)
- Tweak your animation effect using the Transitions Panel to make it zippier, slower, or bouncier.
- You may not want your menu to animate sideways / upwards / downwards onto the page. Pop it in instantly by reducing the transition time to 0. Or, instead of using a transform, fade it in: give it a negative z-index and 0 opacity in its default state.
- If you're working with a one-page website that relies on anchor link navigation, keep in mind that your mobile navigation will stay open when the user clicks on links, since they aren't navigating to a new URL. You'll need to an additional "turn off" trigger to your interaction that closes the mobile menu. (This trigger should be on the overall link list element itself.)