Tbar
<nav class="tbar">
<ul class="tbar-nav">
<li class="tbar-item">
<a class="component-action disabled" href="#1" role="button" tabindex="-1">
<svg class="lexicon-icon lexicon-icon-angle-left" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#angle-left" />
</svg>
</a>
</li>
<li class="tbar-item tbar-item-expand">
<div class="tbar-section">
<span class="text-truncate-inline">
<span class="text-truncate">Item 1 of 3,138,732,873,467,182,321,341,231,234,342,559,827,334,424</span>
</span>
</div>
</li>
<li class="tbar-item">
<a class="component-link" href="#1">Component Link</a>
</li>
<li class="tbar-item">
<a class="component-action" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-angle-right" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#angle-right" />
</svg>
</a>
</li>
<li class="tbar-item">
<a class="component-action" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#times" />
</svg>
</a>
</li>
</ul>
</nav>Component Tbar
A base toolbar for use in components.
<nav class="component-tbar tbar">
<div class="container-fluid container-fluid-max-xl">
<ul class="tbar-nav">
<li class="tbar-item">
<a class="component-action disabled" href="#1" role="button" tabindex="-1">
<svg class="lexicon-icon lexicon-icon-angle-left" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#angle-left" />
</svg>
</a>
</li>
<li class="tbar-item tbar-item-expand">
<div class="tbar-section">
<span class="text-truncate-inline">
<span class="text-truncate">Item 1 of 3,138,732,873,467,182,321,341,231,234,342,559,827,334,424</span>
</span>
</div>
</li>
<li class="tbar-item">
<a class="component-action" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-angle-right" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#angle-right" />
</svg>
</a>
</li>
<li class="tbar-item">
<a class="component-action" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#times" />
</svg>
</a>
</li>
</ul>
</div>
</nav>Subnav Tbar
Subnavigation to use with main navigations such as Management Bar
<nav class="tbar subnav-tbar">
<div class="container-fluid container-fluid-max-xl">
<ul class="tbar-nav">
<li class="tbar-item tbar-item-expand">
<div class="tbar-section">
<span class="text-truncate-inline">
<span class="text-truncate">25,392 results for <strong>ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</strong></span>
</span>
</div>
</li>
<li class="tbar-item">
<a class="component-link tbar-link" href="#1" role="button">Clear</a>
</li>
<li class="tbar-item">
<button class="btn btn-unstyled component-link tbar-link" type="button">Clear</button>
</li>
</ul>
</div>
</nav>Subnav Tbar Light
Sub Navigation used in Modals
<div class="tbar subnav-tbar subnav-tbar-light">
<div class="container-fluid container-fluid-max-xl">
<div class="tbar-nav">
<div class="tbar-item tbar-item-expand">
<div class="tbar-section">
<span class="component-text text-truncate-inline">
<span class="text-truncate">User Information</span>
</span>
</div>
</div>
<div class="tbar-item">
<span class="component-text">Step 1 of 2</span>
</div>
</div>
</div>
</div>Subnav Tbar Primary
Sub Navigation used in Management Bar
<nav class="tbar subnav-tbar subnav-tbar-primary">
<div class="container-fluid container-fluid-max-xl">
<ul class="tbar-nav">
<li class="tbar-item tbar-item-expand">
<div class="tbar-section">
<span class="component-title text-truncate-inline">
<span class="text-truncate">Results for Master (19 Items)</span>
</span>
</div>
</li>
</ul>
</div>
</nav><nav class="tbar subnav-tbar subnav-tbar-primary">
<div class="container-fluid container-fluid-max-xl">
<ul class="tbar-nav">
<li class="tbar-item tbar-item-expand">
<div class="tbar-section">
<span class="component-text text-truncate-inline">
<span class="text-truncate">25,392 results for <strong>ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</strong></span>
</span>
</div>
</li>
<li class="tbar-item">
<a class="component-link tbar-link" href="#1" role="button">Clear</a>
</li>
<li class="tbar-item">
<button class="btn btn-unstyled component-link tbar-link" type="button">Clear</button>
</li>
</ul>
</div>
</nav>