cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="back">
    <a href="#" class="btn-back">
      <div>
        <svg width="16px" height="14px" viewBox="0 0 16 14">
          <path d="M1,7 L15,7"></path>
          <polyline points="7 1 1 7 7 13"></polyline>
        </svg>
      </div>
      <span>Back</span>
    </a>
    <div class="menu-back">
      <ul class="nav-history">
        <li><a href="#">Javascript Basics</a></li>
        <li><a href="#">Introduction to Javascript</a></li>
        <li class="active"><a href="#">Your First Application</a></li>
      </ul>
      <ul class="nav-links">
        <li><a href="#">My Account</a></li>
        <li><a href="#">Privacy Policy</a></li>
        <li><a href="#">Support / Help</a></li>
      </ul>
    </div>
  </div>

<a class="credit" href="https://dribbble.com/shots/3667069-Breadcrumbs" target="_blank">dribbble</a>
            
          
!
            
              $primary: #418AD8

body
  font-family: 'Lato', sans-serif
  font-size: 16px

.back
  position: fixed
  top: 40px
  left: 40px
  width: 100px
  ul
    display: block
    margin-bottom: 0
    list-style: none
    li
      white-space: nowrap
      a
        text-decoration: none

    &.nav-history
      padding-left: 36px
      padding-top: 25px
      pointer-events: none
      li
        margin-bottom: 5px
        &::after
          content: ''
          position: absolute
          left: 12px
          width: 12px
          height: 12px
          border-radius: 50%
          background: #E8EAED
          transform: scale(.9)
          transition: all .2s ease
        &:not(:last-child)
          &::before
            content: ''
            position: absolute
            left: 17px
            margin-top: 10px
            width: 2px
            height: 28px
            background: #E8EAED
            transition: all .2s ease
        &.active
          pointer-events: none
          &::after
            background: #E8EAED
          a
            color: #5A667F
        a
          color: $primary
          display: inline-block
          opacity: 0
          transform: translateY(-10px)
          transition: all .2s ease
          &:hover
            color: darken($primary,10%)

    &.nav-links
      position: absolute
      transform: translateY(-10px)
      margin-top: 20px
      padding-left: 12px
      opacity: 0
      transition: all .2s ease
      li
        &:not(:last-child)
          margin-bottom: 5px
        a
          font-size: 14px
          font-weight: 600
          color: #C8CCD4
          transition: color .2s ease
          &:hover
            color: #9098A9
  &:hover
    width: auto
    .menu-back
      opacity: 1
      transform: translateY(0)
    .btn-back
      div
        background: rgba($primary,.25)
        svg
          path, polyline
            stroke: $primary
      span
        transform: translateX(0)
        opacity: 1
    ul
      &.nav-history
        transform: translateY(0)
        pointer-events: auto
        li
          margin-bottom: 8px
          &::after
            background: $primary
            transform: translateY(6px)
          &.active
            &::after
              background: #5A667F
          a
            opacity: 1
            transform: translateY(0)
      &.nav-links
        position: relative
        opacity: 1
        transform: translateY(0)
        pointer-events: auto



.btn-back
  display: inline-block
  div
    position: relative
    z-index: 1
    width: 36px
    height: 36px
    border-radius: 50%
    background: #E8EAED
    float: left
    svg
      fill: none
      transform: translate(10px,7px)
      path, polyline
        stroke: #9098A9
        stroke-width: 2
        stroke-linejoin: round
        stroke-linecap: round
  span
    display: inline-block
    color: $primary
    margin-left: 10px
    line-height: 34px
    opacity: 0
    transform: translateX(-20px)
    transition: all .2s ease
  &:hover
    span
      color: darken($primary,10%)
    
.credit
  position: fixed
  right: 20px
  bottom: 20px
  text-decoration: none
  font-size: 14px
  letter-spacing: .04em
  color: white
  background: #C8CCD4
  padding: 6px 18px
  line-height: 1.5em
  border-radius: 5px
  transition: all .2s ease
  &:hover
    text-decoration: none
    background: #9098A9
    color: white

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console