diff --git a/awx/ui/client/lib/components/list/list-toolbar.directive.js b/awx/ui/client/lib/components/list/list-toolbar.directive.js
new file mode 100644
index 0000000000..57183e32af
--- /dev/null
+++ b/awx/ui/client/lib/components/list/list-toolbar.directive.js
@@ -0,0 +1,18 @@
+const templateUrl = require('~components/list/list-toolbar.partial.html');
+
+function atListToolbar () {
+    return {
+        restrict: 'E',
+        replace: true,
+        transclude: true,
+        templateUrl,
+        scope: {
+            onExpand: '=',
+            onCollapse: '=',
+            sortOnly: '=',
+            isCollapsed: '=',
+        }
+    };
+}
+
+export default atListToolbar;
diff --git a/awx/ui/client/lib/components/list/list-toolbar.partial.html b/awx/ui/client/lib/components/list/list-toolbar.partial.html
new file mode 100644
index 0000000000..4511be1760
--- /dev/null
+++ b/awx/ui/client/lib/components/list/list-toolbar.partial.html
@@ -0,0 +1,5 @@
+<div class="at-List-toolbar--attached">
+  <div ng-class="isCollapsed ? 'active' : ''" ng-if="!sortOnly" class="at-List-toolbar-item" ng-click="onCollapse()">Compact</div>
+  <div ng-class="!isCollapsed ? 'active' : ''" ng-if="!sortOnly" class="at-List-toolbar-item" ng-click="onExpand()">Expanded</div>
+  <div class="at-List-toolbar-item">Sort</div>
+</div>
\ No newline at end of file