けっこう探した（つもりだ）けど、よいサンプルが見つからなかったので、自前で実装しました。
sidebar.html
<div class="col-xs-3 col-xs-2 sidebar">
<ul class="nav nav-sidebar">
<li data-toggle="collapse" href="#collapse-A">
<a href="#"><span class="caret"></span> menu A</a>
</li><!-- collapse を正常に動作させるためには、閉じタグが必要。閉じないと、下記のリンクをクリックしたときに、collapse が発火する -->
<ul id="collapse-A" class="collapse">
<li><a href="A-1">A-1</a><!-- 閉じタグ省略可能 -->
<li><a href="A-2">A-2</a><!-- 閉じタグ省略可能 -->
<li><a href="A-3">A-3</a><!-- 閉じタグ省略可能 -->
</ul>
<li data-toggle="collapse" href="#collapse-B"><a href="#"><span class="caret"></span> menu B</a></li><!-- collapse を動作させるために閉じタグが必要 -->
<ul id="collapse-B" class="collapse">
<li><a href="B-1">B-1</a><!-- 閉じタグ省略可能 -->
<li><a href="B-2">B-2</a><!-- 閉じタグ省略可能 -->
<li><a href="B-3">B-3</a><!-- 閉じタグ省略可能 -->
</ul>
</ul>
</div>
入れ子のリストが、あまりかっこよくない。。。
ので、list-style-typeを指定しました。
sidebar2.html
<div class="col-xs-3 col-xs-2 sidebar">
<ul class="nav nav-sidebar">
<li data-toggle="collapse" href="#collapse-A">
<a href="#"><span class="caret"></span> menu A</a>
</li>
<ul id="collapse-A" class="collapse" style="list-style-type:none;">
<li><a href="A-1"><span class="fa fa-angle-double-right fa-fw"></span> A-1</a>
<li><a href="A-2"><span class="fa fa-angle-double-right fa-fw"></span> A-2</a>
<li><a href="A-3"><span class="fa fa-angle-double-right fa-fw"></span> A-3</a>
</ul>
<li data-toggle="collapse" href="#collapse-B">
<a href="#"><span class="caret"></span> menu B</a>
</li>
<ul id="collapse-B" class="collapse" style="list-style-type:none;">
<li><a href="B-1"><span class="fa fa-angle-double-right fa-fw"> B-1</a>
<li><a href="B-2"><span class="fa fa-angle-double-right fa-fw"> B-2</a>
<li><a href="B-3"><span class="fa fa-angle-double-right fa-fw"> B-3</a>
</ul>
</ul>
</div>