Horizontal navigation bars have become the norm in web design, so if your audience isn’t exactly web-savvy, they’re a safe bet. But if you’re looking to do something a bit different, sidebar navigation can help keep your site looking clean while still providing easy access to links.
In this, my second Webflow Bit, I’ll show you how quick and easy it is to make a sidebar navigation menu for your Webflow websites.
Step 1: Drag in a navbar component
Open the Add panel on the left, scroll down to the Components section, then drag the navbar component onto your canvas (or use the Navigator tab if you need more precision).
Step 2: Style your navbar
Set the position to fixed left and set the top, left, and bottom to 0px. (Or put it on the right, with top, right, and bottom set to 0px.) You can also add a background color if you’d like.
Step 3: Define your navbar settings
With your navbar selected, go to the Settings tab, then set the menu icon to “Desktop and below” so it displays at all breakpoints. (Though, of course, you can set the sidebar nav to start displaying at whatever breakpoint you want.) Then tick the “Menu fills page height” box and set the menu type to “over left.”
Optional: Style your menu icon
If you changed the background color of your navbar component, you may need to change the menu icon’s color too. To do that, switch to the Navigator tab, select the menu button, give it a class name, then change the font color. You may need to do this for the links in your nav as well.
Pro tip: check your text color contrast
Check the legibility of your text links with WebAIM’s Color Contrast Checker so those with vision problems can still navigate your website.
Step 4: Preview and enjoy!
Click the preview button at the top left of the Designer to see your work in action.
Zestful helps companies book fun, unique, and local group activities available through their platform. You might expect a site like theirs to scream FUN! Well they don’t disappoint. Their upbeat vibe supports their mission to help teams socialize outside the office without the usual headache that comes with event planning.
Petal is a younger company, but they stand out because design pervades the focus and direction of their marketing. Even their product (a new, no-fees credit card) features a stunning and unique design. Their website follows suit — it’s a breath of fresh air — with beautiful colors, generous whitespace, and clear, concise copy.
BankMobile’s website makes banking look hip and modern, as hard as that might sound. With bold colors, clearly presented information and a consistent feel throughout the site, we especially appreciate the unique horizontal scrolling section they use to walk through the UI on their mobile app.
Freelancers are constantly on the lookout for new tools and products to make managing their business easier — Bonsai focuses on checking as many of those boxes as possible with tools that range from invoicing and payments to proposals and contracts. With so many features in their platform, their marketing site needs to effectively explain and differentiate how their products can help freelancers. A dedicated page for each one does just that.
Bonsai gets bonus points for creating an impressive resource hub for freelancers. They share survey data about rates, best tools for freelancers, and the top places to find new work.
As an education partner, AltSchool has an important story and mission that underpins their work. Their website does a great job sharing their story with photography, copy, and a consistently communicated mission: to enable all children to reach their potential.
Ready to build a business site of your own but not sure where to start? We’ve got you covered. Check out our full business site rebuild course on Webflow University.
Did we miss any standouts? Let us know in the comments!