Management Toolbar

yarn add @clayui/management-toolbar

React Component
CSS / Markup

Stable3.0.3

Management toolbar is an extension of Toolbar. It is a combination of different components, including filters, orders, search, visualization select, and other actions that let users manage a dataset.

Check the Lexicon Management Toolbar Pattern for a more in-depth look at the motivations and proper usage of this component.

With ClayManagementToolbar you can create a variety of Management Toolbar variations, use ClayManagementToolbar component as the outside container, ClayManagementToolbar.ItemList for creating groups of items and ClayManagementToolbar.Item for create items inside groups. Use expand property on ClayManagementToolbar.ItemList for expanding the item list.

Use ClayManagementToolbar.Search for creating a Search input inside the management toolbar.

import {ClayButtonWithIcon} from '@clayui/button';
import {ClayInput} from '@clayui/form';
import ClayManagementToolbar from '@clayui/management-toolbar';
import React from 'react';

import {ClayButtonWithIcon} from '@clayui/button';
import {ClayInput} from '@clayui/form';
import ClayManagementToolbar from '@clayui/management-toolbar';
import React from 'react';

const Component = () => {
  return (
    <ClayManagementToolbar>
      <ClayManagementToolbar.ItemList>
        <ClayManagementToolbar.Search>
          <ClayInput.Group>
            <ClayInput.GroupItem>
              <ClayInput
                aria-label="Search"
                className="form-control input-group-inset input-group-inset-after"
                defaultValue="Red"
                type="text"
              />
              <ClayInput.GroupInsetItem after tag="span">
                <ClayButtonWithIcon
                  className="navbar-breakpoint-d-none"
                  displayType="unstyled"
                  onClick={() => setSearchMobile(false)}
                  spritemap={spritemap}
                  symbol="times"
                />
                <ClayButtonWithIcon
                  displayType="unstyled"
                  spritemap={spritemap}
                  symbol="search"
                  type="submit"
                />
              </ClayInput.GroupInsetItem>
            </ClayInput.GroupItem>
          </ClayInput.Group>
        </ClayManagementToolbar.Search>

        <ClayManagementToolbar.Item>
          <ClayButton
            className="nav-link nav-link-monospaced"
            displayType="unstyled"
            onClick={() => {}}
          >
            <ClayIcon spritemap={spritemap} symbol="info-circle-open" />
          </ClayButton>
        </ClayManagementToolbar.Item>

        <ClayManagementToolbar.Item>
          <ClayButtonWithIcon
            className="nav-btn nav-btn-monospaced"
            spritemap={spritemap}
            symbol="plus"
          />
        </ClayManagementToolbar.Item>
      </ClayManagementToolbar.ItemList>
    </ClayManagementToolbar>
  );
};

render(<Component />);

const Component = () => {
  return (
    <ClayManagementToolbar>
      <ClayManagementToolbar.ItemList>
        <ClayManagementToolbar.Search>
          <ClayInput.Group>
            <ClayInput.GroupItem>
              <ClayInput
                aria-label="Search"
                className="form-control input-group-inset input-group-inset-after"
                defaultValue="Red"
                type="text"
              />
              <ClayInput.GroupInsetItem after tag="span">
                <ClayButtonWithIcon
                  className="navbar-breakpoint-d-none"
                  displayType="unstyled"
                  onClick={() => setSearchMobile(false)}
                  spritemap={spritemap}
                  symbol="times"
                />
                <ClayButtonWithIcon
                  displayType="unstyled"
                  spritemap={spritemap}
                  symbol="search"
                  type="submit"
                />
              </ClayInput.GroupInsetItem>
            </ClayInput.GroupItem>
          </ClayInput.Group>
        </ClayManagementToolbar.Search>
        <ClayManagementToolbar.Item>
          <ClayButton
            className="nav-link nav-link-monospaced"
            displayType="unstyled"
            onClick={() => {}}
          >
            <ClayIcon spritemap={spritemap} symbol="info-circle-open" />
          </ClayButton>
        </ClayManagementToolbar.Item>
        <ClayManagementToolbar.Item>
          <ClayButtonWithIcon
            className="nav-btn nav-btn-monospaced"
            spritemap={spritemap}
            symbol="plus"
          />
        </ClayManagementToolbar.Item>
      </ClayManagementToolbar.ItemList>
    </ClayManagementToolbar>
  );
};
render(<Component />);

Use ClayManagementToolbar.ResultsBar for creating a results bar and ClayManagementToolbar.ResultsBarItem for defining items inside Results Bar.

import ClayButton from '@clayui/button';
import ClayManagementToolbar, {
	ClayResultsBar,
} from '@clayui/management-toolbar';
import React from 'react';

import ClayButton from '@clayui/button';
import ClayManagementToolbar, {
	ClayResultsBar,
} from '@clayui/management-toolbar';
import React from 'react';

