Speckyboy Design Magazine

8 Examples of Icon-Based Navigation, Enhanced with CSS and JavaScript

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.

Today, we’ll share 8 unique CSS and JavaScript code snippets that bring icons to navigation. Along the way, we’ll point out some elements that make them stand out – for better or worse.

The Web Designer Toolbox

Unlimited Downloads: 1,000,000+ Web Templates, Themes, Plugins, Design Assets, and much more!

Web Templates

2,000+ Templates

Newsletter Templates

270+ Templates

Dashboard Templates

150+ Templates

WordPress Themes

1,200+ Themes

WordPress Plugins

550+ Plugins

Mockup Templates

8,200+ Templates

Start Downloading Now!

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.

See the Pen Sliding Icon Menu by Steve Gardner

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.

See the Pen TAB Gooey Icon Navigation Menu Concept

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.

See the Pen Animated Tab Bar by abxlfazl khxrshidi

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.

See the Pen Vertical Icon Navigation Menu by Saxon Chuang

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.

See the Pen Simple Icon Navigation by Ganesh Chikhalikar

Push Buttons

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.

See the Pen SVG Kiosk Icon Menu by Chris Gannon

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.

See the Pen Google Nexus Menu by Ahmed Elhanony

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.

See the Pen Circular Icon Navigation by Mark Little

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.

The post 8 Examples of Icon-Based Navigation, Enhanced with CSS and JavaScript appeared first on Speckyboy Design Magazine.

Recent Articles: