Underlined Nav for Bootstrap 3

index.html

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-xs-offset-3">
      <h2>Nav Underlined and Horizontal</h2>
      <ul class="nav navbar-nav nav-underlined box-underline">
        <li role="presentation" class="active"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation"><a href="#">Messages</a></li>
      </ul>
    </div>
  </div>
  <hr>
  <div class="row">
    <div class="col-xs-6 col-xs-offset-3">
      <h2>Nav Underlined and Justified</h2>
      <ul class="nav nav-underlined nav-justified">
        <li role="presentation" class="active"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation"><a href="#">Messages</a></li>
      </ul>
    </div>
  </div>
  <hr>
  <div class="row">
    <div class="col-xs-6 col-xs-offset-3">
      <h2>Nav Underlined and Vertical</h2>
      <ul class="nav nav-underlined nav-stacked box-underline">
        <li role="presentation" class="active"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation"><a href="#">Messages</a></li>
      </ul>
    </div>
  </div>  
</div>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.scss

$brand-primary:         darken(#428bca, 6.5%) !default; // #337ab7
$brand-success:         #5cb85c !default;
$brand-info:            #5bc0de !default;
$brand-warning:         #f0ad4e !default;
$brand-danger:          #d9534f !default;

$underline-height: 10px;
$underline-color: $brand-primary;

.nav-item-underlined {
    &:after {
        display: block;
        content: " ";
        bottom: $underline-height;
        border-bottom: $underline-height solid transparent;
        width: 0;
        width: auto;
        transition: all 0.2s;
    }
}

.underlined-active {
    &:after {
        border-color: $underline-color;
    }
}

.unline-deactived {
    &:after {
        border-color: transparent;
    }
}

.nav-underlined {

    &:hover,
    &:active {
        > li {
            &:hover {
                @extend .underlined-active;
            }

            &.active {
                @extend .unline-deactived;

                &:hover {
                    @extend .underlined-active;
                }
            }
        }
    }

    > li {
        @extend .nav-item-underlined;

        > a {

            &:hover,
            &:active, 
          &:focus {
                background: transparent;
            }
        }

        &.active,
        &:hover {
            @extend .underlined-active;
        }

        &:hover {
            &:after {
                @extend .underlined-active;
            }
        }
    }
}

.box-underline {
  border-bottom: 1px solid #eee;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />

underlined-nav-for-bootstrap-3.markdown

Underlined Nav for Bootstrap 3

A Pen by Betsy on CodePen.

License.