const Component = () => (
  <ClayManagementToolbar>
    <ClayResultsBar>
      <ClayResultsBar.Item>
        <span className="component-text text-truncate-inline">
          <span className="text-truncate">
            {'2 results for "'}
            <strong>{"Red"}</strong>
            {'"'}
          </span>
        </span>
      </ClayResultsBar.Item>
      <ClayResultsBar.Item expand>
        <ClayLabel
          className="component-label tbar-label"
          displayType="unstyled"
          spritemap={spritemap}
        >
          {"Filter"}
        </ClayLabel>
      </ClayResultsBar.Item>
      <ClayResultsBar.Item>
        <ClayButton className="component-link tbar-link" displayType="unstyled">
          {"Clear"}
        </ClayButton>
      </ClayResultsBar.Item>
    </ClayResultsBar>
  </ClayManagementToolbar>
);

render(<Component />);

const Component = () => (
  <ClayManagementToolbar>
    <ClayResultsBar>
      <ClayResultsBar.Item>
        <span className="component-text text-truncate-inline">
          <span className="text-truncate">
            {'2 results for "'}
            <strong>{"Red"}</strong>
            {'"'}
          </span>
        </span>
      </ClayResultsBar.Item>
      <ClayResultsBar.Item expand>
        <ClayLabel
          className="component-label tbar-label"
          displayType="unstyled"
          spritemap={spritemap}
        >
          {"Filter"}
        </ClayLabel>
      </ClayResultsBar.Item>
      <ClayResultsBar.Item>
        <ClayButton className="component-link tbar-link" displayType="unstyled">
          {"Clear"}
        </ClayButton>
      </ClayResultsBar.Item>
    </ClayResultsBar>
  </ClayManagementToolbar>
);
render(<Component />);

Aggregating ClayManagementToolbar item lists and results bar you can reach this result:

import ClayButton, {ClayButtonWithIcon} from '@clayui/button';
import {ClayDropDownWithItems} from '@clayui/drop-down';
import {ClayCheckbox, ClayInput} from '@clayui/form';
import ClayIcon from '@clayui/icon';
import ClayLabel from '@clayui/label';
import ClayManagementToolbar, {
	ClayResultsBar,
} from '@clayui/management-toolbar';
import React, {useState} from 'react';

import ClayButton, {ClayButtonWithIcon} from '@clayui/button';
import {ClayDropDownWithItems} from '@clayui/drop-down';
import {ClayCheckbox, ClayInput} from '@clayui/form';
import ClayIcon from '@clayui/icon';
import ClayLabel from '@clayui/label';
import ClayManagementToolbar, {
	ClayResultsBar,
} from '@clayui/management-toolbar';
import React, {useState} from 'react';

