diff --git a/src/navbar/navbar-items.tsx b/src/navbar/navbar-items.tsx
index 4fb58eafc..319298265 100644
--- a/src/navbar/navbar-items.tsx
+++ b/src/navbar/navbar-items.tsx
@@ -130,7 +130,11 @@ export const NavbarItems = <T,>({
                                 {...options}
                             >
                                 <LinkLabel>{children}</LinkLabel>
-                                {selected && <LinkIndicator />}
+                                {selected && (
+                                    <LinkIndicator
+                                        data-testid={`${testId}-indicator`}
+                                    />
+                                )}
                                 {mobile && item.subMenu && (
                                     <LinkIconContainer>
                                         <ExpandCollapseButton
diff --git a/src/navbar/navbar.tsx b/src/navbar/navbar.tsx
index 48b0d2cd4..aaaee553c 100644
--- a/src/navbar/navbar.tsx
+++ b/src/navbar/navbar.tsx
@@ -104,6 +104,29 @@ const Component = <T,>(
         );
     };
 
+    const hasUncollapsibleActionButtons = () => {
+        if (actionButtons.mobile) {
+            const hasUncollapsibleItems = actionButtons.mobile.some(
+                (actionButton) => {
+                    return actionButton.uncollapsible;
+                }
+            );
+
+            if (hasUncollapsibleItems) return true;
+        }
+
+        if (actionButtons.desktop) {
+            const hasUncollapsibleItems = actionButtons.desktop.some(
+                (actionButton) => {
+                    return actionButton.uncollapsible;
+                }
+            );
+
+            if (hasUncollapsibleItems) return true;
+        }
+        return false;
+    };
+
     // =============================================================================
     // EVENT HANDLER
     // =============================================================================
@@ -228,6 +251,27 @@ const Component = <T,>(
         </NavBrandContainer>
     );
 
+    const renderMobileMenuButton = () => {
+        if (
+            (items.mobile && items.mobile.length > 0) ||
+            (items.desktop && items.desktop.length > 0) ||
+            (actionButtons && !hasUncollapsibleActionButtons())
+        ) {
+            return (
+                <MobileMenuButton
+                    aria-label="Open nav menu"
+                    data-testid="button__mobile-menu"
+                    onClick={handleMobileMenuButtonClick}
+                    focusHighlight={false}
+                >
+                    <MobileMenuIcon />
+                </MobileMenuButton>
+            );
+        }
+
+        return null;
+    };
+
     const renderNavbar = () => {
         return (
             <Layout.Content stretch={isStretch}>
@@ -244,14 +288,7 @@ const Component = <T,>(
                                 actionButtons={actionButtons}
                                 onActionButtonClick={handleActionButtonClick}
                             />
-                            <MobileMenuButton
-                                aria-label="Open nav menu"
-                                data-testid="button__mobile-menu"
-                                onClick={handleMobileMenuButtonClick}
-                                focusHighlight={false}
-                            >
-                                <MobileMenuIcon />
-                            </MobileMenuButton>
+                            {renderMobileMenuButton()}
                         </NavElementsContainer>
                     )}
                 </Nav>
diff --git a/stories/navbar/props-table.tsx b/stories/navbar/props-table.tsx
index cdc73437f..0d265c868 100644
--- a/stories/navbar/props-table.tsx
+++ b/stories/navbar/props-table.tsx
@@ -262,8 +262,13 @@ const DATA: ApiTableSectionProps[] = [
             },
             {
                 name: "uncollapsible",
-                description:
-                    "Specifies if the action button should collapse in mobile viewports",
+                description: (
+                    <>
+                        If specified, the item will remain on the{" "}
+                        <code>Navbar</code> and not be collapsed to the drawer
+                        in mobile viewports
+                    </>
+                ),
                 propTypes: ["boolean"],
             },
         ],
diff --git a/tests/navbar/navbar.spec.tsx b/tests/navbar/navbar.spec.tsx
new file mode 100644
index 000000000..65efaeb41
--- /dev/null
+++ b/tests/navbar/navbar.spec.tsx
@@ -0,0 +1,163 @@
+import { render } from "@testing-library/react";
+import { Navbar } from "src/navbar";
+
+describe("Navbar", () => {
+    describe("Basic functions", () => {
+        it("should render the items (desktop and mobile) if specified", () => {
+            const rendered = render(
+                <Navbar
+                    items={{
+                        desktop: MOCK_ITEMS,
+                        mobile: MOCK_ITEMS,
+                    }}
+                />
+            );
+
+            const { getByTestId } = rendered;
+
+            expect(getByTestId("link__1")).toBeInTheDocument();
+            expect(getByTestId("link__2")).toBeInTheDocument();
+            expect(getByTestId("link__mobile-1")).toBeInTheDocument();
+            expect(getByTestId("link__mobile-2")).toBeInTheDocument();
+        });
+
+        it("should render the mobile items even if mobile items are not specified", () => {
+            const rendered = render(<Navbar items={{ desktop: MOCK_ITEMS }} />);
+
+            const { getByTestId } = rendered;
+
+            expect(getByTestId("link__1")).toBeInTheDocument();
+            expect(getByTestId("link__2")).toBeInTheDocument();
+            expect(getByTestId("link__mobile-1")).toBeInTheDocument();
+            expect(getByTestId("link__mobile-2")).toBeInTheDocument();
+        });
+
+        it("should render the indicator on the correct item when clicked", () => {
+            const rendered = render(
+                <Navbar
+                    items={{
+                        desktop: MOCK_ITEMS,
+                    }}
+                    selectedId="first"
+                />
+            );
+
+            const { getByTestId } = rendered;
+            expect(getByTestId("link__1-indicator")).toBeInTheDocument();
+        });
+
+        it("should render the primary brand", () => {
+            const rendered = render(<Navbar items={{ desktop: MOCK_ITEMS }} />);
+
+            const { getByTestId } = rendered;
+            expect(getByTestId("main__brand")).toBeInTheDocument();
+        });
+
+        it("should render the secondary brand if specified", () => {
+            const rendered = render(
+                <Navbar
+                    items={{
+                        desktop: MOCK_ITEMS,
+                    }}
+                    resources={{
+                        secondary: {
+                            brandName: "Another",
+                            logoSrc:
+                                "https://assets.life.gov.sg/lifesg/logo-lifesg.svg",
+                        },
+                    }}
+                />
+            );
+
+            const { getByTestId } = rendered;
+            expect(getByTestId("main__brand-secondary")).toBeInTheDocument();
+        });
+
+        it("should render the mobile menu button if there are items specified", () => {
+            const rendered = render(<Navbar items={{ desktop: MOCK_ITEMS }} />);
+
+            const { getByTestId } = rendered;
+            expect(getByTestId("button__mobile-menu")).toBeInTheDocument();
+        });
+
+        it("should not render the links and mobile menu button if there no items are specified", () => {
+            const rendered = render(<Navbar items={{ desktop: [] }} />);
+
+            const { queryByTestId } = rendered;
+            expect(queryByTestId("link__1")).not.toBeInTheDocument();
+            expect(
+                queryByTestId("button__mobile-menu")
+            ).not.toBeInTheDocument();
+        });
+
+        it("should not render the links and mobile menu button if hideNavElements is set to true", () => {
+            const rendered = render(
+                <Navbar items={{ desktop: MOCK_ITEMS }} hideNavElements />
+            );
+
+            const { queryByTestId } = rendered;
+            expect(queryByTestId("link__1")).not.toBeInTheDocument();
+            expect(
+                queryByTestId("button__mobile-menu")
+            ).not.toBeInTheDocument();
+        });
+
+        it("should render the mobile menu items if no items are specified but there are action items specified", () => {
+            const rendered = render(
+                <Navbar
+                    items={{ desktop: [] }}
+                    actionButtons={{
+                        desktop: [
+                            {
+                                type: "button",
+                                args: {
+                                    children: "Test",
+                                },
+                            },
+                        ],
+                    }}
+                />
+            );
+
+            const { getByTestId } = rendered;
+            expect(getByTestId("button__mobile-menu")).toBeInTheDocument();
+        });
+
+        it("should not render the mobile menu items if no items are specified the action items are uncollapsible", () => {
+            const rendered = render(
+                <Navbar
+                    items={{ desktop: [] }}
+                    actionButtons={{
+                        desktop: [
+                            {
+                                type: "button",
+                                args: {
+                                    children: "Test",
+                                },
+                                uncollapsible: true,
+                            },
+                        ],
+                    }}
+                />
+            );
+
+            const { queryByTestId } = rendered;
+            expect(
+                queryByTestId("button__mobile-menu")
+            ).not.toBeInTheDocument();
+        });
+    });
+});
+// =============================================================================
+// MOCKS
+// =============================================================================
+const MOCK_ITEMS = [
+    {
+        id: "first",
+        children: "First",
+    },
+    {
+        id: "second",
+        children: "Second",
+    },
+];