<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>

$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
      pointer-events: none
      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%)