const Component = () => {
  const filterItems = [
    { label: "Filter Action 1", onClick: () => alert("Filter clicked") },
    { label: "Filter Action 2", onClick: () => alert("Filter clicked") }
  ];

  const viewTypes = [
    {
      label: "List",
      onClick: () => alert("Show view list"),
      symbolLeft: "list"
    },
    {
      active: true,
      label: "Table",
      onClick: () => alert("Show view table"),
      symbolLeft: "table"
    },
    {
      label: "Card",
      onClick: () => alert("Show view card"),
      symbolLeft: "cards2"
    }
  ];

  const [searchMobile, setSearchMobile] = useState(false);

  const viewTypeActive = viewTypes.find(type => type.active);

  return (
    <>
      <ClayManagementToolbar>
        <ClayManagementToolbar.ItemList>
          <ClayManagementToolbar.Item>
            <ClayCheckbox checked={false} onChange={() => {}} />
          </ClayManagementToolbar.Item>

          <ClayDropDownWithItems
            items={filterItems}
            spritemap={spritemap}
            trigger={
              <ClayButton className="nav-link" displayType="unstyled">
                <span className="navbar-breakpoint-down-d-none">
                  <span className="navbar-text-truncate">
                    {"Filter and Order"}
                  </span>

                  <ClayIcon
                    className="inline-item inline-item-after"
                    spritemap={spritemap}
                    symbol="caret-bottom"
                  />
                </span>
                <span className="navbar-breakpoint-d-none">
                  <ClayIcon spritemap={spritemap} symbol="filter" />
                </span>
              </ClayButton>
            }
          />

          <ClayManagementToolbar.Item>
            <ClayButton
              className="nav-link nav-link-monospaced order-arrow-down-active"
              displayType="unstyled"
              onClick={() => {}}
            >
              <ClayIcon spritemap={spritemap} symbol="order-arrow" />
            </ClayButton>
          </ClayManagementToolbar.Item>
        </ClayManagementToolbar.ItemList>

        <ClayManagementToolbar.Search showMobile={searchMobile}>
          <ClayInput.Group>
            <ClayInput.GroupItem>
              <ClayInput
                aria-label="Search"
                className="form-control input-group-inset input-group-inset-after"
                defaultValue="Red"
                type="text"
              />
              <ClayInput.GroupInsetItem after tag="span">
                <ClayButtonWithIcon
                  className="navbar-breakpoint-d-none"
                  displayType="unstyled"
                  onClick={() => setSearchMobile(false)}
                  spritemap={spritemap}
                  symbol="times"
                />
                <ClayButtonWithIcon
                  displayType="unstyled"
                  spritemap={spritemap}
                  symbol="search"
                  type="submit"
                />
              </ClayInput.GroupInsetItem>
            </ClayInput.GroupItem>
          </ClayInput.Group>
        </ClayManagementToolbar.Search>

        <ClayManagementToolbar.ItemList>
          <ClayManagementToolbar.Item className="navbar-breakpoint-d-none">
            <ClayButton
              className="nav-link nav-link-monospaced"
              displayType="unstyled"
              onClick={() => setSearchMobile(true)}
            >
              <ClayIcon spritemap={spritemap} symbol="search" />
            </ClayButton>
          </ClayManagementToolbar.Item>

          <ClayManagementToolbar.Item>
            <ClayButton
              className="nav-link nav-link-monospaced"
              displayType="unstyled"
              onClick={() => {}}
            >
              <ClayIcon spritemap={spritemap} symbol="info-circle-open" />
            </ClayButton>
          </ClayManagementToolbar.Item>

          <ClayManagementToolbar.Item>
            <ClayDropDownWithItems
              items={viewTypes}
              spritemap={spritemap}
              trigger={
                <ClayButton
                  className="nav-link-monospaced nav-link"
                  displayType="unstyled"
                >
                  <ClayIcon
                    spritemap={spritemap}
                    symbol={viewTypeActive ? viewTypeActive.symbolLeft : ""}
                  />
                </ClayButton>
              }
            />
          </ClayManagementToolbar.Item>

          <ClayManagementToolbar.Item>
            <ClayButtonWithIcon
              className="nav-btn nav-btn-monospaced"
              spritemap={spritemap}
              symbol="plus"
            />
          </ClayManagementToolbar.Item>
        </ClayManagementToolbar.ItemList>
      </ClayManagementToolbar>

      <ClayResultsBar>
        <ClayResultsBar.Item>
          <span className="component-text text-truncate-inline">
            <span className="text-truncate">
              {'2 results for "'}
              <strong>{"Red"}</strong>
              {'"'}
            </span>
          </span>
        </ClayResultsBar.Item>
        <ClayResultsBar.Item expand>
          <ClayLabel
            className="component-label tbar-label"
            displayType="unstyled"
            spritemap={spritemap}
          >
            {"Filter"}
          </ClayLabel>
        </ClayResultsBar.Item>
        <ClayResultsBar.Item>
          <ClayButton
            className="component-link tbar-link"
            displayType="unstyled"
          >
            {"Clear"}
          </ClayButton>
        </ClayResultsBar.Item>
      </ClayResultsBar>
    </>
  );
};

render(<Component />);

