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.

Lifetime 3TB Secure Cloud Backup Storage For All Your PCs, iOS Or Android Devices, 100% Secure Zero Knowledge & Cross-Continent Storage Replication.

Lifetime 3TB Secure Cloud Backup Storage For All Your PCs, iOS Or Android Devices, 100% Secure Zero Knowledge & Cross-Continent Storage Replication.

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.

High-resolution video time-lapses, featuring city and natural landscapes from all over the world. 40+ assets for your next project, from video prod...

High-resolution video time-lapses, featuring city and natural landscapes from all over the world. 40+ assets for your next project, from video production to web design and presentations! Only $19!

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.

200 Vector T-Shirt & Merchandise Designs, Only $24: Commercial License, Ai, EPS & SVG Vectors Files, 14 Concept Categories Like Retro 8Bit Illustra...

200 Vector T-Shirt & Merchandise Designs, Only $24: Commercial License, Ai, EPS & SVG Vectors Files, 14 Concept Categories Like Retro 8Bit Illustrations, Characters, Cartoons & More

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.

31 Packs in 1 Huge Bundle: 200+ Low Poly 3D People Models, 3DS, OBJ, FBX, STL File Formats for VR, AR, Architectural Visualization, and Scale Graph...

31 Packs in 1 Huge Bundle: 200+ Low Poly 3D People Models, 3DS, OBJ, FBX, STL File Formats for VR, AR, Architectural Visualization, and Scale Graphics Projects! Only 29$ (82% Off)

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.