deals

premiumpacks & css breadcrumb (13 items)

Demos and Snippets of breadcrumbs for different uses made using CSS.

freebies

A code snippet that creates a CSS-only set of tags, although the result is pretty limited if you want to take it any further with transitions and s...

A code snippet that creates a CSS-only set of tags, although the result is pretty limited if you want to take it any further with transitions and stuff. It has a hover state in which the color changes and the tags get adapted to the size of the text in the label. The code is well organised and teaches us how to create both the triangles and the inner circles.

This simple breadcrumbs which made with CSS3 is a nice experiment to show the levels of your website and where you  are located as a user. It ...

This simple breadcrumbs which made with CSS3 is a nice experiment to show the levels of your website and where you  are located as a user. It has a minimal style, complemented with subtle gradients. There's only one thing that can be solved by tweaking the CSS a bit, that is the alignment of the arrows: they are out of position for 2 pixels, which might not seem a lot, but in these kinds of developments is very noticeable.

Here we have a greenish breadcrumb navigation put together in JSFiddle by Josef Friedrich. With a flat style, it is perfect to integrate into any w...

Here we have a greenish breadcrumb navigation put together in JSFiddle by Josef Friedrich. With a flat style, it is perfect to integrate into any website. This breadcrumb will let you know where in the website you are and the coolest thing about it is that you can see a color tone variation as you advance through the different levels of the website.

13,000+ Unique PowerPoint & Keynote Slides, 86 Best Selling Templates, Print Ready (A4 + Letter), Smart Objects, Vector Shapes, 160 Color Schemes, ...

13,000+ Unique PowerPoint & Keynote Slides, 86 Best Selling Templates, Print Ready (A4 + Letter), Smart Objects, Vector Shapes, 160 Color Schemes, Icon Fonts, 16:9 Aspect Ratio, Intros, Maps, Infographics, Tables, Calendars, Charts, and Much More! Get it for Only $19 (99% Off)

A cool light gray breadcrumb that has been created just by using CSS3. It is a beautiful code experiment that lets you know where you are on the we...

A cool light gray breadcrumb that has been created just by using CSS3. It is a beautiful code experiment that lets you know where you are on the website, and also, guides you through it with the help of a relevant blue color on every level when the breadcrumb is hovered over.

This is a breadcrumb navigation which resembles the one found at Apple's website. The background was created using the CSS3 vertical linear-gradien...

This is a breadcrumb navigation which resembles the one found at Apple's website. The background was created using the CSS3 vertical linear-gradient property. This can be implemented very easily by just making an unordered list with an id breadcrumb. The list items will contain the links and these links can be fetched from the database to make the menu dynamic and flexible.

This set includes three breadcrumbs from Twitter’s Bootstrap Framework. Extremely simple, plain and minimal, they were achieved with the use of CSS...

This set includes three breadcrumbs from Twitter’s Bootstrap Framework. Extremely simple, plain and minimal, they were achieved with the use of CSS3 features like gradients, border radius and box shadow to make it look modern and stylish. The Item is very much re-usable in various types of projects, from websites to admin panels, and other types of web apps.

2880+ Vector Ornamental Drop Cap Lettering Designs Including Celtic, Gothic, Illuminated Manuscript, Gravure, And Many More Styles! Foil Effects fo...

2880+ Vector Ornamental Drop Cap Lettering Designs Including Celtic, Gothic, Illuminated Manuscript, Gravure, And Many More Styles! Foil Effects for Illustrator & Photoshop, As Well As Paper Textures & Mockups Included, Get This Bundle For Just $14! (95% Off)

Here we have a dark and minimal breadcrumb navigation that degrades with each level. It has beautiful gradients applied to a dark shape, which gets...

Here we have a dark and minimal breadcrumb navigation that degrades with each level. It has beautiful gradients applied to a dark shape, which gets darker the more levels there are. The last level fully integrates with the background so it integrates the best way possible, and they were made with CSS. This set of breadcrumbs was created by Nico Hämäläinen.

The idea is that these breadcrumbs should still be recognisable as such and 100% usable without CSS. It has a d...

The idea is that these breadcrumbs should still be recognisable as such and 100% usable without CSS. It has a dark style with a minimal style, making use of a subtle gradient that makes it look a bit puffy. They are at the top of the page, resembling a menu bar. It was created by Imar Krige on Codepen using CSS.

A breadcrumb navigation allows users to know where they are in a hierarchical structure and navigate back to higher-level pages in the hierarchy. A...

A breadcrumb navigation allows users to know where they are in a hierarchical structure and navigate back to higher-level pages in the hierarchy. Also, the breadcrumbs can reduce the number of actions a user need to perform in order to navigate back. Here there are a few good looking breadcrumb styles which are given below as an example.

720+ Lightroom Presets + 690+ Photoshop Actions from 17 Collections, Compatible with Adobe CS4, CS5, CS6, and CC, Fully Adjustable Settings, Includ...

720+ Lightroom Presets + 690+ Photoshop Actions from 17 Collections, Compatible with Adobe CS4, CS5, CS6, and CC, Fully Adjustable Settings, Includes Extended License and Complete Documentation. Only $19 (95% Off)

This is a tutorial for creating simple, scalable and CSS-based breadcrumbs. It uses only one simple graphic. The rest is basic CSS styling with an ...

This is a tutorial for creating simple, scalable and CSS-based breadcrumbs. It uses only one simple graphic. The rest is basic CSS styling with an unordered list as HTML code. It explains the HTML, the CSS, how the breadcrumbs must behave and it shows a demo of the finished product. This tutorial was created by Veerle Pieters.

This is the coded example result of a tutorial that uses CSS Counters to number the breadcrumb links. The first breadcrumb displays the use of grad...

This is the coded example result of a tutorial that uses CSS Counters to number the breadcrumb links. The first breadcrumb displays the use of gradients for the links whereas the second demo uses flat colors along with transitioned hover effects for the navigation. This experiment is hosted at The Code Player.

This element was created by Ana Tudor on Codepen. With one element, you could do it using gradients and skewed pseudo-elements for a link. You coul...

This element was created by Ana Tudor on Codepen. With one element, you could do it using gradients and skewed pseudo-elements for a link. You could actually do it using just gradients, but then a hover action won't be triggered over the arrow shape itself, but when hovering over the rectangular element containing it.

A brand new bundle of 33 fonts in a wide variety of styles, weights & multilanguage support, normally priced $490 if purchased individually, Only $...

A brand new bundle of 33 fonts in a wide variety of styles, weights & multilanguage support, normally priced $490 if purchased individually, Only $19 for a limited-time

These are different styles of breadcrumbs using Twitter Bootstrap and CSS. They are flat, simple, and very intuitive, perfect for using in any web ...

These are different styles of breadcrumbs using Twitter Bootstrap and CSS. They are flat, simple, and very intuitive, perfect for using in any web project or mobile app design. The breadcrumbs were created by Wes Winham and uploaded to JSFiddle.