const Component = () => {
  const filterItems = [
    { label: "Filter Action 1", onClick: () => alert("Filter clicked") },
    { label: "Filter Action 2", onClick: () => alert("Filter clicked") }
  ];
  const viewTypes = [
    {
      label: "List",
      onClick: () => alert("Show view list"),
      symbolLeft: "list"
    },
    {
      active: true,
      label: "Table",
      onClick: () => alert("Show view table"),
      symbolLeft: "table"
    },
    {
      label: "Card",
      onClick: () => alert("Show view card"),
      symbolLeft: "cards2"
    }
  ];
  const [searchMobile, setSearchMobile] = useState(false);
  const viewTypeActive = viewTypes.find(type => type.active);
  return (
    <>
      <ClayManagementToolbar>
        <ClayManagementToolbar.ItemList>
          <ClayManagementToolbar.Item>
            <ClayCheckbox checked={false} onChange={() => {}} />
          </ClayManagementToolbar.Item>
          <ClayDropDownWithItems
            items={filterItems}
            spritemap={spritemap}
            trigger={
              <ClayButton className="nav-link" displayType="unstyled">
                <span className="navbar-breakpoint-down-d-none">
                  <span className="navbar-text-truncate">
                    {"Filter and Order"}
                  </span>
                  <ClayIcon
                    className="inline-item inline-item-after"
                    spritemap={spritemap}
                    symbol="caret-bottom"
                  />
                </span>
                <span className="navbar-breakpoint-d-none">
                  <ClayIcon spritemap={spritemap} symbol="filter" />
                </span>
              </ClayButton>
            }
          />
          <ClayManagementToolbar.Item>
            <ClayButton
              className="nav-link nav-link-monospaced order-arrow-down-active"
              displayType="unstyled"
              onClick={() => {}}
            >
              <ClayIcon spritemap={spritemap} symbol="order-arrow" />
            </ClayButton>
          </ClayManagementToolbar.Item>
        </ClayManagementToolbar.ItemList>
        <ClayManagementToolbar.Search showMobile={searchMobile}>
          <ClayInput.Group>
            <ClayInput.GroupItem>
              <ClayInput
                aria-label="Search"
                className="form-control input-group-inset input-group-inset-after"
                defaultValue="Red"
                type="text"
              />
              <ClayInput.GroupInsetItem after tag="span">
                <ClayButtonWithIcon
                  className="navbar-breakpoint-d-none"
                  displayType="unstyled"
                  onClick={() => setSearchMobile(false)}
                  spritemap={spritemap}
                  symbol="times"
                />
                <ClayButtonWithIcon
                  displayType="unstyled"
                  spritemap={spritemap}
                  symbol="search"
                  type="submit"
                />
              </ClayInput.GroupInsetItem>
            </ClayInput.GroupItem>
          </ClayInput.Group>
        </ClayManagementToolbar.Search>
        <ClayManagementToolbar.ItemList>
          <ClayManagementToolbar.Item className="navbar-breakpoint-d-none">
            <ClayButton
              className="nav-link nav-link-monospaced"
              displayType="unstyled"
              onClick={() => setSearchMobile(true)}
            >
              <ClayIcon spritemap={spritemap} symbol="search" />
            </ClayButton>
          </ClayManagementToolbar.Item>
          <ClayManagementToolbar.Item>
            <ClayButton
              className="nav-link nav-link-monospaced"
              displayType="unstyled"
              onClick={() => {}}
            >
              <ClayIcon spritemap={spritemap} symbol="info-circle-open" />
            </ClayButton>
          </ClayManagementToolbar.Item>
          <ClayManagementToolbar.Item>
            <ClayDropDownWithItems
              items={viewTypes}
              spritemap={spritemap}
              trigger={
                <ClayButton
                  className="nav-link-monospaced nav-link"
                  displayType="unstyled"
                >
                  <ClayIcon
                    spritemap={spritemap}
                    symbol={viewTypeActive ? viewTypeActive.symbolLeft : ""}
                  />
                </ClayButton>
              }
            />
          </ClayManagementToolbar.Item>
          <ClayManagementToolbar.Item>
            <ClayButtonWithIcon
              className="nav-btn nav-btn-monospaced"
              spritemap={spritemap}
              symbol="plus"
            />
          </ClayManagementToolbar.Item>
        </ClayManagementToolbar.ItemList>
      </ClayManagementToolbar>
      <ClayResultsBar>
        <ClayResultsBar.Item>
          <span className="component-text text-truncate-inline">
            <span className="text-truncate">
              {'2 results for "'}
              <strong>{"Red"}</strong>
              {'"'}
            </span>
          </span>
        </ClayResultsBar.Item>
        <ClayResultsBar.Item expand>
          <ClayLabel
            className="component-label tbar-label"
            displayType="unstyled"
            spritemap={spritemap}
          >
            {"Filter"}
          </ClayLabel>
        </ClayResultsBar.Item>
        <ClayResultsBar.Item>
          <ClayButton
            className="component-link tbar-link"
            displayType="unstyled"
          >
            {"Clear"}
          </ClayButton>
        </ClayResultsBar.Item>
      </ClayResultsBar>
    </>
  );
};
render(<Component />);

We recommend that you review the use cases in the Storybook. Also, check our List Page Template on Storybook.

API

ManagementToolbar

Property	Type	Required	Default	Description
active	boolean		false	Flag that identifies when to show the active state of the component.

ItemList

Property	Type	Required	Default	Description
expand	boolean			Flag to indicate the Management Toolbar Item List should fit the width of the parent container.

Item

None.

ResultsBar

None.

ResultsBar.Item

Property	Type	Required	Default	Description
expand	boolean		false	Flag to indicate the Management Toolbar Results Bar Item should fit the width of the parent container.

Search

Property	Type	Required	Default	Description
onlySearch	boolean			Flag to indicate when there is only the search element within a Management Toolbar.
showMobile	boolean			Flag to control search visibility in mobile view.

Management toolbar is an extension of Toolbar. It is a combination of different components, including filters, orders, search, visualization select, and other actions that let users manage a dataset.

Light
Primary
Overlay
- Breakpoints
Only Search
- Always Open
- Collapses in Mobile
Search
Using Buttons

Check the Lexicon Management Toolbar Pattern for a more in-depth look at the motivations and proper usage of this component.

Collapsing the Search Input in mobile requires additional javascript to add and remove the show class on navbar-overlay-sm-down.

Bootstrap 4 doesn't support Dropdown Menu's with Popper.js positioning inside Navbars. They align them manually via CSS classes. See Dropdown Alignment.

Light

<nav class="management-bar management-bar-light navbar navbar-expand-md">
	...
</nav>

Primary

<nav class="management-bar management-bar-primary navbar navbar-expand-md">
	...
</nav>

Overlay

Use navbar-overlay navbar-overlay-up on any direct descendant of navbar to create an overlay on top of the navbar with alternate content, useful for expanding search bars or an alternate navbar that depends on some state in your application. Toggle the navbar-overlay's visibility by adding or removing the class show to navbar-overlay.

