Toolbars

Base

Toolbars are useful for providing controls above content. They can include any kind of content but are best suited for buttons and dropdowns.

Required elements and classes include a containing element with the toolbar class and at least one column with the toolbar--column class. Adding a toolbar--border class to the toolbar element will add a bottom border that helps divide the toolbar from the content below it.

<div class="toolbar toolbar--border">
    <div class="toolbar--column">
        <button type="button" class="button button--white">Filter</button>
    </div>
    <div class="toolbar--column">
        <button type="button" class="button button--white">Share</button>
        <button type="button" class="button button--white">Settings</button>
    </div>
</div>

Breakpoints

You may activate toolbars by using the breakpoint classes --xxs through --xxl.

XXS & Up

<div class="toolbar--xxs toolbar--border">
    <div class="toolbar--column">
        <div class="dropdown margin--off">
            <button type="button" class="button button--white dropdown--button" aria-expanded="false">
                    Filter <span class="arrow"></span>
                </button>
            <div class="dropdown--list">
                <a href="#" class="dropdown--link">Dropdown Link</a>
                <div class="dropdown--divider"></div>
                <a href="#" class="dropdown--link">Dropdown Link</a>
            </div>
        </div>
    </div>
    <div class="toolbar--column">
        <div class="dropdown dropdown--right--xxs margin--off">
            <button type="button" class="button button--white dropdown--button" aria-expanded="false">
                    Share <span class="arrow"></span>
                </button>
            <div class="dropdown--list">
                <a href="#" class="dropdown--link">Dropdown Link</a>
                <div class="dropdown--divider"></div>
                <a href="#" class="dropdown--link">Dropdown Link</a>
            </div>
        </div>
        <div class="dropdown dropdown--right--xxs margin--off">
            <button type="button" class="button button--white dropdown--button" aria-expanded="false">
                    Settings <span class="arrow"></span>
                </button>
            <div class="dropdown--list">
                <a href="#" class="dropdown--link">Dropdown Link</a>
                <div class="dropdown--divider"></div>
                <a href="#" class="dropdown--link">Dropdown Link</a>
            </div>
        </div>
    </div>
</div>

XS & Up

<div class="toolbar--xs toolbar--border">
    <div class="toolbar--column">
        <div class="dropdown margin--off">
            <button type="button" class="button button--white dropdown--button" aria-expanded="false">
                    Filter <span class="arrow"></span>
                </button>
            <div class="dropdown--list">
                <a href="#" class="dropdown--link">Dropdown Link</a>
                <div class="dropdown--divider"></div>
                <a href="#" class="dropdown--link">Dropdown Link</a>
            </div>
        </div>
    </div>
    <div class="toolbar--column">
        <div class="dropdown dropdown--right--xs margin--off">
            <button type="button" class="button button--white dropdown--button" aria-expanded="false">
                    Share <span class="arrow"></span>
                </button>
            <div class="dropdown--list">
                <a href="#" class="dropdown--link">Dropdown Link</a>
                <div class="dropdown--divider"></div>
                <a href="#" class="dropdown--link">Dropdown Link</a>
            </div>
        </div>
        <div class="dropdown dropdown--right--xs margin--off">
            <button type="button" class="button button--white dropdown--button" aria-expanded="false">
                    Settings <span class="arrow"></span>
                </button>
            <div class="dropdown--list">
                <a href="#" class="dropdown--link">Dropdown Link</a>
                <div class="dropdown--divider"></div>
                <a href="#" class="dropdown--link">Dropdown Link</a>
            </div>
        </div>
    </div>
</div>

SM & Up

<div class="toolbar--sm toolbar--border">
    <div class="toolbar--column">
        <div class="dropdown margin--off">
            <button type="button" class="button button--white dropdown--button" aria-expanded="false">
                    Filter <span class="arrow"></span>
                </button>
            <div class="dropdown--list">
                <a href="#" class="dropdown--link">Dropdown Link</a>
                <div class="dropdown--divider"></div>
                <a href="#" class="dropdown--link">Dropdown Link</a>
            </div>
        </div>
    </div>
    <div class="toolbar--column">
        <div class="dropdown dropdown--right--sm margin--off">
            <button type="button" class="button button--white dropdown--button" aria-expanded="false">
                    Share <span class="arrow"></span>
                </button>
            <div class="dropdown--list">
                <a href="#" class="dropdown--link">Dropdown Link</a>
                <div class="dropdown--divider"></div>
                <a href="#" class="dropdown--link">Dropdown Link</a>
            </div>
        </div>
        <div class="dropdown dropdown--right--sm margin--off">
            <button type="button" class="button button--white dropdown--button" aria-expanded="false">
                    Settings <span class="arrow"></span>
                </button>
            <div class="dropdown--list">
                <a href="#" class="dropdown--link">Dropdown Link</a>
                <div class="dropdown--divider"></div>
                <a href="#" class="dropdown--link">Dropdown Link</a>
            </div>
        </div>
    </div>
</div>

MD & Up

