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

Icons are amongst the most flexible tools in a web designer’s toolbox. They can be utilized as eye-catching visuals almost anywhere on a site or app. Whether they look out users of a flash sale or a brand-new social networks notice, they generally understand throughout.

Therefore, using icons in a website’s navigation looks like a natural fit. Aesthetically, it sure makes good sense. Doing it well does need some mindful preparation.

With availability being such an essential issue, additional actions require to be taken when icons aren’t accompanied by text. Context is likewise crucial. While it might be apparent that the little home icon takes you to the web page, other principles aren’t so simple to communicate.

Today, we’ll share 8 special CSS and JavaScript code bits that bring icons to navigation. Along the method, we’ll mention some components that make them stand apart– for much better or even worse.

The Web Designer Tool Kit

Endless Downloads: 1,000,000+ Web Design Templates, Styles, Plugins, Style Assets, and a lot more!

Moving on Through

This navigation is appealing, makes terrific usage of the allocated area and keeps ease of access in mind. Click an icon and you’ll witness a slick “moving” result that highlights the icon and shows accompanying text (which is likewise readily available to evaluate readers). Note that the overall width of the container never ever diminishes or grows– it’s magnificently constant.

See the Pen Moving Icon Menu by Steve Gardner Sweet Gooey Tabs The consisted of”gooey”navigation impact on this tabbed menu is both enjoyable and instinctive. Integrated with tidy icons, detailed text and strong coloring, it would be ideal for a mobile or web app. That stated, it may be most reliable in little dosages. Bigger menus might end up being a little, well, sticky and frustrating.

< p class="codepen"data-height=" 450"data-theme-id="dark "data-default-tab="outcome" data-user="

fady-nabil”data-slug-hash =”VwjgKQY” data-preview=

“real “data-pen-title =”TAB Gooey Icon Navigation Menu Principle” > See the Pen TAB Gooey Icon Navigation Menu Principle Why Not Modification the entire Screen? Sure, there are some resemblances with the previous example. This gooey menu kicks it up an additional notch, thanks to its background color-changing impact with each choice. The animated icons likewise “draw” upon click, producing a more interesting user experience. The only thing missing out on here is availability, however that might be solved with some screen reader text.

< p class="codepen"data-height=" 450"data-theme-id="dark"data-default-tab =" outcome"data-user="

abxlfazl”data-slug-hash =”VwKzaEm”data-preview=”

real”data-pen-title=” Animated Tab Bar “> See the Pen Animated Tab Bar by abxlfazl khxrshidi Vertical Icons with Context A vertical navigation bar provides a way to develop highly-visual navigation that does not use up excessive area. Icons alone aren’t enough. Typically, it makes good sense to broaden the menu in some method. This specific CSS-only example utilizes a hover result to show the menu product’s title. It’s cool, user-friendly and tidy.

< p class="codepen"data-height=" 450"data-theme-id="dark"data-default-tab="outcome" data-user =”tooilxui”data-slug-hash=”jOMEqQO” data-preview=

“real “data-pen-title =”Vertical Icon Navigation Menu”> See the Pen Vertical Icon Navigation Menu by Saxon Chuang Go Into the Dark Mode Dark style appears to end up being more popular every day. And this icon navigation bar is a best compliment. Click among those noir icons and they’ll turn an intense white with a trendy red highlight. The menu utilizes jQuery to develop a smooth animation. Once again, you’ll wish to include your own availability functions here.

< p class="codepen"data-height=" 450"data-theme-id="dark"data-default-tab=" outcome”data-user=”gansoft”data-slug-hash= “QWyXzyj”data-preview=”real”data-pen-title=” Basic Icon Navigation “> See the Pen Basic Icon Navigation by Ganesh Chikhalikar Press Buttons You’ll desire to stop right here if you’re looking for a dead-simple navigation with some super-cool animation. This icon-based menu was developed for a kiosk and you can certainly see that motivation. An industrious designer might include some text here and use this bit 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 fantastic task of avoiding of the method. What if you require more context? Tap or click on the hamburger icon on the upper left of the screen to broaden the menu, that includes a search field. There’s more that might be done here, such as broadening each private menu product with a hover or click. It’s cool however.

See the Pen Google Nexus Menu by Ahmed Elhanony Kind a Semi-Circle This circular design might produce a fascinating energy menu. It uses up restricted area and can be nicely stashed into a corner. Perfect for enabling users to access a couple of crucial account functions, for instance.

< p class="codepen"data-height="450"data-theme-id="dark"data-default-tab="outcome"data-user=" hiremarklittle"data-slug-hash="xGeRBr"data-preview="real"data-pen-title="Circular Icon Navigation “> See the Pen Circular Icon Navigation by Mark Little Renowned Options for Your Menus

The bits above deal a little something for everybody. They include various area requirements, interactions and, in spite of their basic appearances, underlying intricacy. Each might be the ideal suitable for your specific task.

We hope you taken pleasure in the range of designs revealed here. If you’re searching for a lot more icon-based navigation, take a look at our CodePen Collection.

Associated Posts

Leave a Reply

Your email address will not be published. Required fields are marked *