<nav class="management-bar management-bar-light navbar navbar-expand-md">
	<div class="container-fluid container-fluid-max-xl">
		<ul class="navbar-nav">
			<li class="nav-item">
				<div class="custom-control custom-checkbox">
					<label>
						<input class="custom-control-input" type="checkbox" />
						<span class="custom-control-label"></span>
					</label>
				</div>
			</li>
			<li class="dropdown nav-item">
				<a
					aria-expanded="false"
					aria-haspopup="true"
					class="dropdown-toggle nav-link nav-link-monospaced navbar-breakpoint-d-none"
					data-toggle="dropdown"
					href="#1"
					role="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-filter"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#filter"></use>
					</svg>
				</a>
				<a
					aria-expanded="false"
					aria-haspopup="true"
					class="dropdown-toggle nav-link navbar-breakpoint-d-block"
					data-toggle="dropdown"
					href="#1"
					role="button"
				>
					<span class="navbar-text-truncate">Filter and Order</span>
					<svg
						class="lexicon-icon lexicon-icon-caret-bottom"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#caret-bottom"></use>
					</svg>
				</a>
				<ul class="dropdown-menu">
					<li><a class="dropdown-item" href="#1">Action</a></li>
					<li>
						<a class="dropdown-item" href="#1">Another action</a>
					</li>
					<li>
						<a class="dropdown-item" href="#1"
							>Something else here</a
						>
					</li>
					<li class="dropdown-divider"></li>
					<li>
						<a class="dropdown-item" href="#1">Separated link</a>
					</li>
					<li class="dropdown-divider"></li>
					<li>
						<a class="dropdown-item" href="#1"
							>One more separated link</a
						>
					</li>
				</ul>
			</li>
			<li class="nav-item">
				<a
					class="nav-link nav-link-monospaced order-arrow-down-active"
					href="#1"
					role="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-order-arrow"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#order-arrow"></use>
					</svg>
				</a>
			</li>
		</ul>
		<div
			class="navbar-form navbar-form-autofit navbar-overlay navbar-overlay-sm-down"
		>
			<div class="container-fluid container-fluid-max-xl">
				<form role="search">
					<div class="input-group">
						<div class="input-group-item">
							<input
								class="form-control input-group-inset input-group-inset-after"
								placeholder="Search for..."
								type="text"
							/>
							<span
								class="input-group-inset-item input-group-inset-item-after"
							>
								<button class="btn btn-unstyled" type="submit">
									<svg
										class="lexicon-icon lexicon-icon-search"
										focusable="false"
										role="presentation"
									>
										<use
											href="/images/icons/icons.svg#search"
										></use>
									</svg>
								</button>
								<button
									class="btn btn-unstyled d-none"
									type="button"
								>
									<svg
										class="lexicon-icon lexicon-icon-times"
										focusable="false"
										role="presentation"
									>
										<use
											href="/images/icons/icons.svg#times"
										></use>
									</svg>
								</button>
							</span>
						</div>
					</div>
				</form>
			</div>
		</div>
		<ul class="navbar-nav">
			<li class="nav-item navbar-breakpoint-d-none">
				<a class="nav-link nav-link-monospaced" href="#1" role="button">
					<svg
						class="lexicon-icon lexicon-icon-search"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#search"></use>
					</svg>
				</a>
			</li>
			<li class="nav-item navbar-breakpoint-down-d-none">
				<a class="nav-link nav-link-monospaced" href="#1" role="button">
					<svg
						class="lexicon-icon lexicon-icon-view"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#view"></use>
					</svg>
				</a>
			</li>
			<li class="nav-item navbar-breakpoint-down-d-none">
				<a class="nav-link nav-link-monospaced" href="#1" role="button">
					<svg
						class="lexicon-icon lexicon-icon-table"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#table"></use>
					</svg>
				</a>
			</li>
			<li class="nav-item">
				<button
					class="btn btn-secondary clay-site-open-overlay-up nav-btn"
					type="button"
				>
					Open Overlay
				</button>
			</li>
		</ul>
		<div class="navbar-overlay navbar-overlay-up">
			<div class="container-fluid container-fluid-max-xl">
				<ul class="navbar-nav">
					<li class="nav-item">
						<div class="custom-control custom-checkbox">
							<label>
								<input
									class="custom-control-input"
									type="checkbox"
								/>
								<span class="custom-control-label"></span>
							</label>
						</div>
					</li>
					<li class="dropdown nav-item nav-item-shrink">
						<span class="navbar-text">3 of 25</span>
					</li>
					<li class="nav-item">
						<button class="btn btn-link nav-btn" type="button">
							Select All
						</button>
					</li>
				</ul>
				<ul class="navbar-nav">
					<li class="dropdown nav-item">
						<a
							aria-expanded="false"
							aria-haspopup="true"
							class="dropdown-toggle nav-link nav-link-monospaced"
							data-toggle="dropdown"
							href="#1"
							role="button"
						>
							<svg
								class="lexicon-icon lexicon-icon-ellipsis-v"
								focusable="false"
								role="presentation"
							>
								<use
									href="/images/icons/icons.svg#ellipsis-v"
								></use>
							</svg>
						</a>
						<ul class="dropdown-menu dropdown-menu-right">
							<li>
								<a class="dropdown-item" href="#1" role="button"
									>Delete</a
								>
							</li>
							<li>
								<a class="dropdown-item" href="#1" role="button"
									>Copy</a
								>
							</li>
							<li>
								<a class="dropdown-item" href="#1" role="button"
									>Info</a
								>
							</li>
						</ul>
					</li>
					<li class="nav-item">
						<button
							class="btn btn-secondary clay-site-close-overlay-up nav-btn"
							type="button"
						>
							Close Overlay
						</button>
					</li>
				</ul>
			</div>
		</div>
	</div>
