Bootstrapで縦線のメニュー

アイコンは http://fontawesome.io/ のアイコンを使う感じで。
bootstrapのGlyphiconsを使う場合は<i class="fa fa-xxx"></i>を<span class="glyphicon glyphicon-xxx"></span>に変更して使ってください。

<ul class="nav nav-pipe">
    <li class="active"><a href="#"><i class="fa fa-xxx"></i> メニュー</a></li>
    <li><a href="#"><i class="fa fa-xxx"></i> メニュー</a></li>
    <li><a href="#"><i class="fa fa-xxx"></i> メニュー</a></li>
    <li><a href="#"><i class="fa fa-xxx"></i> メニュー</a></li>
</ul>       

.nav-pipe {
    font-size:0;
}
.nav-pipe > li {
    font-size:14px;
    display:inline-block;
}
.nav-pipe > li+li {
  border-left: 1px solid #ccc;
}
.nav-pipe > li:first-child > a {
    padding-left:0;
}
.nav-pipe > li:last-child > a {
    padding-right:0;
}
.nav-pipe > li > a {
    padding:0 10px;
}
.nav-pipe > li > a:hover,
.nav-pipe > li > a:focus {
    background-color:transparent;
}
.nav-pipe > li.active > a,
.nav-pipe > li.active > a:hover,
.nav-pipe > li.active > a:focus {
    font-weight:700;
    background-color:transparent;
    color:inherit;
}