diff --git a/ui/packages/consul-ui/app/components/peerings/provider/index.js b/ui/packages/consul-ui/app/components/peerings/provider/index.js
index 445e6d3129..7b00309d5e 100644
--- a/ui/packages/consul-ui/app/components/peerings/provider/index.js
+++ b/ui/packages/consul-ui/app/components/peerings/provider/index.js
@@ -1,31 +1,7 @@
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { hrefTo } from 'consul-ui/helpers/href-to';
 import { inject as service } from '@ember/service';
 import { getOwner } from '@ember/application';
-
-class PeerTab {
-  @tracked route;
-  @tracked label;
-  @tracked currentRouteName;
-
-  constructor(opts) {
-    const { currentRouteName, route, label, owner } = opts;
-
-    this.currentRouteName = currentRouteName;
-    this.owner = owner;
-    this.route = route;
-    this.label = label;
-  }
-
-  get selected() {
-    return this.currentRouteName === this.route;
-  }
-
-  get href() {
-    return hrefTo(this.owner, [this.route]);
-  }
-}
+import { Tab } from 'consul-ui/components/tab-nav';
 
 export default class PeeringsProvider extends Component {
   @service router;
@@ -56,8 +32,6 @@ export default class PeeringsProvider extends Component {
       ];
     }
 
-    return tabs.map(
-      (tab) => new PeerTab({ ...tab, currentRouteName: router.currentRouteName, owner })
-    );
+    return tabs.map((tab) => new Tab({ ...tab, currentRouteName: router.currentRouteName, owner }));
   }
 }
diff --git a/ui/packages/consul-ui/app/components/tab-nav/index.js b/ui/packages/consul-ui/app/components/tab-nav/index.js
index c2afccbdf2..af59df345d 100644
--- a/ui/packages/consul-ui/app/components/tab-nav/index.js
+++ b/ui/packages/consul-ui/app/components/tab-nav/index.js
@@ -1,4 +1,74 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { hrefTo } from 'consul-ui/helpers/href-to';
+
+/**
+ * A class that encapsulates the data abstraction that we expect the TabNav to
+ * be passed as `@items`.
+ *
+ * You can use this class when you want to create tab-nav from javascript.
+ *
+ * Instead of doing this in the template layer:
+ *
+ * ```handlebars
+ * <TabNav @items={{array
+ *   (hash
+ *     label="First Tab"
+ *     href=(href-to "some.route")
+ *     selected=(is-href "some.route")
+ *   )
+ *   (hash
+ *     label="Second Tab"
+ *     href=(href-to "some.route")
+ *     selected=(is-href "some.route")
+ *   )
+ * }}
+ * ```
+ *
+ * You can do the following in a js-file:
+ *
+ * ```javascript
+ * export default class WootComponent extends Component {
+ *   // ...
+ *   get tabs() {
+ *    const { router } = this;
+ *    const owner = getOwner(this);
+ *     return [
+ *       new Tab({
+ *         label: 'First Tab',
+ *         route: 'some.route',
+ *         currentRouteName: router.currentRouteName,
+ *         owner
+ *        }),
+ *       // ...
+ *     ];
+ *   }
+ * }
+ * ```
+ *
+ */
+export class Tab {
+  @tracked route;
+  @tracked label;
+  @tracked currentRouteName;
+
+  constructor(opts) {
+    const { currentRouteName, route, label, owner } = opts;
+
+    this.currentRouteName = currentRouteName;
+    this.owner = owner;
+    this.route = route;
+    this.label = label;
+  }
+
+  get selected() {
+    return this.currentRouteName === this.route;
+  }
+
+  get href() {
+    return hrefTo(this.owner, [this.route]);
+  }
+}
 
 function noop() {}
 export default class TabNav extends Component {