Customising user profile tabs I've customised the user profile tabs to look like a dashboard by using the generated classes and styling them using just CSS. Just to be clear, I haven't used any hooks or preprocesses to render the tabs, these are the default tabs that appear on the user profile.

I'm really pleased with the result! It all works fine and there's no bugs whatsoever as i've done it all through CSS:.

.logged-in.page-user {
  .dashboard-navigation {
    @include at-breakpoint($medium) {
      width: 20%;
      float: left;
    }
    section {
      padding: 0;
      margin: 0;
      max-width: 100%;
    }
    ul {
      padding: 0;
      margin: 0;
      border: 0;
      li {
        a {
          background: $lightgray;
          color: $darkgray;
          margin: 0;
          border: 0;
          text-transform: capitalize;
          display: inline;
          width: 50%;
          float: left;
          padding: .5em;
          color: $drupal;
          &amp;.active {
            border-left: 3px solid $drupal;
            background: $white;
            &amp;:after {
              content: "›";
              font-size: 2em;
              line-height: 0;
              float: right;
              margin-top: .25em;
            }
          }
          &amp;:hover {
            background: $drupal;
            color: $white;
            &amp;:after {
              content: "›";
              font-size: 2em;
              line-height: 0;
              float: right;
              margin-top: .25em;
            }
          }
        }
        @include at-breakpoint($medium) {
          display: block;
          overflow: hidden;
          a {
            padding: 1em 1em;
            text-align: left;
            display: inline-block;
            width: 100%;
            float: none;
            background: $lightgray;
            color: $darkgray;
            &amp;:hover {
              background: lighten($gray, 10%);
            }
            &amp;.active {
              background: $orange;
              color: $white;
              border: 0;
            }
          }
        }
      }
    }
    .secondary {
      clear: both;
      overflow: hidden;
      li {
        padding: 0;
        border: 0;
        a {
          background: $drupal;
          color: $white;
          &amp;:hover {
            background: lighten($drupal, 10%);
          }
          &amp;.active {
            color: $drupal;
            @include at-breakpoint($medium) {
              color: $white;
            }
          }
          &amp;:after {
            margin-top: .3em;
          }
        }
      }
    }
  }

  .main-content {
    @include at-breakpoint($medium) {
      width: 80%;
      float: left;
    }
  }
}


Here's what i've come up with:



I'd like to take it a step further and add icons to each tab if possible like this:



I wasn't able to target the tabs using CSS as they all have general classes or non at all + obviously the tabs that appear depend on the role so I can't target them using pseudo nth-of-type selectors.

Maybe the solution is to add more specific classes but i'm open to ideas and some help on how I should go about it.
If the final addresses are known to be static, you could use destination specific information to identify each link

http://css-tricks.com/snippets/css/style-links-depending-on-destination/

If they include nodes of random values though, this might not work unless you can force the paths for the nodes to be predictable.