Icons are among the most versatile tools in a web designer’s arsenal. They can be used as attention-grabbing visuals just about anywhere on a website or app. Whether they’re alerting users of a flash sale or a new social media notification, they usually get the point across.
Thus, utilizing icons in a site’s navigation seems like a natural fit. Visually, it sure makes sense. But doing it well does require some careful planning.
With accessibility being such a key concern, extra steps need to be taken when icons aren’t accompanied by text. Context is also vital. While it may be obvious that the little house icon takes you to the home page, other concepts aren’t so easy to convey.
The Web Designer Toolbox
Unlimited Downloads: 1,000,000+ Web Templates, Themes, Plugins, Design Assets, and much more!
Sliding on Through
This navigation is attractive, makes great use of the allotted space and keeps accessibility in mind. Click on an icon and you’ll witness a slick “sliding” effect that highlights the icon and displays accompanying text (which is also available to screen readers). Also note that the total width of the container never grows or shrinks – it’s beautifully consistent.
Sweet Gooey Tabs
The included “gooey” navigation effect on this tabbed menu is both fun and intuitive. Combined with clean icons, descriptive text and bold coloring, it would be perfect for a mobile or web app. That said, it might be most effective in small doses. Larger menus could become a little, well, overwhelming and sticky.
Why Not Change the Whole Screen?
Sure, there are some similarities with the previous example. But this gooey menu kicks it up an extra notch, thanks to its background color-changing effect with each selection. The animated icons also “draw” upon click, making for a more exciting user experience. The only thing missing here is accessibility, but that could be resolved with some screen reader text.
Vertical Icons with Context
A vertical navigation bar offers a means to create highly-visual navigation that doesn’t take up too much space. But icons alone aren’t enough. Usually, it makes sense to expand the menu in some way. This particular CSS-only example uses a hover effect to display the menu item’s title. It’s neat, clean and intuitive.
Enter the Dark Mode
Dark design seems to become more popular every day. And this icon navigation bar is a perfect compliment. Click on one of those noir icons and they’ll turn a bright white with a snazzy red underline. The menu uses jQuery to create a smooth animation. Again, you’ll want to add your own accessibility features here.
If you’re looking for a dead-simple navigation with some super-cool animation, you’ll want to stop right here. This icon-based menu was built for a kiosk and you can definitely see that inspiration. But an industrious designer could add some text here and utilize this snippet for a microsite or landing page.
Expandable Vertical Navigation
Here’s another icon-based vertical menu that does a great job of staying out of the way. But what if you need more context? Click or tap on the hamburger icon on the upper left of the screen to expand the menu, which includes a search field. There’s more that could be done here, such as expanding each individual menu item with a click or hover. But it’s neat nonetheless.
Form a Semi-Circle
This circular layout could make for an interesting utility menu. It takes up limited space and can be neatly tucked away into a corner. Perfect for allowing users to access a few key account functions, for example.
Iconic Choices for Your Menus
The snippets above offer a little something for everyone. They feature different space requirements, interactions and, despite their simple looks, underlying complexity. Each could be the perfect fit for your particular project.
We hope you enjoyed the variety of styles shown here. If you’re looking for even more icon-based navigation, check out our CodePen Collection.