<div class="toolbar--md toolbar--border">
    <div class="toolbar--column">
        <div class="dropdown margin--off">
            <button type="button" class="button button--white dropdown--button" aria-expanded="false">
                    Filter <span class="arrow"></span>
                </button>
            <div class="dropdown--list">
                <a href="#" class="dropdown--link">Dropdown Link</a>
                <div class="dropdown--divider"></div>
                <a href="#" class="dropdown--link">Dropdown Link</a>
            </div>
        </div>
    </div>
    <div class="toolbar--column">
        <div class="dropdown dropdown--right--md margin--off">
            <button type="button" class="button button--white dropdown--button" aria-expanded="false">
                    Share <span class="arrow"></span>
                </button>
            <div class="dropdown--list">
                <a href="#" class="dropdown--link">Dropdown Link</a>
                <div class="dropdown--divider"></div>
                <a href="#" class="dropdown--link">Dropdown Link</a>
            </div>
        </div>
        <div class="dropdown dropdown--right--md margin--off">
            <button type="button" class="button button--white dropdown--button" aria-expanded="false">
                    Settings <span class="arrow"></span>
                </button>
            <div class="dropdown--list">
                <a href="#" class="dropdown--link">Dropdown Link</a>
                <div class="dropdown--divider"></div>
                <a href="#" class="dropdown--link">Dropdown Link</a>
            </div>
        </div>
    </div>
</div>

LG & Up

<div class="toolbar--lg toolbar--border">
    <div class="toolbar--column">
        <div class="dropdown margin--off">
            <button type="button" class="button button--white dropdown--button" aria-expanded="false">
                    Filter <span class="arrow"></span>
                </button>
            <div class="dropdown--list">
                <a href="#" class="dropdown--link">Dropdown Link</a>
                <div class="dropdown--divider"></div>
                <a href="#" class="dropdown--link">Dropdown Link</a>
            </div>
        </div>
    </div>
    <div class="toolbar--column">
        <div class="dropdown dropdown--right--lg margin--off">
            <button type="button" class="button button--white dropdown--button" aria-expanded="false">
                    Share <span class="arrow"></span>
                </button>
            <div class="dropdown--list">
                <a href="#" class="dropdown--link">Dropdown Link</a>
                <div class="dropdown--divider"></div>
                <a href="#" class="dropdown--link">Dropdown Link</a>
            </div>
        </div>
        <div class="dropdown dropdown--right--lg margin--off">
            <button type="button" class="button button--white dropdown--button" aria-expanded="false">
                    Settings <span class="arrow"></span>
                </button>
            <div class="dropdown--list">
                <a href="#" class="dropdown--link">Dropdown Link</a>
                <div class="dropdown--divider"></div>
                <a href="#" class="dropdown--link">Dropdown Link</a>
            </div>
        </div>
    </div>
</div>

XL & Up

<div class="toolbar--xl toolbar--border">
    <div class="toolbar--column">
        <div class="dropdown margin--off">
            <button type="button" class="button button--white dropdown--button" aria-expanded="false">
                    Filter <span class="arrow"></span>
                </button>
            <div class="dropdown--list">
                <a href="#" class="dropdown--link">Dropdown Link</a>
                <div class="dropdown--divider"></div>
                <a href="#" class="dropdown--link">Dropdown Link</a>
            </div>
        </div>
    </div>
    <div class="toolbar--column">
        <div class="dropdown dropdown--right--xl margin--off">
            <button type="button" class="button button--white dropdown--button" aria-expanded="false">
                    Share <span class="arrow"></span>
                </button>
            <div class="dropdown--list">
                <a href="#" class="dropdown--link">Dropdown Link</a>
                <div class="dropdown--divider"></div>
                <a href="#" class="dropdown--link">Dropdown Link</a>
            </div>
        </div>
        <div class="dropdown dropdown--right--xl margin--off">
            <button type="button" class="button button--white dropdown--button" aria-expanded="false">
                    Settings <span class="arrow"></span>
                </button>
            <div class="dropdown--list">
                <a href="#" class="dropdown--link">Dropdown Link</a>
                <div class="dropdown--divider"></div>
                <a href="#" class="dropdown--link">Dropdown Link</a>
            </div>
        </div>
    </div>
</div>

XXL & Up

<div class="toolbar--xxl toolbar--border">
    <div class="toolbar--column">
        <div class="dropdown margin--off">
            <button type="button" class="button button--white dropdown--button" aria-expanded="false">
                    Filter <span class="arrow"></span>
                </button>
            <div class="dropdown--list">
                <a href="#" class="dropdown--link">Dropdown Link</a>
                <div class="dropdown--divider"></div>
                <a href="#" class="dropdown--link">Dropdown Link</a>
            </div>
        </div>
    </div>
    <div class="toolbar--column">
        <div class="dropdown dropdown--right--xxl margin--off">
            <button type="button" class="button button--white dropdown--button" aria-expanded="false">
                    Share <span class="arrow"></span>
                </button>
            <div class="dropdown--list">
                <a href="#" class="dropdown--link">Dropdown Link</a>
                <div class="dropdown--divider"></div>
                <a href="#" class="dropdown--link">Dropdown Link</a>
            </div>
        </div>
        <div class="dropdown dropdown--right--xxl margin--off">
            <button type="button" class="button button--white dropdown--button" aria-expanded="false">
                    Settings <span class="arrow"></span>
                </button>
            <div class="dropdown--list">
                <a href="#" class="dropdown--link">Dropdown Link</a>
                <div class="dropdown--divider"></div>
                <a href="#" class="dropdown--link">Dropdown Link</a>
            </div>
        </div>
    </div>
</div>