CLOSE
(close intro)
CLOSE
    • Professional Fonts (70 submissions)

      A curated showcase of fonts intended for professional use. These typefaces also support extended characters, useful for writing in multiple languages.

      • Pathway Gothic One Professional Font

        A compelling font with a professional appearance, perfect for websites focused on large texts and creative writing. This font includes lots of uppercase, lowercase and especial glyphs and it just comes as regular. This font can be downloaded and used for free.

      • Tauri: Professional Sharp Sans-serif Font

        Tauri is a standard semi condensed sans-serif typeface, perfect for web environments and printed design. The font is readable, simple to use and clear. It can be used in any size, but it comes in one variation (regular). It comes in TTF format and includes 248 characters. You can use it both commercially and personally.

      • Fabiolo: Sober Multi-purpose Font Family

        Fabiolo is a sober multi-purpose font family with 6 variations, including light, regular, semibold, smallcap light, smallcap regular and smallcap semibold. It was created by Fabien Despinoy.

      • PIER: Free Elegant Sans Serif Typeface

        PIER is a simple sans-serif font for using in all kinds of media thanks to its elegance. It has uppercase and lowercase characters, numbers and lots of special characters and glyphs, fitting printed design, digital art, and web design perfectly. This font was made by Mathieu Desjardins.

      • Gidole: Free Sans-serif Typeface

        Gidole is an elegant sans-serif font for online presentations or printed purposes. It includes special characters, numbers, uppercase and lowercase. It is a free font that looks elegant anywhere and it was made by Andreas Larsen.

      • Paneuropa Neue: Elegant Free Font

        The digital version of polish Paneuropa font after modifications. It is a simple but very beautiful sans-serif font for any kind of use. It includes uppercase, lowercase, numbers and special characters, elegantly arranged and useful for web, apps and print design. it is free to download and test, and it was created by Bartek Bojarczuk.

      • Aqua Grotesque Typeface

        The Aqua Grotesque is a compelling typeface with an elegant style and nice sharp shapes. It is a sans-serif creation that includes both uppercase and lowercase characters, as well as numeric glyphs. This typeface can be used in elegant posters and advertising, complemented with dark colors and imagery so it delivers a powerful impact on the viewer. It was created by Laura Pol and it's free to download.

      • Ahamono: Free Monospaced Font

        Ahamono is a free monospaced typeface, with a fixed-pitch and width. It is an uppercase and lowercase font that allows you can use for headlines and regular text since it is legible in any level. The typeface also includes numbers and special characters, making it a complete option for any project. This font was created by Alfredo Marco Pradil.

      • Arca Majora Sans-Serif Font

        This font called ARCA Majora is a beautiful font with uppercase characters only. This font includes Latin characters, punctuation symbols and a few accents. This font was created by Alfredo Marco Pradil and it can be downloaded and used for free.

      • Jura: Free Professional Font Family

        Jura is a sans-serif font family that comes from Europe. It includes the Roman alphabet using the same kinds of strokes and curves as the Kayah Li (font) glyphs, and it was expanded to include glyphs for Cyrillic and Greek alphabets as well. The font family is available in four weights: Light, Book, Medium, and DemiBold.

      • Istok: Free Professional Font

        Istok Web is a beautiful typeface made for web environments especially. This is a sans serif font, easily readable, and ready to be used on any project. It is perfect for blogs or news sites since they depend a lot on texts. It is a complete font, including uppercase, lowercase, numbers and special characters. This typeface is free.

      • Ubuntu: Free Professional Font

        Ubuntu is the beautiful font of the popular Linux distro. It is a sharp yet curvy font, perfect for web environments, printed design and other types of creations. This font includes uppercase, lowercase, special characters and numbers. This is a free font.

      • Sorts Mill Goudy Professional Font

        Sorts Mill Goudy is a typeface with a professional look and it can be used in any sort of web or printed design. It is a revamp of the Frederic Goudy's 'Goudy Oldstyle' with Regular and Italic styles. This font includes uppercase, lowercase, special characters and numbers.

      • Nobile: Free Professional Typeface

        Nobile is a professional typeface made for web and printed creations. It is a nice sharp font, made in six variations (regular, bold, medium, italic, bold italic and medium italic). This font includes uppercase and lowercase characters, as well as numbers and lots of special characters, and it is totally free.

      • Nexa Slab Elegant Font

        A considerably versatile font, coming in three basic forms: Obliques, uprights and italics, each with eight different weights for you to choose. Based on other famous fonts, this design integrates well-thought, balanced bars that provide the letters with a geometric look.

      • HERO: Classy Rounded Typeface

        A fantastic font can be used for headlining purposes such as logos, posters, t-shirts and so on. Its 162 characters support dozens of languages around the globe. The design has rounded edges for a very attractive look. Courtesy of Font Fabric.

      • Prime: Detailed Sans Serif Font

        A basic font face intends to provide easy readability, but with enough detail to stand out in various sizes. These details come in the form of subtle curves in characters like the M or the W. Useful for body text as well as headlines.

      • Nexa: Multiple Weight Sans-serif Typeface

        Nexa is a large family of sans-serif types with eight different weights in both roman and italic styles, which are, unfortunately, commercial fonts. However, the designer released two of them: light and bold, as free fonts for use on desktop and web.

      • Zag: Ornamental Sans Serif Font

        Zag is a supremely elegant ornamental font that you can use for logos, portfolios, t-shirts and other big designs. Two of its weights are available for free: Regular and Bold, which you can use all over the Web.

      • Titillium Web: Open Font Family

        A font family coming from Italy, with dozens of students working on it every year. You can get the font and create your own variations at will, sticking with the Open Font License. It includes multiple special characters and numbers.

      • Source Sans Pro Modern Font

        Source Sans Pro was Adobe’s first open source typeface family, created and designed by Paul D. Hunt. It is a sans-serif typeface intended to work well on user interfaces. It supports the Latin, Latin extended and Vietnamese character sets and is licensed under the SIL Open Font License 1.1.

      • Roboto Condensed: Professional Sans-serif Fon...

        The condensed version of Android's font features a mostly geometric, rounded design that's very simple to read. A few grotesque touches distort the letters to achieve a rigid rhythm proper of humanistic and serif types.

      • Roboto: Sleek Symmetric Typeface

        A font that contains interesting elements in its shape since it is mostly symmetric but features attractive and open curves at the same time. It makes for a more natural reading rhythm, allowing letters to settle into their natural width.

      • Raleway: Slightly Curved Font

        Initially conceived as a single thin weight design, it has now evolved into a family with nine different variants. It features multiple details that make this a rich typeface. Created by Matt McInerney, Pablo Impallari, Rodrigo Fuenzalida and Igino Marini.

      • Quicksand: Thin Professional Typeface

        A beautiful typeface with thin, delicate lines and rounded edges. It serves better with bigger sizes, such as those of titles, posters and headlines.

      • Questrial: Geometrical Sans Serif Font

        A quite comfortable font to read thanks to its geometric approach. Its tabular numbers give a neat final touch to the typeface, while full circles decorate the actual letters on the project. Heavily influenced by Swiss design, similar to Helvetica.

      • Poiret One: Art Deco-style Font

        An audacious font face with details of Art Deco and constructivism with a geometric grotesque look. Its design is based on attractive curves and sharp lines, loaded with pure elegance. It serves well with big projects such as logos and t-shirts or to headline texts in websites.

      • Play: Classic Geometrical Typeface

        A font created entirely with parts of geometric shapes, very similar to the one used for the famous Sony Play Station's logo. It masterfully mixes a corporative and friendly appearance, while providing a comfortable reading rhythm.

      • PT Sans Caption Multilanguage Typeface

        An open source font coming from the project "Public Types of Russian Federation" that created fonts that the Russian people could use to consume content in their native language, therefore, it supports multiple alphabets and special characters.

      • PT Sans: Elegant Sans Serif Web Font

        Yet another font deriving from the project “Public Types of Russian Federation” developed for the Russian people. For this reason, it supports the Western, Central European and Cyrillic code pages, which is advantageous if you want to write with special alphabets.

      • Open Sans Condensed Font

        A humanistic sans-serif font that supports the complete 897 character set, which includes Latin, Greek and Cyrillic character sets. This allows you to use the font in multiple languages, letting you write content for a vast amount of people around the globe.

      • Open Sans: Print, Web & Mobile Optimized...

        A fantastic typeface that features improved legibility thanks to its optimization for print, web and mobile interfaces. It supports the entire 897 character set that includes Latin, Greek and Cyrillic characters, useful for writing content for international audiences.

      • Oxygen: Open Source Professional Font

        A beautiful typeface intended to be used freely across the internet in desktops and mobile devices, basing itself on an open source license. It makes part of the KDE project, attached to the Linux operative system.

      • Oswald: Classic Style Web Font

        Oswald recreates a more classic style found in older fonts, but handling itself in a modern way through its open source licensing, which allows it to be used over all kinds of devices across the web. In comes in light, bold and regular weights and supports latin characters.

      • Numans: Modern Sans-Serif Font

        Similar to the Days One font, this sans-serif design features a modern "grotesque" style with open forms. It is useful for titles and big sized text as well as body writing.

      • Noto: Basic Multilanguage Web Font

        Noto's principal purpose is to support all languages on the planet and provide even styling across each one of them. Given its universal aim, the font itself is quite basic and familiar, making it easy to read and understand.

      • Nixie One: Thin Typewriter Font

        A font that is one of those mixes that are bound to end up awfully, but all of a sudden resulted in a great idea. Nixie One combines neon tubes and a typewriter for a delicate and thin design. This font includes a complete latin character set, free to be used in any kind or online or printed projects.

      • News Cycle: Professional Headlining Typeface

        A realistic typeface works better in big blocks of text, although it can also be useful for headlines on top of the pages. Its style is based on the 1908-era News Gothic. It supports various languages and comes with the SIL Open Font License.

      • Muli: Open Source Multi-device Font

        An open source font designed to be used for free across the web on both desktop and mobile devices, providing a sober way to display headers for the most part, although it can also work for body text. 

      • Montserrat: Free & Open Source Font

        A beautiful font named after a neighborhood in Buenos Aires, in which the posters display a similar style. The idea behind this project is to recover that style and release it under a free, open source license. It features good legibility in small sizes, and it has two weights. This font can be used freely.

      • Monda: Readable Multi-device Font

        A simple and familiar font created for easy readability across multiple devices, which is very important given its Open Source approach. It was created by Vernon Adams and uploaded to Google Fonts for everyone to use.

      • Molengo: Professional Sans-serif Web Font

        A font created with FontForge directed at document writing and carrying a Latin character set, which allows you to redact content in multiple languages and reach more people without false characters.

      • Merriweather: Low-contrast Sans-serif Typefac...

        A low contrast sans-serif typeface intended to be used in smaller sizes, providing a neat reading experience to the readers. The basic look is quite traditional, but it provides a few modern details. It comes in eight different weights, which makes for a versatile usage.

      • Maven Pro: Legible Modern Sans-serif Font

        A uniquely styled typeface featuring sharp curves and flowing rhythm, making it easy to distinguish and very legible when in context. Its modern design has touches of multiple great fonts and works well with any platform.

      • Lato: Crafted Professional Font

        A font created by Łukasz Dziedzic as a project for a big company that needed their own typeface styling, but they ended up going with another option, so Lato (that means "summer" in Polish) became available for open source release. Described by the designer as “Male and female, serious but friendly. With the feeling of the Summer.”

      • Kreon: Professional Serif Font

        A useful serif font design for newspapers, magazines and new sites. It provides a friendly, low-contrast feel that will make your readers feel comfortable when going through your articles. This font has three variations.

      • Karla: Grotesque Sans-serif Typeface

        A grotesque sans-serif typeface family features multiple languages, thanks to the inclusion of the Latin script and the Tamil script. Karla also features two weights: Regular and bold. Handed with an SIL Open Font License 1.1.

      • Josefin Slab: Elegant Geometric Serif Font

        Geometric and elegant slab serif typeface with a distinguishing x-height measuring half of the cap height, in both roman and italic, offering five weights. It contains the most familiar glyphs from the Latin script, including numbers and special characters. It is available under the SIL Open Font License 1.1.

      • Josefin Sans: Elegant Sans-serif Typeface

        A geometric and elegant sans-serif typeface with a distinguishing x-height measuring half of the cap height, in both roman and italic, offering five weights; it contains the most familiar glyphs from the Latin script, including numbers and special characters. A serif brother is also available.

      • Istok: Sans Serif Web Font

        An original typeface in development since 2008, created with the freely distributable font editor, FontForge. It includes manual and automatic hinting in order to display optimally on LCD displays. This font has four variations.

      • Inder: Art Noveau Style Typeface

        Inder is an interesting typeface coming from Europe, based on the German Art Noveau and the Amsterdam School of Architecture styles. It has been adjusted to the restrictions of the screen and features a wide array of sizes, showing great flexibility.

      • Imprima: Sans Serif Printing Typeface

        A beautiful typeface intended to be used for -yes, you guessed it- printing. The idea is to provide optimal quality and legibility even with cheap equipment. Each element has been crafted manually, including strong joints between stems, inktraps and broad counters.

      • Hammersmith One: Low Contrast Typeface

        A font based on the somewhat innocent and handcrafted designs that characterized the Johnston UK lettering tradition. It works well in both big and small sizes alike. It only has one weight, which is kind of bold, but still can be used in headlines and chunks of texts as well.

      • Enriqueta: Roman-Egyptian Hibrid Typeface

        Enriqueta is a serif typeface designed as a hybrid between the technicality and softness of a Roman and the strength of an Egyptian, containing the extended Latin character set of glyphs in regular and bold weights. Released under the SIL Open Font License 1.1.

      • Droid: Neutral Serif Typeface

        A humanistic serif typeface, designed by the Type Director of Ascender Corp., Steve Matteson. It features an upright stress, open forms and a neutral, but friendly, appearance. It counts with optimization for mobile devices in order to provide comfortable reading.

      • Dosis: Rounded Sans-serif Type Family

        A sans-serif type family that features a rounded design, mostly useful for bigger text. It features an extra light weight that only works at size 36pt or bigger, plus the Extended Latin character set that integrates a wide array of special characters. It was designed by Edgar Tolentino and Pablo Impallari.

      • Crete Round: Soft Slab Serif Font

        Crete Round is a warm slab serif providing a hint of softness to texts, both in the roman and the italic version. The tall x-height, low contrast and sturdy slabs prove to be quite efficient for web use. It has been released under the SIL Open Font License 1.1.

      • Comfortaa: Rounded Geometric Sans-Serif Type

        Mostly aimed at large text, Comfortaa provides a rounded, geometric sans-serif design that makes for attractive headlines and headers. This font is completely free for using across the Web or over multiple devices.

      • Chivo: Versatile Headline Typeface

        A versatile typeface family with tools for headlines (Chivo Black) and also continuous reading settings (thanks to its regular weight). Chivo (meaning "goat" in Spanish) features an Omnibus-type sans-serif look.

      • Cabin: Modern-looking Open Font

        Cabin is inspired by the designs of Edward Johnston and Eric Gill and comes with four different weights, including real italics. It features a modern look, with uppercase and lower case plus numbers, punctuation marks and special characters. Licensed with SIL Open Font 1.1.

      • Bitter: Contemporary Slab Serif Typeface

        Bitter is a simple contemporary slab serif typeface for the web that intends to provide a well-paced font for easy reading across digital devices, It was designed by Sol Matas and it can be used freely.

      • Arvo: Geometric Typeface Family

        A geometric typeface family, useful for both printed and digital publications. It comes in four variations: Roman, Italic, Bold and Bold Italic and includes a bit of contrast to its design. The name can be interpreted in both Finnish and Estonian.

      • Archivo Narrow: Grotesque Headings Sans-serif...

        Best suited for headlines and highlights, this grotesque sans-serif font from Omnibus-Type provides a good style for both digital and printed formats. It integrates Narrow and Black styles and was derived from the Chivo font.

      • Archivo Black: Grotesque Sans Serif Typeface ...

        Archivo is a grotesque sans serif typeface family, originally designed for highlights and headlines, containing the uppercase and lowercase of the extended Latin glyph set including numbers, special characters, punctuation marks, and accented glyphs. It's available under the SIL Open Font License.

      • Antic: Natural-looking Sans-serif Font

        Antic is the first result of a project that studies calligraphic forms for running text, Clark is the name of its serif counterpart. This font explores the possibilities of a simple, sans-serif style, including eight degrees of stress, for a quite natural look.

      • Anonymous Pro: Fixed-Width Font Family

        A typeface family that features four fixed-width fonts conceived with a particular focus for coding. Thanks to its international Unicode support, it can create text for most Western and European Latin-based languages. It comes in four different weights to adjust to different situations.

      • Alegreya: Elegant Sans-serif Font

        A humanist sans-serif font that provides a fantastic pace for readers, thanks to a comfortable calligraphic feeling. Its diverse atmosphere mixes all elements harmoniously while italics highlight roman styles, as well as the other six weights. Also, it features a wide variety of languages.

      • Advent Pro: Web & Print Elegant Typeface

        Designed for both web and print usage, Advent Pro takes the classic touches of a sans-serif font and combines them with modern styling, providing an edge to the typeface. It supports multiple languages including Geek, Turkish, English and German.

      • Abel: Newspaper, Headlines & Posters Fo...

        Abel was initially conceived as a font for newspaper headlines and posters, but it is also useful for Web writing. It contains sufficient flair to be attractive in bigger sizes and a comfortable design to read in smaller and longer texts.

      • ABeeZee: Clean Sans-serif Font

        An important resource for kids, ABeeZee helps children understand writing thanks to its definite shapes, while  the italics style reminds students of the changing nature of writing and encourages them to develop their own handwriting.

      • Collapse Expand List View all items Download Bundle
    • App Templates (24 submissions)

      Enjoy an easier mobile developing process with any of these app templates, created in Photoshop and provided for free in PSD format.

      • Multicolor PSD Photos App

        A nice PSD experimental file that includes an iOS app template. It has a colorful minimal style, including screens for different stages of the app like albums, camera, edit, login, people, profile and search. It layers are organized and it is totally editable. This nice creation was made by Virgil Pana.

      • App Landing Page PSD Template

        A freebie made by sumit chakraborty consisting of a landing page PSD template. It includes lots of elements like a big featured image header (that also includes a little description and action buttons), features area, app extended info, team and subscribe form. It is totally free for any purpose.

      • Zebra: PSD App User Interface

        Zebra is a cool user interface design for a mobile app made in PSD format. It has a great deal of crafted design elements ready to be implemented in your next project. It includes the core screens already designed, it's easy to extend elements to new screens, totally organized and Photoshop ready.

      • App Profile Page PSD Concept

        A PSD freebie containing a concept for a mobile app including a small grid layout on which to display media content, as well as a neat profile section where users can see info about the user and click on some icons to message and follow the person in question. Designed and provided for free by Alexander.

      • Dribbblr PSD Template

        A freebie from Alex Botic that comes in the shape of a PSD file including a pretty complete iPad template of an imaginary Dribbble application. It will offer you multiple GUI elements and icons that can surely be useful for your next project. The color palette is sober with bright orange details.

      • Dark Social Mac App UI

        ​A cool concept for a Mac application named iNotified by the user. The idea is to provide a single tool that provides updates for multiple social networks instead of having five or six independent apps for each website. It features attractive glow effects that contrast well with the dark interface.

      • Flat Weather App 

        ​A very attractive design for a weather app, showing all the wonders of flat styling. The idea is to show different boxes, each with their own colors and icons representing the current state of the clouds. The PSD is fully composed of vectors.

      • Football Search iPhone App

        An interesting concept for an application that allows users to look up footballers, teams and stadiums (each with their very own tab on the bottom bar), along with pictures of each one of these categories. Users can also favorite particular items and read lists with information. Grab the PSD file to make any modifications.

      • Fitness Leaderboard App PSD Template

        A fitness dark user interface app with leaderboard screen in an editable PSD, perfect for an app in which users can keep track of their goals and achievements. Even though it has a dark style, it is nicely complemented with bright color bars and user pics. This is a free template created by Dribbble user Tobs.

      • Saleapps iOS UI

        An old piece of work kindly shared by Jose Cruz from Dribbble. It features a neat concept for an iOS application, mainly intended for sales. However, thanks to the addition of the PSD you can change the elements and make them fit your particular needs.

      • Weather App Screen PSD Template

        A beautiful concept for a mobile weather app in PSD that displays news after selecting the desired city. Its appearance is very simple, but just as effective, splitting itself in half in order to show both current and future weather updates. The styling is flat, with bright green details highlighting the app.

      • Mobile Cooking App PSD Wireframe Template

        The Geckotree team bring us this neat PSD file with a mockup for a cooking app, including icons from Symbolset's Pika set. The design also includes high-resolution images for use on high-density screens.

      • Mobile Email Application PSD Template

        A flat-styled widget created by Regy Perlera, based on the designs of another Dribbble contributor, Julia Khusainova. The idea is to use this creation as an e-mail application, taking advantage of a sharp color palette and simplistic layout. Also worth noting, a space next to every message allows the showcasing of images.

      • Account Profile UI: Billing Modal

        A lovely user interface concept that provides a particular function for you and your visitors: Billing. The window comes divided into tabs, each with their own icons that signify different actions, allowing users to view projects and perform payments for a given service. Hypr Inc. has released this resource.

      • Travel App UI Elements 

        A cool group of elements that make part of a bigger travel application, perfect for implementation within a mobile project. The navigation bar on the design's lower part includes icons for sharing, calendar and GPS while the upper section features the obviously necessary map widget and navigation buttons.

      • Simple Task Manager

        This is the first part of a project, coming in PSD format that intends to provide a task managing application. The following part consists of translating that PSD file into HTML, CSS, JavaScript and PHP, by using the Laravel framework. Created by Dribbble user Simon Jensen.

      • Clean Email App

        An amazing concept for an email application developed by Dribbble's Daryl Ginn. It has a left bar where users can navigate through different mail sections such as spam, inbox and sent while the top bar allows access to the user's profile and individual mail settings. There's even a slider to change font size, making this a pretty interesting design.

      • Web App Header PSD UI Kit

        A fantastic flat UI kit made in PSD, featuring strong colors that give an alternative look to the sometimes all-too-similar flat interfaces we see around today. He still manages to keep all elements well organized and recognizable for the user.

      • Layer Style Window Remix

        A complex UI kit that manages to keep things easy to understand for both users and designers. Among the many attractive elements found in this set, we highlight the transparent window that mixes well with the background, "shining" checkboxes and clever, organized build method. PSD by Jon Vlasach.

      • Dark UI Time-Lapse

        A dark UI design created by Jeff Broderick, showing a simple design handled correctly, resulting in a classy outcome. Based on Mac OS X's interface, the window shows a set of selectable elements to the left hand side, letting you highlight them in blue when hovering. A time-lapse video shows the whole creation process in detail.

      • Minimal Mail App

        ​This freebie comes in the form of a mail application along with its respective PSD file so you can make modifications. The styling is quite clean and colorful, leaving space for small avatars and offering a full control menu on the top section. Created by Aaron Sananes.

      • Compact iPhone User Interface

        This mobile UI kit manages to provide multiple elements within a compressed space. It features a good number of icon buttons, including camera, GPS, settings and more. Additionally, the middle sections displays a map, while a transparent tooltip provides extra information.

      • Media Player App

        A PSD file containing a concept for a clean and simple media player application, ideal for mobile touchscreen devices. The album's art takes over the top of the screen while the name and album are displayed below. The lower part features a thin progress bar and the usual playback buttons. Volume and shuffle are small and placed in the bottom corners.

      • Custom iPhone App UI

        Give your mobile app a distinctive feel with this custom app UI. The UI features a stylish navigation bar which you can place anywhere on the screen. The project is distributed in the form of a free PSD that you can modify and use at will. Created by Ed Cousins.

      • Collapse Expand List View all items Download Bundle
    • CSS Menus (90 submissions)

      A complete catalog of partial or totally CSS-based menu experiments with radically diverse styles and functions.

      • Pushy: Off-Canvas Navigation Menu

        Pushy is a simple off-canvas menu created using CSS transforms and transitions. It has a smooth performance when used on mobile devices, includes fallback animations for IE 7 to 9, if a link is selected the menu closes automatically, it is responsive and has collapsible submenus. It was made by Christopher Yee.

      • Minimalistic Flat CSS Navigation

        A flat navigation made in CSS and JavaScript showing some tabs and a drop-down menu. It can be used in any website, matching its style. It was created by Andy Tran.

      • Mobile App CSS Sliding Menu

        An actionable menu for mobile apps that appears when hovered over made with CSS. The menu that appears has a beautiful background which can be dynamic according to the images the user uploads, and the menu slides from left to right smoothly. It was created by Virgil Pana.

      • Material Design CSS App Menu

        A compelling menu for mobile apps made in CSS and JavaScript. It shows a simple feed interface with a menu button. Once clicked, the menu appears as a white circle covering the whole screen, displaying the menu. This snippet is nice, although it can be a little smoother in its movements; it was created by Virgil Pana.

      • Slideout.js: JavaScript Touch Slideout Naviga...

        A sliding touch navigation menu for mobile apps or even web projects. It is a dependency-free, simple markup, native scrolling, easy customization, CSS transforms & transitions, and it weighs just 4 Kb. This menu was created by Mango.

      • Colorful CSS Explosive Menu

        A menu made in CSS inspired by the Material Design trend. It is a colorful creation, containing icons within boxes that come to life when the user activates the menu. It also make some particles flow around the canvas, and then gathering them back when the user closes the menu. This snippet was created by Harris Carney.

      • CSS & JS Radial Pop-Out Navigation

        A compelling menu for apps and websites made in CSS and JavaScript. It consists of simple circles with icons inside for the action you need. You can adapt it on your designs easily and use it freely. It was created by Dudley Storey.

      • CSS3 Circular Weather Menu

        A simple circular menu made in pure CSS3 for a weather app or related. It is a colorful snippet, that activates on click and shows different icons indicating weather conditions. It can be modified and it was created by Moreno Di Domenico.

      • Material Design CSS Off-canvas Menu Transitio...

        A beautiful transition made in CSS for an off-canvas menu implementing the guidelines of Material Design. It shows a little plus sign comprised within a circle and when you click it, it displays the full box with text, images or whatever you want to show. This snippet was created by Jeff McCarthy.

      • Material Design CSS Gooey Menu

        A cool material design Menu made with CSS. It appears progressively resembling goo. The element is still in version 1 so it is not quite good and the animations look a bit forced. However, you can smooth it yourself. It was created by Lucas Bebber.

      • CSS & SVG Material Design Gooey Menu

        A gooey menu created in CSS and SVG following the Material Design guidelines. It is one of four styles of gooey menus which have similar animations. However, this circular effect makes this a bit more relevant since it can be used not only on websites but in mobile apps as well.

      • CSS & JavaScript 3D Rotating Navigation

        A CSS and JavaScript navigation that looks like a 3D effect when it appears. It was created using CSS and JS, complemented with beautiful typography and outlined icons for major impact. It uses CSS transforms and transitions to make it smooth and neat. It can be used freely.

      • Stretchable CSS Interaction Menu

        A simple interaction menu for apps that can be stretched to reveal the menu elements. It has been created with CSS and JavaScript. It reveals the menu items organized in a list, created especially for mobile devices, although it can be adapted to desktop versions of websites. It is free and it was created by Codepen user Fabrizio Bianchi.

      • Hover Display Menu

        A beautiful code snippet created by CSSDeck user Vadzim, and it consists of a simple dark menu made with pure CSS. It is actionable on hover and includes icons for easy recognition. In its inactive state, it only shows the icons, but when you hover, it expands right away, displaying texts for: - Overview - Location - Live View - Traffic - Demography This is a useful menu if you don't have much space, for instance in mobile apps and such. Each tab on the menu also has a plus sign that converts into an "x" for closing. It is free to download.

      • Pure CSS Off-canvas Menu

        Here's a notable code snippet for an off-canvas menu with flexbox created with pure CSS. It uses flexbox to control the layout and to resize the content area when the menu gets visible. Instead of overflowing the viewport and getting cut off on the right side. This snippet doesn't use JavaScript at all but uses The Checkbox Hack, appeared in CSS Tricks instead. This pen was created by Zoe Gillenwater and uploaded to Codepen.

      • CSS Off-Canvas Menu Effects

        Here we have a compelling tutorial for creating effects for off-canvas menus. It uses different layouts and transitions, making the overall page look awesome and coordinated, making space for actionable items in the menu and controls. These effects were made using CSS transitions, CSS animations made with bounce.js, and animated SVGs using Snap.svg. Additionally, the font icons used were from Font Awesome and the random users from Random User Generator. The menu effects are: - Top side - Side slide - Corner box - Nested corner box - Top expand - Corner morph - elastic - Bubble - Wave This tutorial + code snippet was created by Mary Lou from Codrops.

      • CSS Rollover Menu States & Effects

        This is a set of rollover states entirely created in CSS. They are composed of triangular menus that activate different effects when hovered over. It includes logo reveal, grow regular and opposite, rotate right and left, and grow rotate. This code snippet was created by Andy Fought, who uploaded to Codepen.

      • Flat CSS Menu Toggle Button

        Inspired by Loredonut’s Pen from Codepen (a simple unicolor menu), this is a beautiful menu with CSS animations, for the button to activate and close, as well as the actual items in the list. Elements have rounded corners, unlike the original, and the effects were made based on Todd Motto functions. Geoffrey Crofte made this development and uploaded it to Codepen.

      • CSS3 Funny Menu

        ​Here we have an excellent code experiment we can include into our websites to make them more beautiful and striking. It can be used as the main menu of a website, with the main idea to drive users' attention to it.

      • CSS3 Responsive Navigation Menu

        This is a responsive menu that includes dropdowns on the design, created with pure CSS3. The elements on the menu are intended to resemble those on the periodic table. This menu was made and also uploaded to CodePen by the user Jeremy Cloutier.

      • Sliding Menu Tiles

        Here we have a centered group of colorful icons with smooth slide animations. It features mouseover effects for big screens and focus effects for smaller devices. As a fun little detail, an extra menu can be seen after entering the famous Konami code.

      • Black Neon Navigation Menu

        A very appealing CSS menu uploaded to CodePen by the talented Sara Soueidan. Showcasing a sober, elegant look, this menu highlights hovered options with a fancy neon-like effect that lights up the icons. When pressing on the buttons, they display a delightful shadow effect, too.

      • CSS Panel Menu: Slide Menu

        Jeremy T has developed this good-looking slide out menu based on the jPanelMenu plugin. The idea behind this is pretty simple: We place a button on the upper corner of the screen that when clicked, triggers an animation that slides out a menu. The rest of the page moves and adjusts its content to fit in the screen.

      • Centered Dropdown Menu with CSS

        CodePen user Maux Webmaster has created this clean dropdown menu with HTML and CSS (LESS). It features some nice shadow effects in both the edges of the menu and the selections. To navigate, simply hover over the elements with arrows next to them and you'll be rolling.

      • CSS Swinging Panel Menu

        An attractive menu developed with pure CSS. It features an impressive effect that makes panels "swing" in order to show the submenus when hovering, this is achieved by taking advantage of CSS keyframe animations. Uploaded to CodePen by Seth Abbott.

      • Responsive Black and Red Navigation Menu

        This responsive menu adapts to different screen sizes by displaying its content in two ways: On big screens, it shows the icons along with the description of every element. On smaller displays, it only shows the main icons and reveals the descriptions on hover. Created by Sara Soueidan and uploaded to CodePen.

      • Slide Border Navigation Menu

        Here we have a navigation menu created by CodePen's Marcello Africano. Styled with bright colors, it highlights elements on hover with a bar at the bottom of the selection, making use of a super smooth animation. Everything you see in the demo is coded with CSS.

      • Unwrap Menu in CSS

        This interesting menu features a contracted piece of "paper" that expands on hover by using a neat transition. After this, it displays a set of icons that can be used by the reader. Created by Nate Cohen based on a Dribbble shot by Adis Hasanic.

      • Skeuomorph Navigation Menu

        A pretty wood metallic menu created by Daniel Kemeny in CodePen, this menu provides a nice element that can be applied on nature-themed websites, for example. Moreover, it features a nice effect on click that lights up the button and turns it on in a very convincing fashion.

      • Two-Level Dropdown Navigation Menu

        Here we have a good-looking, flat dropdown menu created with HTML and CSS. It is responsive, meaning it will react and adjust its size on any type of screen and device. Its main advantage is represented by some great performance given its lack of animations and simple design.

      • Profile Bar with Icons and Notifications

        Johnius from CodePen has developed this gorgeous bar for profile management called "I'm on the flat diet" based on an original design by Robert Van Klinken. It matches pretty well with other websites given its simple and laid-back design. Also, the markup was made by Johnny Concent.

      • CSS Animated 3D Menu

        This is a fantastic 3D vertical menu with a sleek animation. It is formed by a set of boxes that spin to the right on hover, this spin is not made without the wonderful 3D animation that makes it stand out, with the edges of the box clearly coming out of the design. Created by Joshua Hibbert from CSS Deck.  

      • Little 3D Perspective Menu

        This little menu features a transformation effect that changes its perspective in order to make it look as if it was lying on the floor, along with its icons and designs. The bad part about this item is the fact that it only works with Webkit browsers, so make sure you keep that in mind before implementation.

      • Dark Red Menu Navigation

        Inspired by a similar project, CSS Deck skidoo has created this dropdown navigation menu that features:- Two levels of navigation- Hover effects- Design with black and red sections

      • Rolling Navigation Menu with CSS

        This navigation menu is a remake of the one created by Sohtanaka, but with the difference that the original was made with jQuery, whereas this one is created with pure CSS, although the concept remains exactly the same. It features a nice animation when hovering over its options. Designed by CSS Deck user Taufik Nurrohman.

      • Animated Leading Slats

        This project takes advantage of a few CSS3 properties to make animated “slats” that roll down to appear, creating a really nice effect. The slats receive a 3D transform effect in order to look the way they do while animation and keyframe properties are also applied. Remember this tool only works in Chrome, Firefox and Safari.

      • Sliding Navigation

        A concept that enables multi-level navigation through a sliding animation. This allows the exploration of unlimited amounts of options within the same space, at the expense of some speed, since a click is needed each time the user wants to go back a screen.

      • CSS3 Menu with Stretchy Search Box

        Treebeard from CSS Deck has created this project in order to replicate the search bar seen on apple.com that stretches and changes the width of the menu it is included in. It is created with only CSS and degrades gracefully in older browsers, except animations are not supported.

      • Social Profile Menu

        Kirill Zakharov provides a quick coded version of his own Dribbble shot. This stylish and clean menu provides some subtle, yet very satisfying shadow effects on hover along with some self-explanatory icons that reveal the menu's presence as a more social-oriented tool.

      • Flip Menu Perspective

        This is a sleek menu by CSS Deck user José Barcelon-Godfrey. He provides a nicely designed menu with smooth hover animations that show a description of the option we are highlighting along with a pretty background picture. Webkit browsers are recommended in order to get the most out of this tool.

      • Cool Animated Vertical Navigation Menu

        A rather simple vertical menu inspired in Facebook’s mobile app. When hovering over an element on the list, a subtle animation moves the element to the right. This can be accomplished with the help of CSS3 and its transition property, which, unfortunately, is not yet supported on IE and Opera.

      • TableView: Responsive Menu

        This is a responsive menu intended for displaying options in a clean and non-distractive manner. We can also include toggle options and a cool set of icons better suited for customization settings, but, as you know, you can always make a few tweaks to match your needs and style. 

      • Slide Out Mobile Menu Experiment

        Here we have a code snippet based on other pieces of work, it creates a nice menu with smooth transitions. It starts as a regular page with a button on the side; when clicking on this button, a lateral menu comes up, moving the entire page. It is a responsive design, so it can be used in handheld devices, as well.

      • Pure CSS3 Vertical Menu with Nice Hover Effec...

        This cool experiment generates a menu with a neat flat design and interesting animation effects. When hovered over, the items will perform a smooth transition as the corresponding icon spins around itself. Created by user Jitendra from CodePen using HTML and CSS.

      • Big Click: Experimental Buttons

        A neat set of experimental buttons that expand when clicked, displaying a transparency effect. If the cursor is placed on top of the buttons, they will change slightly to signify they are being hovered on. Created by CodePen's Bennett Feely using CSS only.

      • Off-Canvas Mobile Slide-Out Menu

        By using the :checked pseudo-element, we can design a mobile menu that slides out when clicking on the button placed on the top corner. This interaction triggers an animation that will move the page to the side and introduce a set of options that will fade in one by one in a stylish manner.

      • Radial Menu Experiment

        A cool experiment that uses only CSS with their option for radial menus. Based on an older pen, this is a recreation of that original project. The menu starts at the top corner and, making use of a transition, displays a set of selections on hover. Uploaded by user Anonasaurus Rex.

      • Mobile Slide-In Menu

        A nicely styled menu that displays options after a well-worked slide animation that moves the whole page to the side. It is mostly intended to be used with mobiles, however, it produces a pleasant result in desktops. It is built with CSS (SASS) and a bit of jQuery. 

      • Simple and Clean CSS Menu

        This is a simple and clean menu that applies a clever dynamic in the way it displays options to the user. First, they need to click on the desired selection and then, the rest will be displayed by just hovering over them. Created by John W. Long from CodePen.

      • Almost Like Circle Path Menu CSS3

        Here we have a beautifully styled CSS3 menu with animated circles. The idea is to have a big element floating around that releases smaller ones when we hover over it. While the process happens, the elements spin and move in an attractive manner thanks to the nicely applied transitions.

      • Stunning Circular Motion Effect with jQuery 

        This tutorial is brought to us by Mary Lou from Codrops. It shows how to create a menu formed by floating circles. One main element will display options that, when hovered, will have a smaller circle complementing the information. It is created using the jQuery.path plugin for the animations.

      • Responsive Minimalistic Menu

        CodePen user usf has created this simple and stylish menu with useful icons for profile and message managing. It is responsive, contracting and expanding the icon descriptions accordingly.

      • Sidepanel Menu UI

        Dillon Sylvestre from CodePen created these clean and simple menus intended to offer a flexible experience for the user. It is possible to have folding dropdown menus, disabled and/or toggle options, include icons and more. The markup can be a bit messed up, but it is needed for the menu's functionality.

      • Creative CSS3 Animation Menus

        Here we have a truly impressive set of animated menus created with CSS3. We dispose of 10 examples with gorgeous transitions using blurs, slides, turns, zooms and more, applied either alone or in combination. If you want to have a good looking site with awesome menus, you won't find many choices better than this.

      • Feedly Style CSS Animated Menu

        This menu is inspired in the Feedly app for iOS but includes some features and tweaks of its own. First, the options on the menu fade in one by one as the page loads, giving it a cool introduction. Second, the choices animate on hover, stretching a little bit to the right.

      • Ribbon DropDown Menu with CSS3 and jQuery

        Alin from Flash Users has written this article on how to create a good looking ribbon dropdown menu with CSS3 and jQuery. You should not have many problems implementing it your website since it is cross-browser compatible. The original PSD is also provided, just in case you'd like to modify the style.

      • Multi-Level Hierarchical Menu

        With jQSimpleMenu, you are able to add multi-level, jQuery drop down menus (these are useful for showing hierarchical information) to your website without writing any additional lines of code. The menus come fully animated for each time new options are displayed.

      • Flat Mailbox Menu

        A rebound of a Dribbble shot by Rovane Durso uploaded to CSS Deck by LukyVj. This menu features a minimalistic interface with a very pleasant color palette and a nice set of icons. Also, we get the possibility of displaying notifications, definitely a must for a mailbox interface.

      • Purely CSS Spin-Out UI Menu

        This is a very cool menu created by Billy Crist from CodePen. All you need to do is hovering on the main menu icon, this will trigger a beautiful and smooth animation that displays all options available around the circle. Perfect for showcasing short or basic info in a tight space.

      • Minimal CSS Menu

        Aleks from CodePen brings us this beautiful menu with a flat, colorful design. A great feature it offers is the possibility to resize and drag the interface with the help of jQuery, although you have to activate that yourself in the demo to see it in all its glory.

      • CSS Lavalamp-Like Fancy Menu Effect

        We found this awesome article from PEPSized that will guide us through the creation of sliding or "lavalamp" menus. We will go through three different examples with their own style and animations, Everything (including the transitions) is created with only CSS3.

      • Horizontal Drop-Down Menu

        This is a large dropdown menu inspired in the one found at Microsoft’s website. Useful for displaying vast amounts of options without draining all the space available. Also, it's possible to adjust the menu in order to use it with smaller screens and devices.

      • Tutorial: Vertical Scroll Menu with jQuery

        Based on the menu found on a website called Narrow Design, this tutorial takes the idea from the flash-based interface to create a version with jQuery and CSS. The menu has a very long list of elements on a medium sized box, which scrolls up and down as we hover on the respective section, all done with supremely smooth movements.

      • Fixed Fade Out Menu: A CSS and jQuery Tutoria...

        This tutorial aims to guide you in the creation of a fade out menu that will follow users as they scroll down the page, but fading out to the point where it is almost invisible. The menu will come back to its usual shape only when the reader hovers over it.

      • Responsive Retina-Ready Menu

        This amazing menu comes boosted with a number of very useful options that make it versatile and attractive. Is responsive design has three different layouts depending on the screen size, including a tablet-optimized version. Also, it is Retina-ready, this is achieved by using an icon font instead of images to avoid pixelation when zooming in.

      • Pale Navigation and Social Bar

        This pixel-perfect design can work as both a social navigation interface (including icons for seven different social networks including Twitter, Facebook and Pinterest), or a simple navigation bar for content in a website. As a final alternative, you can download the code and make any modifications needed to suit your needs.

      • Blue Navigation Menu in PSD and CSS

        This navigation menu stands out from the rest right from the beginning thanks to its gorgeous design with rounded buttons and subtle shadow effects. It displays hierarchical information in the form of main headers that, when clicked, display sub menus with a set of options. You can grab both code or PSD versions.

      • Vertical Navigation Menu

        This is a solid vertical menu conformed by a set of individual dropdowns that display submenus when clicked, one on top of the other. The possibility to include notifications has been added, as well. Based on an original design by Orman Clark and uploaded to CSS Flow. 

      • CSS Dark Navigation Buttons

        A beautiful set of navigation buttons created with pure CSS by David Higgins from CSSDeck. All designs are based on a dark style and feature effects like gradients, box shadows and borders. The buttons are arranged in different ways in order to demonstrate the multiple possibilities they offer.

      • Animenu: Responsive Dropdown Navigation

        This article will guide us through the process of creating a responsive menu by taking advantage of CSS with SASS and Compass, with JavaScript being excluded completely for this project. Since responsiveness is the focus for this menu, compatibility has been upped to IE8 and later.

      • Mailbox UI: Flat Mailbox Menu Design

        This is a beautiful mailbox menu design created by Marco Biedermann from CSSDeck. It showcases a flat, simple design with highlighted notifications and an expandable “more” button, although it isn’t active in this demo. Moreover, there is a neat set of icons accompanying the interface.

      • Vertical CSS3 Dropdown Menu

        Here we have a vertical menu design with only HTML and CSS3. It includes some new CSS properties that might only be supported with the latest browsers, so keep that in mind when implementing it. Also, it features an attractive set of animations and multi-level navigation.

      • Dark Navigation Menu Bar

        This neat navigation bar features a dark skin with colorful details on the bottom of each option. When clicking on the elements, they animate towards the background with a nice shadow that helps accentuate the effect. Designed with pure CSS by Thibaut.

      • Minimalistic Mini Dropdown Menu

        This beautiful mini-dropdown menu is intended to provide super quick access to a set of options or settings. The menu comes down by just hovering on the arrows, while the options are highlighted when the cursor is over them. Next to the small arrows, there’s a considerably larger settings button.

      • Light Horizontal Navigation 

        A light, yet strong navigation menu with cool hover and active effects and clean, white style that includes smooth shadows. Once we click on a button, it animates and stays pressed, just like the buttons in an old stereo player (do you young kids know what those were, anyway?).

      • Subway – Red Line: A Gorgeous Menu

        A gorgeous dropdown menu with loads of details that enhance its overall look to a high standard. It features a transparency for the background and the dropdown itself, a smooth animation to bring the lists when clicking on the main element and a cool highlight when hovering.

      • Awesome Menu Bar

        A simple animated menu bar based on a previous design created by Danny Knaack, carrying a sober black skin. It is missing some details, so for now, what you see is what you get, but you can always put those super skills of yours in practice and get any changes done, right?

      • Code Snippet for Creating a Simple Menu

        This code snippet example features a simple menu. When you hover over or click one of the buttons, it shows different submenus. It is meant to be used as a dropdown bar for a mobile or regular website. You can edit the HTML to add more elements, the CSS to modify its appearance and the JS for improving the functionality.

      • CSS Animated Navigation Dropdowns

        A smooth menu intended for main navigation. It features a set of big buttons aligned next to each other, with animations occurring on click. Additionally, some elements can contain sub-menus that appear with a nice fade effect. Created by Jack Rugile and uploaded to CodePen.

      • Great CSS3 Menus for SmartPhones

        Rishabh from CSSDeck teaches us how to design good-looking menus for smartphones or tablets. They can also be used as little sidebars or widgets in your desktop websites. CSS3's box shadow and linear gradient effects are the only ones used in this article, to very likeable results.

      • Simple YouTube Menu Effect

        This stylish menu is inspired on the one seen on YouTube's left side. When clicking on the initial element, a fast, sharp animation marks the opening of a dropdown that displays all the options available. This example features a beautiful design with bright colors and attractive icons, that you might want to keep.

      • Responsive Multi-Level Menu

        Mary Lou from CodePen brings thus tutorial on how to create a responsive, multi-level, animated menu that will allow us to display many options with an intelligent use of space, in any device. The great part about this menu is its ability to display the next level without growing larger, but just putting the current info on top of the previous one.

      • Responsive Multi-Level Navigation

        Creating multiple level navigation interfaces for responsive websites can be quite a pain if you don’t know what you’re doing. Micah Godbolt for CodePen intends to help with that issue through this smooth, adaptable menu that will adapt to different screens and provide quick access to several levels of selections.

      • Two Level Superfishy Menu

        A rather simple menu designed entirely with CSS3 based on the Superfish jQuery menu. Remember that this tool will only work in Webkit browsers and Firefox since keyframes have been used in the process, something for which IE and Opera are not ready.

      • Black UI Navigation Using CSS

        A simple, small, yet attractive interface, useful for displaying small bits of information with the addition of notifications. These notifications are styled in a bright, neon-like style that flows really well with the basic black background. It is done completely with CSS.

      • Menu Rebound

        A colorful design by Ryan Bishop, this menu provides a pleasant view of options. Each option highlights with a slightly darker tone on hover, however, the effect is not as responsive as we'd like, in any case, when working at the right speed this tool is more than capable.

      • Animated and Responsive Dropdown Menu

        A classy menu design that displays options in a straight bar, while sub-options appear on hover. This options contain even more possible selections, which makes it easy to display vast amounts of data in a simple interface that does not take much space.

      • Sidebar Navigation Concept

        This menu provides an elegant, smooth interface for your website. It is fully animated, displaying movement at every click or hover. The shadow effects found in every button accentuate the sober look it projects while staying dynamic, attractive and not boring at all.

      • Flat CSS Menu

        A simple menu made only with CSS. It features a very light design, including just what is needed inside. On hover, our selections are highlighted in light blue, which gives the menu some needed color, although, as you know, you can always grab the code and modify it at will.

      • Simple Elegant Dropdown Menu

        A simple and clean design for a dropdown menu that does not distract you too much, letting you focus on the important part: the content. Talking about focus, it applies :focus to allow the menu to be closed when clicking somewhere outside. Created by CodePen user Kasper Mikiewicz.

      • Collapse Expand List View all items Download Bundle
This a test message in global notification
Your download will start shortly.

Done!

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Browse
Done

Thank You!

Your post has been received, and will be reviewed by a curator

Open bundle builder

Bundle Builder

0 elements selected | Clear all ×

Select the bundle you want to add the items to.

Search bundle (filter by name)
Create new bundle
×

Add new bundle

×

Edit bundle