diff --git a/ui/StatusQ/sandbox/Controls.qml b/ui/StatusQ/sandbox/Controls.qml
index d81b177377..1341ff6727 100644
--- a/ui/StatusQ/sandbox/Controls.qml
+++ b/ui/StatusQ/sandbox/Controls.qml
@@ -50,4 +50,39 @@ GridLayout {
             y: parent.height / 2 - height / 2 + 4
         }
     }
+
+    StatusNavBarTabButton {
+        icon.name: "chat"
+        tooltip.text: "Chat"
+    }
+
+    StatusNavBarTabButton {
+        name: "#status"
+        tooltip.text: "Some Channel"
+    }
+
+    StatusNavBarTabButton {
+        icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        tooltip.text: "Some Community"
+    }
+
+    StatusNavBarTabButton {
+        icon.name: "profile"
+        tooltip.text: "Profile"
+        badge.value: 0
+        badge.visible: true
+        badge.anchors.leftMargin:-16
+    }
+
+    StatusNavBarTabButton {
+        icon.name: "chat"
+        tooltip.text: "Chat"
+        badge.value: 35
+    }
+
+    StatusNavBarTabButton {
+        icon.name: "chat"
+        tooltip.text: "Chat"
+        badge.value: 100
+    }
 }
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusNavBarTabButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusNavBarTabButton.qml
new file mode 100644
index 0000000000..7da608d307
--- /dev/null
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusNavBarTabButton.qml
@@ -0,0 +1,47 @@
+import QtQuick 2.13
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+    
+StatusIconTabButton {
+    id: statusNavBarTabButton 
+    property alias badge: statusBadge
+    property alias tooltip: statusTooltip
+    signal clicked(var mouse)
+
+    StatusToolTip {
+        id: statusTooltip
+        visible: statusNavBarTabButton.hovered && !!statusTooltip.text
+        delay: 50
+        orientation: StatusToolTip.Orientation.Right
+        x: statusNavBarTabButton.width + 16
+        y: statusNavBarTabButton.height / 2 - height / 2 + 4
+    }
+
+    StatusBadge {
+        id: statusBadge
+        visible: value > 0
+        anchors.top: parent.top
+        anchors.left: parent.right
+        anchors.leftMargin: {
+            if (statusBadge.value > 99) {
+                return -22
+            }
+            if (statusBadge.value > 9) {
+                return -21
+            }
+            return -18
+        }
+        anchors.topMargin: 4
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
+        onClicked: function (mouse) {
+            statusNavBarTabButton.checked = !statusNavBarTabButton.checked
+            statusNavBarTabButton.clicked(mouse)
+        }
+    }
+}
+
diff --git a/ui/StatusQ/src/StatusQ/Controls/qmldir b/ui/StatusQ/src/StatusQ/Controls/qmldir
index b15886762c..196583b3d3 100644
--- a/ui/StatusQ/src/StatusQ/Controls/qmldir
+++ b/ui/StatusQ/src/StatusQ/Controls/qmldir
@@ -1,5 +1,6 @@
 module StatusQ.Controls
 
 StatusIconTabButton 0.1 StatusIconTabButton.qml
+StatusNavBarTabButton 0.1 StatusNavBarTabButton.qml
 StatusToolTip 0.1 StatusToolTip.qml