Toolbars
Toolbar
Quickly prototype a toolbar for your portlet, control panel, or site with this component and easily adjust the height of your toolbar while maintaining vertical alignment. Adjust the height of your toolbar by changing the height of
.toolbar-group,.toolbar-group-right, and.toolbar-group-expand.
In IE9 you will need to adjust the top css property of dropdown-menu to match the height of your toolbar.
<div class="toolbar">
<div class="toolbar-group">
<div class="toolbar-group-content">
<a href="#1" style="">Company</a>
</div>
</div>
<div class="toolbar-group-right">
<div class="toolbar-group-content">
<a href="#1">+Username</a>
</div>
<div class="toolbar-group-content">
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#1">
<span aria-hidden="true" class="icon-th"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#1">Alphabetical</a></li>
<li><a href="#1">Reverse</a></li>
<li><a href="#1">Split</a></li>
</ul>
</div>
</div>
<div class="toolbar-group-content">
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#1">
<div class="user-icon user-icon-default user-icon-xs">
<span aria-hidden="true" class="icon-bell-alt"></span>
</div>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#1">Alphabetical</a></li>
<li><a href="#1">Reverse</a></li>
<li><a href="#1">Split</a></li>
</ul>
</div>
</div>
<div class="toolbar-group-content">
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#1">
<span aria-hidden="true" class="icon-plus"></span>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#1">Alphabetical</a></li>
<li><a href="#1">Reverse</a></li>
<li><a href="#1">Split</a></li>
</ul>
</div>
</div>
<div class="toolbar-group-content">
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#1">
<div class="user-icon user-icon-info user-icon-sm">
<span aria-hidden="true" class="icon-user"></span>
</div>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#1">Alphabetical</a></li>
<li><a href="#1">Reverse</a></li>
<li><a href="#1">Split</a></li>
</ul>
</div>
</div>
</div>
<div class="toolbar-group-expand">
<div class="toolbar-group-field">
<div class="input-group">
<input class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-primary" type="button"><span aria-hidden="true" class="icon-search"></span></button>
</span>
</div>
</div>
</div>
</div><div class="toolbar">
<div class="toolbar-group">
<div class="toolbar-group-content">
<select class="form-control">
<option>Helvetica</option>
<option>Arial</option>
<option>Futura</option>
<option>Georgia</option>
<option>Comic Sans</option>
</select>
</div>
<div class="toolbar-group-content">
<a class="icon-monospaced" href="#1">
<span aria-label="icon-bold" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-bold">
<use xlink:href="../../images/icons/icons.svg#bold" />
</svg>
</span>
</a>
</div>
<div class="toolbar-group-content">
<a class="icon-monospaced" href="#1">
<span aria-label="icon-italic" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-italic">
<use xlink:href="../../images/icons/icons.svg#italic" />
</svg>
</span>
</a>
</div>
<div class="toolbar-group-content">
<a class="icon-monospaced" href="#1">
<span aria-label="icon-underline" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-underline">
<use xlink:href="../../images/icons/icons.svg#underline" />
</svg>
</span>
</a>
</div>
</div>
<div class="toolbar-group">
<div class="toolbar-group-content">
<a class="icon-monospaced" href="#1">
<span aria-label="icon-align-left" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-align-left">
<use xlink:href="../../images/icons/icons.svg#align-left" />
</svg>
</span>
</a>
</div>
<div class="toolbar-group-content">
<a class="icon-monospaced" href="#1">
<span aria-label="icon-align-center" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-align-center">
<use xlink:href="../../images/icons/icons.svg#align-center" />
</svg>
</span>
</a>
</div>
<div class="toolbar-group-content">
<a class="icon-monospaced" href="#1">
<span aria-label="icon-align-right" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-align-right">
<use xlink:href="../../images/icons/icons.svg#align-right" />
</svg>
</span>
</a>
</div>
</div>
<div class="toolbar-group">
<div class="toolbar-group-content">
<a class="icon-monospaced" href="#1">
<span aria-label="icon-indent-more" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-indent-more">
<use xlink:href="../../images/icons/icons.svg#indent-more" />
</svg>
</span>
</a>
</div>
<div class="toolbar-group-content">
<a class="icon-monospaced" href="#1">
<span aria-label="icon-indent-less" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-indent-less">
<use xlink:href="../../images/icons/icons.svg#indent-less" />
</svg>
</span>
</a>
</div>
</div>
<div class="toolbar-group">
<div class="toolbar-group-content">
<a class="icon-monospaced" href="#1">
<span aria-label="icon-list" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-list">
<use xlink:href="../../images/icons/icons.svg#list" />
</svg>
</span>
</a>
</div>
<div class="toolbar-group-content">
<div class="dropdown">
<a class="dropdown-toggle icon-monospaced" data-toggle="dropdown" href="#1">
<span aria-label="icon-ellipsis-v" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
<use xlink:href="../../images/icons/icons.svg#ellipsis-v" />
</svg>
</span>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#1">Alphabetical</a></li>
<li><a href="#1">Reverse</a></li>
<li><a href="#1">Split</a></li>
</ul>
</div>
</div>
</div>
</div>How to use toolbar-group-content and toolbar-group-field
Use only
toolbar-group-contentinsidetoolbar-groupif you want to create a group that is only as wide as the content inside.
<div class="toolbar">
<div class="toolbar-group">
<div class="toolbar-group-content" style="background-color: aliceblue;">
<a class="icon-monospaced" href="#1">
<span aria-label="icon-bold" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-bold">
<use xlink:href="../../images/icons/icons.svg#bold" />
</svg>
</span>
</a>
</div>
<div class="toolbar-group-content" style="background-color: antiquewhite;">
<a class="icon-monospaced" href="#1">
<span aria-label="icon-italic" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-italic">
<use xlink:href="../../images/icons/icons.svg#italic" />
</svg>
</span>
</a>
</div>
<div class="toolbar-group-content" style="background-color: aqua;">
<a class="icon-monospaced" href="#1">
<span aria-label="icon-underline" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-underline">
<use xlink:href="../../images/icons/icons.svg#underline" />
</svg>
</span>
</a>
</div>
</div>
</div>Use only
toolbar-group-fieldinsidetoolbar-groupif you want to create a group that is equally spaced acrosstoolbar-group.
<div class="toolbar">
<div class="toolbar-group">
<div class="toolbar-group-field" style="background-color: aliceblue;">
<a class="icon-monospaced" href="#1">
<span aria-label="icon-bold" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-bold">
<use xlink:href="../../images/icons/icons.svg#bold" />
</svg>
</span>
</a>
</div>
<div class="toolbar-group-field" style="background-color: antiquewhite;">
<a class="icon-monospaced" href="#1">
<span aria-label="icon-italic" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-italic">
<use xlink:href="../../images/icons/icons.svg#italic" />
</svg>
</span>
</a>
</div>
<div class="toolbar-group-field" style="background-color: aqua;">
<a class="icon-monospaced" href="#1">
<span aria-label="icon-underline" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-underline">
<use xlink:href="../../images/icons/icons.svg#underline" />
</svg>
</span>
</a>
</div>
</div>
</div>Use one
toolbar-group-contentand the rest withtoolbar-group-fieldinsidetoolbar-groupif you want to create a group with one element that spans the remaining width oftoolbar-group.
<div class="toolbar">
<div class="toolbar-group">
<div class="toolbar-group-field" style="background-color: aliceblue;">
<a class="icon-monospaced" href="#1">
<span aria-label="icon-bold" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-bold">
<use xlink:href="../../images/icons/icons.svg#bold" />
</svg>
</span>
</a>
</div>
<div class="toolbar-group-content" style="background-color: antiquewhite;">
<a class="icon-monospaced" href="#1">
<span aria-label="icon-italic" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-italic">
<use xlink:href="../../images/icons/icons.svg#italic" />
</svg>
</span>
</a>
</div>
<div class="toolbar-group-field" style="background-color: aqua;">
<a class="icon-monospaced" href="#1">
<span aria-label="icon-underline" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-underline">
<use xlink:href="../../images/icons/icons.svg#underline" />
</svg>
</span>
</a>
</div>
</div>
</div>Use multiple
toolbar-group-contents and multipletoolbar-group-fields insidetoolbar-groupif you want to create a group with multiple items only as wide as its content and the remaining items to share the remaining space insidetoolbar-group.
<div class="toolbar">
<div class="toolbar-group">
<div class="toolbar-group-field" style="background-color: aliceblue;">
<a class="icon-monospaced" href="#1">
<span aria-label="icon-bold" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-bold">
<use xlink:href="../../images/icons/icons.svg#bold" />
</svg>
</span>
</a>
</div>
<div class="toolbar-group-field" style="background-color: antiquewhite;">
<a class="icon-monospaced" href="#1">
<span aria-label="icon-italic" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-italic">
<use xlink:href="../../images/icons/icons.svg#italic" />
</svg>
</span>
</a>
</div>
<div class="toolbar-group-content" style="background-color: aqua;">
<a class="icon-monospaced" href="#1">
<span aria-label="icon-underline" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-underline">
<use xlink:href="../../images/icons/icons.svg#underline" />
</svg>
</span>
</a>
</div>
<div class="toolbar-group-content" style="background-color: aquamarine;">
<a class="icon-monospaced" href="#1">
<span aria-label="icon-align-left" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-align-left">
<use xlink:href="../../images/icons/icons.svg#align-left" />
</svg>
</span>
</a>
</div>
</div>
</div>Fill Remaining Space with Form Element
To fill the remaining space with one form element such as a search box, declare
.toolbar-group-expandlast and use.toolbar-group-content.
<div class="toolbar">
<div class="toolbar-group">
<div class="toolbar-group-content">
<input type="checkbox">
</div>
<div class="toolbar-group-content">
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#1">
Order by: <span aria-hidden="true" class="icon-caret-down"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#1">Date</a></li>
<li><a href="#1">Time</a></li>
<li><a href="#1">Status</a></li>
</ul>
</div>
</div>
<div class="toolbar-group-content">
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#1">
Name: <span aria-hidden="true" class="icon-caret-down"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#1">Alphabetical</a></li>
<li><a href="#1">Reverse</a></li>
<li><a href="#1">Split</a></li>
</ul>
</div>
</div>
</div>
<div class="toolbar-group-right">
<div class="toolbar-group-content">
<a href="#1">
<span aria-hidden="true" class="icon-th-large"></span>
</a>
</div>
<div class="toolbar-group-content">
<a href="#1">
<span aria-hidden="true" class="icon-th-list"></span>
</a>
</div>
<div class="toolbar-group-content">
<a href="#1">
<span aria-hidden="true" class="icon-reorder"></span>
</a>
</div>
</div>
<div class="toolbar-group-expand">
<div class="toolbar-group-content">
<form>
<div class="input-group">
<input class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">
<span aria-hidden="true" class="icon-search"></span>
</button>
</span>
</div>
</form>
</div>
</div>
</div>Fill Remaining Space with Text and Truncate the Rest
Use the same pattern as above and wrap your text inside
.toolbar-group-contentwith<span class="truncate-text"></span>.
<div class="toolbar">
<div class="toolbar-group">
<div class="toolbar-group-content">
<a class="icon-monospaced" href="#1">
<span aria-label="icon-product-menu-closed" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-product-menu-closed">
<use xlink:href="../../images/icons/icons.svg#product-menu-closed" />
</svg>
</span>
</a>
</div>
<div class="toolbar-group-content">
<a class="icon-monospaced" href="#1">
<span aria-label="icon-angle-left" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
<use xlink:href="../../images/icons/icons.svg#angle-left" />
</svg>
</span>
</a>
</div>
</div>
<div class="toolbar-group-right">
<div class="toolbar-group-content">
<div class="dropdown">
<a class="dropdown-toggle icon-monospaced" data-toggle="dropdown" href="#1">
<span aria-label="icon-ellipsis-v" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
<use xlink:href="../../images/icons/icons.svg#ellipsis-v" />
</svg>
</span>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#1">Edit</a></li>
<li><a href="#1">Access from Desktop</a></li>
<li><a href="#1">Metadata Sets</a></li>
</ul>
</div>
</div>
</div>
<div class="toolbar-group-expand">
<div class="toolbar-group-content">
<span class="truncate-text">Con panna plunger pot, café au lait barista so cream so affogato qui whipped. That doppio espresso, aromatic foam crema decaffeinated caramelization. Caramelization coffee, aged arabica sugar, so, half and half, grounds cultivar trifecta aroma chicory. Aromatic crema, cinnamon redeye cortado strong aftertaste sugar java.</span>
</div>
</div>
</div>Add additional content to
.toolbar-group-expandwith.toolbar-group-field.
<div class="toolbar">
<div class="toolbar-group">
<div class="toolbar-group-content">
<a class="icon-monospaced" href="#1">
<span aria-label="icon-product-menu-closed" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-product-menu-closed">
<use xlink:href="../../images/icons/icons.svg#product-menu-closed" />
</svg>
</span>
</a>
</div>
<div class="toolbar-group-content">
<a class="icon-monospaced" href="#1">
<span aria-label="icon-angle-left" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
<use xlink:href="../../images/icons/icons.svg#angle-left" />
</svg>
</span>
</a>
</div>
</div>
<div class="toolbar-group-right">
<div class="toolbar-group-content">
<div class="dropdown">
<a class="dropdown-toggle icon-monospaced" data-toggle="dropdown" href="#1">
<span aria-label="icon-ellipsis-v" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
<use xlink:href="../../images/icons/icons.svg#ellipsis-v" />
</svg>
</span>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#1">Edit</a></li>
<li><a href="#1">Access from Desktop</a></li>
<li><a href="#1">Metadata Sets</a></li>
</ul>
</div>
</div>
</div>
<div class="toolbar-group-expand">
<div class="toolbar-group-content" style="padding-right: 0;">
<span class="truncate-text">Con panna plunger pot, café au lait barista so cream so affogato qui whipped. That doppio espresso, aromatic foam crema decaffeinated caramelization. Caramelization coffee, aged arabica sugar, so, half and half, grounds cultivar trifecta aroma chicory. Aromatic crema, cinnamon redeye cortado strong aftertaste sugar java.</span>
</div>
<div class="toolbar-group-field" style="padding-left: 0;">
<a class="icon-monospaced" data-placement="bottom" data-toggle="tooltip" href="#1" title="Help Tooltip.">
<span aria-label="icon-question-circle-full" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-question-circle-full">
<use xlink:href="../../images/icons/icons.svg#question-circle-full" />
</svg>
</span>
</a>
</div>
</div>
</div>Make Toolbar Groups break to a new line for specific screen widths.
.tbg-lg-newlinewill break a.toolbar-groupto a new line at screen sizes 1200px and above.
<div class="toolbar">
<div class="toolbar-group" style="height: 70px;">
<div class="toolbar-group-content">
<a href="#1" style="font-size:20px;"><span aria-hidden="true" class="icon-thumbs-up"></span> <span class="count">0</span></a>
</div>
<div class="toolbar-group-content">
<a href="#1" style="font-size:10px;"><span aria-hidden="true" class="icon-thumbs-down"></span> <span class="count">0</span></a>
</div>
<div class="toolbar-group-content">
<a href="#1" style="font-size:40px;"><span aria-hidden="true" class="icon-flag-alt"></span> <span class="count">Flag</span></a>
</div>
</div>
<div class="toolbar-group-expand" style="height: 70px;">
<div class="toolbar-group-field">
<div class="input-group">
<input class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-primary" type="button"><span aria-hidden="true" class="icon-search"></span></button>
</span>
</div>
</div>
</div>
</div>
.tbg-md-newlinewill break a.toolbar-groupto a new line between screen sizes 992px and 1199px.
<div class="toolbar">
<div class="toolbar-group" style="height: 70px;">
<div class="toolbar-group-content">
<a href="#1" style="font-size:20px;"><span aria-hidden="true" class="icon-thumbs-up"></span> <span class="count">0</span></a>
</div>
<div class="toolbar-group-content">
<a href="#1" style="font-size:10px;"><span aria-hidden="true" class="icon-thumbs-down"></span> <span class="count">0</span></a>
</div>
<div class="toolbar-group-content">
<a href="#1" style="font-size:40px;"><span aria-hidden="true" class="icon-flag-alt"></span> <span class="count">Flag</span></a>
</div>
</div>
<div class="tbg-md-newline toolbar-group-expand" style="height: 70px;">
<div class="toolbar-group-field">
<div class="input-group">
<input class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-primary" type="button"><span aria-hidden="true" class="icon-search"></span></button>
</span>
</div>
</div>
</div>
</div>
.tbg-sm-newlinewill break a.toolbar-groupto a new line between screen sizes 768px and 991px.
<div class="toolbar uxgl-sm-newline-demo">
<div class="toolbar-group" style="height: 70px;">
<div class="toolbar-group-content">
<a href="#1" style="font-size:20px;"><span aria-hidden="true" class="icon-thumbs-up"></span> <span class="count">0</span></a>
</div>
<div class="toolbar-group-content">
<a href="#1" style="font-size:10px;"><span aria-hidden="true" class="icon-thumbs-down"></span> <span class="count">0</span></a>
</div>
<div class="toolbar-group-content">
<a href="#1" style="font-size:40px;"><span aria-hidden="true" class="icon-flag-alt"></span> <span class="count">Flag</span></a>
</div>
</div>
<div class="tbg-sm-newline toolbar-group-expand" style="height: 70px;">
<div class="toolbar-group-field">
<div class="input-group">
<input class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-primary" type="button"><span aria-hidden="true" class="icon-search"></span></button>
</span>
</div>
</div>
</div>
</div>
.tbg-xs-newlinewill break a.toolbar-groupto a new line at screen sizes less than 768px.
<div class="toolbar uxgl-xs-newline-demo">
<div class="toolbar-group" style="height: 70px;">
<div class="toolbar-group-content">
<a href="#1" style="font-size:20px;"><span aria-hidden="true" class="icon-thumbs-up"></span> <span class="count">0</span></a>
</div>
<div class="toolbar-group-content">
<a href="#1" style="font-size:10px;"><span aria-hidden="true" class="icon-thumbs-down"></span> <span class="count">0</span></a>
</div>
<div class="toolbar-group-content">
<a href="#1" style="font-size:40px;"><span aria-hidden="true" class="icon-flag-alt"></span> <span class="count">Flag</span></a>
</div>
</div>
<div class="tbg-xs-newline toolbar-group-expand" style="height: 70px;">
<div class="toolbar-group-field">
<div class="input-group">
<input class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-primary" type="button"><span aria-hidden="true" class="icon-search"></span></button>
</span>
</div>
</div>
</div>
</div>