</nav>

Breakpoints

navbar-overlay-up overlays the navbar at all screen widths. navbar-overlay-lg-down: 1199px and below navbar-overlay-md-down: 991px and below navbar-overlay-sm-down: 767px and below navbar-overlay-xs-down: 575px and below

<nav class="management-bar management-bar-light navbar navbar-expand-md">
	<div class="container-fluid container-fluid-max-xl">
		<ul class="navbar-nav">
			<li class="nav-item">
				<div class="custom-control custom-checkbox">
					<label>
						<input class="custom-control-input" type="checkbox" />
						<span class="custom-control-label"></span>
					</label>
				</div>
			</li>
			<li class="dropdown nav-item">
				<a
					aria-expanded="false"
					aria-haspopup="true"
					class="dropdown-toggle nav-link nav-link-monospaced navbar-breakpoint-d-none"
					data-toggle="dropdown"
					href="#1"
					role="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-filter"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#filter"></use>
					</svg>
				</a>
				<a
					aria-expanded="false"
					aria-haspopup="true"
					class="dropdown-toggle nav-link navbar-breakpoint-d-block"
					data-toggle="dropdown"
					href="#1"
					role="button"
				>
					<span class="navbar-text-truncate">Filter and Order</span>
					<svg
						class="lexicon-icon lexicon-icon-caret-bottom"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#caret-bottom"></use>
					</svg>
				</a>
				<ul class="dropdown-menu">
					<li><a class="dropdown-item" href="#1">Action</a></li>
					<li>
						<a class="dropdown-item" href="#1">Another action</a>
					</li>
					<li>
						<a class="dropdown-item" href="#1"
							>Something else here</a
						>
					</li>
					<li class="dropdown-divider"></li>
					<li>
						<a class="dropdown-item" href="#1">Separated link</a>
					</li>
					<li class="dropdown-divider"></li>
					<li>
						<a class="dropdown-item" href="#1"
							>One more separated link</a
						>
					</li>
				</ul>
			</li>
			<li class="nav-item">
				<a
					class="nav-link nav-link-monospaced order-arrow-down-active"
					href="#1"
					role="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-order-arrow"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#order-arrow"></use>
					</svg>
				</a>
			</li>
		</ul>
		<div
			class="navbar-form navbar-form-autofit navbar-overlay navbar-overlay-sm-down"
		>
			<div class="container-fluid container-fluid-max-xl">
				<form role="search">
					<div class="input-group">
						<div class="input-group-item">
							<input
								class="form-control input-group-inset input-group-inset-after"
								placeholder="Search for..."
								type="text"
							/>
							<span
								class="input-group-inset-item input-group-inset-item-after"
							>
								<button class="btn btn-unstyled" type="submit">
									<svg
										class="lexicon-icon lexicon-icon-search"
										focusable="false"
										role="presentation"
									>
										<use
											href="/images/icons/icons.svg#search"
										></use>
									</svg>
								</button>
								<button
									class="btn btn-unstyled d-none"
									type="button"
								>
									<svg
										class="lexicon-icon lexicon-icon-times"
										focusable="false"
										role="presentation"
									>
										<use
											href="/images/icons/icons.svg#times"
										></use>
									</svg>
								</button>
							</span>
						</div>
					</div>
				</form>
			</div>
		</div>
		<ul class="navbar-nav">
			<li class="nav-item navbar-breakpoint-d-none">
				<a class="nav-link nav-link-monospaced" href="#1" role="button">
					<svg
						class="lexicon-icon lexicon-icon-search"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#search"></use>
					</svg>
				</a>
			</li>
			<li class="nav-item navbar-breakpoint-down-d-none">
				<a class="nav-link nav-link-monospaced" href="#1" role="button">
					<svg
						class="lexicon-icon lexicon-icon-view"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#view"></use>
					</svg>
				</a>
			</li>
			<li class="nav-item navbar-breakpoint-down-d-none">
				<a class="nav-link nav-link-monospaced" href="#1" role="button">
					<svg
						class="lexicon-icon lexicon-icon-table"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#table"></use>
					</svg>
				</a>
			</li>
			<li class="nav-item">
				<button
					class="btn btn-secondary clay-site-open-overlay-up nav-btn"
					type="button"
				>
					Open Overlay
				</button>
			</li>
		</ul>
		<div class="navbar-overlay navbar-overlay-up">
			<div class="container-fluid container-fluid-max-xl">
				<ul class="navbar-nav">
					<li class="nav-item">
						<div class="custom-control custom-checkbox">
							<label>
								<input
									class="custom-control-input"
									type="checkbox"
								/>
								<span class="custom-control-label"></span>
							</label>
						</div>
					</li>
					<li class="dropdown nav-item nav-item-shrink">
						<span class="navbar-text">3 of 25</span>
					</li>
					<li class="nav-item">
						<button class="btn btn-link nav-btn" type="button">
							Select All
						</button>
					</li>
				</ul>
				<ul class="navbar-nav">
					<li class="dropdown nav-item">
						<a
							aria-expanded="false"
							aria-haspopup="true"
							class="dropdown-toggle nav-link nav-link-monospaced"
							data-toggle="dropdown"
							href="#1"
							role="button"
						>
							<svg
								class="lexicon-icon lexicon-icon-ellipsis-v"
								focusable="false"
								role="presentation"
							>
								<use
									href="/images/icons/icons.svg#ellipsis-v"
								></use>
							</svg>
						</a>
						<ul class="dropdown-menu dropdown-menu-right">
							<li>
								<a class="dropdown-item" href="#1" role="button"
									>Delete</a
								>
							</li>
							<li>
								<a class="dropdown-item" href="#1" role="button"
									>Copy</a
								>
							</li>
							<li>
								<a class="dropdown-item" href="#1" role="button"
									>Info</a
								>
							</li>
						</ul>
					</li>
					<li class="nav-item">
						<button
							class="btn btn-secondary clay-site-close-overlay-up nav-btn"
							type="button"
						>
							Close Overlay
						</button>
					</li>
				</ul>
			</div>
		</div>
	</div>
