Snippets

Daniel Gurtner chevron-style multi-step checkout breadcrumbs

Updated by Daniel Gurtner
View revision

File style.css Modified

  • Ignore whitespace
  • Hide word diff 
 /* Multi-step checkout */
+* {
+  box-sizing: border-box;
+}
+#breadcrumb {
+  font-size: 12px;
+}
 #breadcrumb a.stepcrumb,
 #breadcrumb span.stepcrumb {
   background-color: #00f030;
Updated by Daniel Gurtner
View revision

File style.css Modified

  • Ignore whitespace
  • Hide word diff 
 .before-crumb,
 .after-crumb {
   width: 0;
-	height: 0;
-	border-top: 10px solid transparent;
-	border-bottom: 10px solid transparent;
+  height: 0;
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
   font-size: 0px;
   position: relative;
   top: -4px;
Created by Daniel Gurtner
View revision

File index.html Added

  • Ignore whitespace
  • Hide word diff 
+<div id="breadcrumb">
+  <a href="index.html" class="stepcrumb complete-step">Step 1<span class="after-crumb"></span></a>
+  <span class="stepcrumb current-step"><span class="before-crumb"></span>Step 2<span class="after-crumb"></span></span>
+  <span class="stepcrumb incomplete-step"><span class="before-crumb"></span>Step 3<span class="after-crumb"></span></span>
+  <span class="stepcrumb incomplete-step"><span class="before-crumb"></span>Step 4<span class="after-crumb"></span></span>
+</div>

File style.css Added

  • Ignore whitespace
  • Hide word diff 
+/* Multi-step checkout */
+#breadcrumb a.stepcrumb,
+#breadcrumb span.stepcrumb {
+  background-color: #00f030;
+  min-width: 140px !important;
+  padding: 3px 0 3px 15px;
+  color: #333333;
+}
+#breadcrumb a.stepcrumb.incomplete-step,
+#breadcrumb span.stepcrumb.incomplete-step {
+  background-color: #cccccc;
+  color: #eeeeee;
+  cursor: not-allowed;
+}
+#breadcrumb a.stepcrumb.current-step,
+#breadcrumb span.stepcrumb.current-step {
+  font-weight: bold;
+  cursor: progress;
+}
+#breadcrumb a.stepcrumb.complete-step,
+#breadcrumb span.stepcrumb.complete-step {
+  cursor: pointer;
+}
+.before-crumb,
+.after-crumb {
+  width: 0;
+	height: 0;
+	border-top: 10px solid transparent;
+	border-bottom: 10px solid transparent;
+  font-size: 0px;
+  position: relative;
+  top: -4px;
+  left: 0;
+}
+.before-crumb {
+  border-left:10px solid #ffffff;
+  left: -15px;
+  z-index: 50;
+}
+.after-crumb {
+  border-left:10px solid #00f030;
+  left: 10px;
+  z-index: 60;
+}
+#breadcrumb span.stepcrumb.incomplete-step .after-crumb {
+  border-left:10px solid #cccccc;
+}
HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.