</nav>

Only Search

Always Open

<nav class="management-bar management-bar-light navbar navbar-expand-md">
	<div class="container-fluid container-fluid-max-xl">
		<div class="navbar-form navbar-form-autofit">
			<form role="search">
				<div class="input-group">
					<div class="input-group-item">
						<input
							class="form-control input-group-inset input-group-inset-after"
							placeholder="Search for..."
							type="text"
						/>
						<span
							class="input-group-inset-item input-group-inset-item-after"
						>
							<button class="btn btn-unstyled" type="submit">
								<svg
									class="lexicon-icon lexicon-icon-search"
									focusable="false"
									role="presentation"
								>
									<use
										href="/images/icons/icons.svg#search"
									></use>
								</svg>
							</button>
							<button
								class="btn btn-unstyled d-none"
								type="button"
							>
								<svg
									class="lexicon-icon lexicon-icon-times"
									focusable="false"
									role="presentation"
								>
									<use
										href="/images/icons/icons.svg#times"
									></use>
								</svg>
							</button>
						</span>
					</div>
				</div>
			</form>
		</div>
	</div>
</nav>

Collapses in Mobile

<nav class="management-bar management-bar-light navbar navbar-expand-md">
	<div class="container-fluid container-fluid-max-xl">
		<div
			class="navbar-form navbar-form-autofit navbar-overlay navbar-overlay-sm-down"
		>
			<div class="container-fluid container-fluid-max-xl">
				<form role="search">
					<div class="input-group">
						<div class="input-group-item">
							<input
								class="form-control input-group-inset input-group-inset-after"
								placeholder="Search for..."
								type="text"
							/>
							<span
								class="input-group-inset-item input-group-inset-item-after"
							>
								<button class="btn btn-unstyled" type="submit">
									<svg
										class="lexicon-icon lexicon-icon-search"
										focusable="false"
										role="presentation"
									>
										<use
											href="/images/icons/icons.svg#search"
										></use>
									</svg>
								</button>
								<button
									class="btn btn-unstyled d-none"
									type="button"
								>
									<svg
										class="lexicon-icon lexicon-icon-times"
										focusable="false"
										role="presentation"
									>
										<use
											href="/images/icons/icons.svg#times"
										></use>
									</svg>
								</button>
							</span>
						</div>
					</div>
				</form>
			</div>
		</div>
		<ul class="navbar-nav navbar-nav-last">
			<li class="nav-item navbar-breakpoint-d-none">
				<a class="nav-link nav-link-monospaced" href="#1" role="button">
					<svg
						class="lexicon-icon lexicon-icon-search"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#search"></use>
					</svg>
				</a>
			</li>
		</ul>
	</div>
</nav>

Search

Summary

<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>

Results

<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">
				<button
					class="btn btn-unstyled component-link tbar-link"
					type="button"
				>
					Clear
				</button>
			</li>
		</ul>
	</div>
</nav>

Results with Filter

6 results for "red"
Filter 1
Filter 2
Category: Label 3
clear

<nav class="tbar tbar-inline-md-down subnav-tbar subnav-tbar-primary">
	<div class="container-fluid container-fluid-max-xl">
		<ul class="tbar-nav tbar-nav-wrap">
			<li class="tbar-item">
				<div class="tbar-section">
					<span class="component-text text-truncate-inline">
						<span class="text-truncate"
							>6 results for "<strong>red</strong>"</span
						>
					</span>
				</div>
			</li>
			<li class="tbar-item">
				<div class="tbar-section">
					<span class="label component-label tbar-label">
						<span class="label-item label-item-expand">
							<div class="label-section">Filter 1</div>
						</span>
					</span>
				</div>
			</li>
			<li class="tbar-item">
				<div class="tbar-section">
					<span
						class="label label-dismissible component-label tbar-label"
					>
						<span class="label-item label-item-expand">
							<div class="label-section">Filter 2</div>
						</span>
						<span class="label-item label-item-after">
							<button
								class="btn close"
								aria-label="close"
								type="button"
							>
								<svg
									class="lexicon-icon lexicon-icon-times"
									focusable="false"
									role="presentation"
								>
									<title>times</title>
									<use
										href="/images/icons/icons.svg#times"
									></use>
								</svg>
							</button>
						</span>
					</span>
				</div>
			</li>
			<li class="tbar-item tbar-item-expand">
				<div class="tbar-section">
					<span
						class="label label-dismissible component-label tbar-label"
					>
						<span class="label-item label-item-expand">
							<div class="label-section">
								Category: <strong>Label 3</strong>
							</div>
						</span>
						<span class="label-item label-item-after">
							<button
								class="btn close"
								aria-label="close"
								type="button"
							>
								<svg
									class="lexicon-icon lexicon-icon-times"
									focusable="false"
									role="presentation"
								>
									<title>times</title>
									<use
										href="/images/icons/icons.svg#times"
									></use>
								</svg>
							</button>
						</span>
					</span>
				</div>
			</li>
			<li class="tbar-item">
				<div class="tbar-section">
					<a class=" component-link tbar-link" href="#clear">clear</a>
				</div>
			</li>
		</ul>
	</div>
</nav>

Using Buttons

<nav class="management-bar management-bar-primary navbar navbar-expand-md">
	<div class="container-fluid container-fluid-max-xl">
		<ul class="navbar-nav">
			<li class="nav-item">
				<div class="custom-control custom-checkbox">
					<label>
						<input class="custom-control-input" type="checkbox" />
						<span class="custom-control-label"></span>
					</label>
				</div>
			</li>
			<li class="dropdown nav-item">
				<button
					aria-expanded="false"
					aria-haspopup="true"
					class="btn btn-unstyled dropdown-toggle nav-link navbar-breakpoint-down-d-none"
					data-toggle="dropdown"
					type="button"
				>
					<span class="navbar-text-truncate">Filter and Order</span>
					<svg
						class="lexicon-icon lexicon-icon-caret-bottom"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#caret-bottom"></use>
					</svg>
				</button>
				<button
					aria-expanded="false"
					aria-haspopup="true"
					class="btn btn-unstyled dropdown-toggle nav-btn nav-btn-monospaced navbar-breakpoint-d-none"
					data-toggle="dropdown"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-filter"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#filter"></use>
					</svg>
				</button>
			</li>
			<li class="nav-item">
				<button
					class="btn btn-unstyled nav-btn nav-btn-monospaced order-arrow-down-active"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-order-arrow"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#order-arrow"></use>
					</svg>
				</button>
			</li>
		</ul>
		<div
			class="navbar-form navbar-form-autofit navbar-overlay navbar-overlay-sm-down"
		>
			<div class="container-fluid container-fluid-max-xl">
				<form role="search">
					<div class="input-group">
						<div class="input-group-item">
							<input
								class="form-control input-group-inset input-group-inset-after"
								placeholder="Search for..."
								type="text"
							/>
							<span
								class="input-group-inset-item input-group-inset-item-after"
							>
								<button class="btn btn-unstyled" type="submit">
									<svg
										class="lexicon-icon lexicon-icon-search"
										focusable="false"
										role="presentation"
									>
										<use
											href="/images/icons/icons.svg#search"
										></use>
									</svg>
								</button>
								<button
									class="btn btn-unstyled d-none"
									type="button"
								>
									<svg
										class="lexicon-icon lexicon-icon-times"
										focusable="false"
										role="presentation"
									>
										<use
											href="/images/icons/icons.svg#times"
										></use>
									</svg>
								</button>
							</span>
						</div>
					</div>
				</form>
			</div>
		</div>
		<ul class="navbar-nav">
			<li class="nav-item navbar-breakpoint-d-none">
				<button
					class="btn btn-unstyled nav-btn nav-btn-monospaced"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-search"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#search"></use>
					</svg>
				</button>
			</li>
			<li class="dropdown nav-item">
				<button
					aria-expanded="false"
					aria-haspopup="true"
					class="btn btn-unstyled dropdown-toggle nav-btn nav-btn-monospaced"
					data-toggle="dropdown"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-list"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#list"></use>
					</svg>
				</button>
			</li>
			<li class="nav-item">
				<button
					class="btn btn-secondary nav-btn nav-btn-monospaced navbar-breakpoint-down-d-none"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-plus"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#plus"></use>
					</svg>
				</button>
			</li>
			<li class="nav-item">
				<button
					class="btn btn-primary nav-btn nav-btn-monospaced navbar-breakpoint-down-d-none"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-plus"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#plus"></use>
					</svg>
				</button>
			</li>
		</ul>
	</div>
</nav>