diff --git a/apps/www/src/app/examples/page.tsx b/apps/www/src/app/examples/page.tsx
index 5eb06a1d6..58fde5848 100644
--- a/apps/www/src/app/examples/page.tsx
+++ b/apps/www/src/app/examples/page.tsx
@@ -14,6 +14,7 @@ import {
   IconButton,
   Indicator,
   InputField,
+  Navbar,
   Popover,
   RangePicker,
   Search,
@@ -153,6 +154,76 @@ const Page = () => {
             <!-- -->
             /* comment */ /* ---------- __ */`}</code>
 
+          {/* Navbar Examples */}
+          <Text
+            size='large'
+            weight='medium'
+            style={{ marginTop: '32px', marginBottom: '16px' }}
+          >
+            Navbar Examples
+          </Text>
+
+          <Flex direction='column' gap={4} style={{ maxWidth: '100%' }}>
+            <Flex direction='column' gap={2}>
+              <Text size='small'>Basic Navbar:</Text>
+              <Navbar>
+                <Navbar.Start>
+                  <Text size='regular' weight='medium'>
+                    Explore
+                  </Text>
+                </Navbar.Start>
+                <Navbar.End>
+                  <Search
+                    placeholder='Search an AOI'
+                    value={search1}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      setSearch1(e.target.value)
+                    }
+                    onClear={() => setSearch1('')}
+                    size='small'
+                    style={{ width: '200px' }}
+                  />
+                  <Button
+                    variant='outline'
+                    size='small'
+                    leadingIcon={<FilterIcon />}
+                  >
+                    Draw AOI
+                  </Button>
+                  <Button
+                    variant='outline'
+                    size='small'
+                    leadingIcon={<OrganizationIcon />}
+                  >
+                    Upload AOI
+                  </Button>
+                </Navbar.End>
+              </Navbar>
+            </Flex>
+
+            <Flex direction='column' gap={2}>
+              <Text size='small'>Sticky Navbar:</Text>
+              <Navbar sticky>
+                <Navbar.Start>
+                  <Text size='regular' weight='medium'>
+                    Sticky Navigation
+                  </Text>
+                </Navbar.Start>
+                <Navbar.End>
+                  <Button variant='ghost' size='small'>
+                    Home
+                  </Button>
+                  <Button variant='ghost' size='small'>
+                    About
+                  </Button>
+                  <Button variant='ghost' size='small'>
+                    Contact
+                  </Button>
+                </Navbar.End>
+              </Navbar>
+            </Flex>
+          </Flex>
+
           <Flex direction='column' gap={4} style={{ maxWidth: '550px' }}>
             <Search
               placeholder='Default large search'
@@ -1439,17 +1510,6 @@ const Page = () => {
                             <Text size='small'>
                               You can filter team members by:
                             </Text>
-                            <ul style={{ margin: 0, paddingLeft: '16px' }}>
-                              <li>
-                                <Text size='small'>Name</Text>
-                              </li>
-                              <li>
-                                <Text size='small'>Role</Text>
-                              </li>
-                              <li>
-                                <Text size='small'>Department</Text>
-                              </li>
-                            </ul>
                           </Flex>
                         </Popover.Content>
                       </Popover>
diff --git a/apps/www/src/content/docs/components/navbar/demo.ts b/apps/www/src/content/docs/components/navbar/demo.ts
new file mode 100644
index 000000000..99c61e1a3
--- /dev/null
+++ b/apps/www/src/content/docs/components/navbar/demo.ts
@@ -0,0 +1,137 @@
+'use client';
+
+export const preview = {
+  type: 'code',
+  code: `
+  <Navbar>
+    <Navbar.Start>
+      <Text size="regular" weight="medium">Explore</Text>
+    </Navbar.Start>
+    <Navbar.End>
+      <Search placeholder="Search an AOI" size="small" style={{ width: '200px' }} />
+      <Button variant="outline" size="small" color="neutral" leadingIcon={<FilterIcon />}>
+        Draw AOI
+      </Button>
+      <Button variant="outline" size="small" color="neutral" leadingIcon={<OrganizationIcon />}>
+        Upload AOI
+      </Button>
+    </Navbar.End>
+  </Navbar>`
+};
+
+export const stickyDemo = {
+  type: 'code',
+  tabs: [
+    {
+      name: 'Default',
+      code: `
+      <Navbar>
+        <Navbar.Start>
+          <Text size="regular" weight="medium">Navigation</Text>
+        </Navbar.Start>
+        <Navbar.End>
+          <Button variant="ghost" size="small">Home</Button>
+          <Button variant="ghost" size="small">About</Button>
+          <Button variant="ghost" size="small">Contact</Button>
+        </Navbar.End>
+      </Navbar>`
+    },
+    {
+      name: 'Sticky',
+      code: `
+      <Navbar sticky>
+        <Navbar.Start>
+          <Text size="regular" weight="medium">Navigation</Text>
+        </Navbar.Start>
+        <Navbar.End>
+          <Button variant="ghost" size="small">Home</Button>
+          <Button variant="ghost" size="small">About</Button>
+          <Button variant="ghost" size="small">Contact</Button>
+        </Navbar.End>
+      </Navbar>`
+    }
+  ]
+};
+
+export const sectionsDemo = {
+  type: 'code',
+  tabs: [
+    {
+      name: 'Start Only',
+      code: `
+      <Navbar>
+        <Navbar.Start>
+          <Text size="regular" weight="medium">Brand Name</Text>
+        </Navbar.Start>
+      </Navbar>`
+    },
+    {
+      name: 'End Only',
+      code: `
+      <Navbar>
+        <Navbar.End>
+          <Button variant="outline" size="small">Login</Button>
+          <Button size="small">Sign Up</Button>
+        </Navbar.End>
+      </Navbar>`
+    },
+    {
+      name: 'Both Sections',
+      code: `
+      <Navbar>
+        <Navbar.Start>
+          <Text size="regular" weight="medium">Explore</Text>
+        </Navbar.Start>
+        <Navbar.End>
+          <Search placeholder="Search..." size="small" style={{ width: '200px' }} />
+          <Button variant="outline" size="small">Action</Button>
+        </Navbar.End>
+      </Navbar>`
+    }
+  ]
+};
+
+export const accessibilityDemo = {
+  type: 'code',
+  tabs: [
+    {
+      name: 'Custom aria-label',
+      code: `
+      <Navbar aria-label="Primary navigation">
+        <Navbar.Start>
+          <Text size="regular" weight="medium">Brand</Text>
+        </Navbar.Start>
+        <Navbar.End>
+          <Button size="small">Menu</Button>
+        </Navbar.End>
+      </Navbar>`
+    },
+    {
+      name: 'With aria-labelledby',
+      code: `
+      <>
+        <Navbar aria-labelledby="nav-heading">
+          <Navbar.Start>
+            <Text size="regular" weight="medium">Brand</Text>
+          </Navbar.Start>
+          <Navbar.End>
+            <Button size="small">Menu</Button>
+          </Navbar.End>
+        </Navbar>
+      </>`
+    },
+    {
+      name: 'Section Labels',
+      code: `
+      <Navbar>
+        <Navbar.Start aria-label="Brand and navigation links">
+          <Text size="regular" weight="medium">Brand</Text>
+        </Navbar.Start>
+        <Navbar.End aria-label="User actions and settings">
+          <Button size="small">Settings</Button>
+          <Button size="small">Profile</Button>
+        </Navbar.End>
+      </Navbar>`
+    }
+  ]
+};
diff --git a/apps/www/src/content/docs/components/navbar/index.mdx b/apps/www/src/content/docs/components/navbar/index.mdx
new file mode 100644
index 000000000..25b754341
--- /dev/null
+++ b/apps/www/src/content/docs/components/navbar/index.mdx
@@ -0,0 +1,82 @@
+---
+title: Navbar
+description: A horizontal navigation bar component with flexible left and right sections for building site headers and navigation.
+---
+
+import {
+  preview,
+  stickyDemo,
+  sectionsDemo,
+  accessibilityDemo,
+} from "./demo.ts";
+
+<Demo data={preview} />
+
+## Usage
+
+```tsx
+import { Navbar } from "@raystack/apsara";
+```
+
+## Component Structure
+
+The Navbar component uses a composite pattern, providing modular sub-components for flexible navigation layouts:
+
+- `Navbar` - Root container that wraps the navigation bar
+- `Navbar.Start` - Left section container for brand, logo, or primary navigation
+- `Navbar.End` - Right section container for actions, search, or secondary navigation
+
+## Navbar Props
+
+<auto-type-table path="./props.ts" name="NavbarRootProps" />
+
+### Navbar.Start Props
+
+The start section is a container component that accepts all `div` props. It's commonly used for brand logos, primary navigation links, or page titles.
+
+<auto-type-table path="./props.ts" name="NavbarStartProps" />
+
+### Navbar.End Props
+
+The end section is a container component that accepts all `div` props. It's commonly used for search inputs, action buttons, user menus, or secondary navigation.
+
+<auto-type-table path="./props.ts" name="NavbarEndProps" />
+
+## Examples
+
+### Sticky Navigation
+
+The Navbar can be made sticky to remain visible at the top of the viewport when scrolling.
+
+<Demo data={stickyDemo} />
+
+### Section Layouts
+
+You can use either or both sections depending on your needs. The sections automatically position themselves with proper spacing.
+
+<Demo data={sectionsDemo} />
+
+### Accessibility
+
+The Navbar supports custom ARIA labels for better screen reader support. You can provide descriptive labels for the entire navbar or individual sections.
+
+<Demo data={accessibilityDemo} />
+
+## Accessibility
+
+The Navbar implements the following accessibility features:
+
+- Proper ARIA roles and attributes
+  - `role="navigation"` for the main navbar
+  - `role="group"` for Start and End sections when `aria-label` is provided
+  - Customizable `aria-label` and `aria-labelledby` support
+
+- Semantic HTML
+  - Uses `<nav>` element for proper navigation landmark
+  - Maintains proper heading hierarchy when using `aria-labelledby`
+
+- Screen reader support
+  - Meaningful labels for all sections
+  - Clear structure for assistive technologies
+  - Support for linking to visible headings via `aria-labelledby`
+
diff --git a/apps/www/src/content/docs/components/navbar/props.ts b/apps/www/src/content/docs/components/navbar/props.ts
new file mode 100644
index 000000000..cca5b6f97
--- /dev/null
+++ b/apps/www/src/content/docs/components/navbar/props.ts
@@ -0,0 +1,37 @@
+export interface NavbarRootProps {
+  /**
+   * Makes the navbar stick to the top of the viewport when scrolling.
+   * @default false
+   */
+  sticky?: boolean;
+
+  /**
+   * Accessible label for the navigation.
+   * Use this to provide a description of the navbar's purpose.
+   */
+  'aria-label'?: string;
+
+  /**
+   * ID of an element that labels the navigation. Use this when you have a visible heading
+   * that describes the navbar.
+   */
+  'aria-labelledby'?: string;
+}
+
+export interface NavbarStartProps {
+  /**
+   * Accessible label for the start section. Use this to describe the purpose
+   * of the content in the start section (e.g., "Brand and navigation links").
+   * When provided, the section will have `role="group"`.
+   */
+  'aria-label'?: string;
+}
+
+export interface NavbarEndProps {
+  /**
+   * Accessible label for the end section. Use this to describe the purpose
+   * of the content in the end section (e.g., "User actions and settings").
+   * When provided, the section will have `role="group"`.
+   */
+  'aria-label'?: string;
+}
diff --git a/packages/raystack/components/navbar/__tests__/navbar.test.tsx b/packages/raystack/components/navbar/__tests__/navbar.test.tsx
new file mode 100644
index 000000000..394504123
--- /dev/null
+++ b/packages/raystack/components/navbar/__tests__/navbar.test.tsx
@@ -0,0 +1,387 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Navbar } from '../navbar';
+import { NavbarRootProps } from '../navbar-root';
+import styles from '../navbar.module.css';
+
+const START_TEXT = 'Explore';
+const END_BUTTON_TEXT = 'Action';
+const TEST_ID = 'test-navbar';
+
+const BasicNavbar = ({
+  sticky = false,
+  children,
+  ...props
+}: NavbarRootProps) => (
+  <Navbar sticky={sticky} data-testid={TEST_ID} {...props}>
+    {children}
+  </Navbar>
+);
+
+describe('Navbar', () => {
+  describe('Basic Rendering', () => {
+    it('renders navbar with children', () => {
+      render(
+        <BasicNavbar>
+          <Navbar.Start>
+            <span>{START_TEXT}</span>
+          </Navbar.Start>
+          <Navbar.End>
+            <button>{END_BUTTON_TEXT}</button>
+          </Navbar.End>
+        </BasicNavbar>
+      );
+
+      expect(screen.getByText(START_TEXT)).toBeInTheDocument();
+      expect(screen.getByText(END_BUTTON_TEXT)).toBeInTheDocument();
+    });
+
+    it('renders as nav element', () => {
+      const { container } = render(<BasicNavbar />);
+
+      const nav = container.querySelector('nav');
+      expect(nav).toBeInTheDocument();
+    });
+
+    it('applies root styles', () => {
+      const { container } = render(<BasicNavbar />);
+
+      const navbar = container.querySelector(`.${styles.root}`);
+      expect(navbar).toBeInTheDocument();
+    });
+
+    it('has proper ARIA attributes', () => {
+      render(<BasicNavbar />);
+
+      const nav = screen.getByRole('navigation');
+      expect(nav).toBeInTheDocument();
+      expect(nav).toHaveAttribute('role', 'navigation');
+    });
+
+    it('supports custom aria-label', () => {
+      render(<BasicNavbar aria-label='Primary site navigation' />);
+
+      const nav = screen.getByRole('navigation');
+      expect(nav).toHaveAttribute('aria-label', 'Primary site navigation');
+    });
+
+    it('supports aria-labelledby', () => {
+      render(
+        <>
+          <h2 id='nav-heading'>Site Navigation</h2>
+          <BasicNavbar aria-labelledby='nav-heading' />
+        </>
+      );
+
+      const nav = screen.getByRole('navigation');
+      expect(nav).toHaveAttribute('aria-labelledby', 'nav-heading');
+      expect(nav).not.toHaveAttribute('aria-label');
+    });
+
+    it('supports both aria-label and aria-labelledby together', () => {
+      render(
+        <>
+          <h2 id='nav-heading'>Site Navigation</h2>
+          <BasicNavbar
+            aria-labelledby='nav-heading'
+            aria-label='Custom label'
+          />
+        </>
+      );
+
+      const nav = screen.getByRole('navigation');
+      expect(nav).toHaveAttribute('aria-labelledby', 'nav-heading');
+      expect(nav).toHaveAttribute('aria-label', 'Custom label');
+    });
+  });
+
+  describe('Sticky Functionality', () => {
+    it('applies sticky attribute when sticky is true', () => {
+      const { container } = render(<BasicNavbar sticky />);
+
+      const navbar = container.querySelector('[data-sticky="true"]');
+      expect(navbar).toBeInTheDocument();
+    });
+
+    it('does not apply sticky attribute when sticky is false', () => {
+      const { container } = render(<BasicNavbar sticky={false} />);
+
+      const navbar = container.querySelector('[data-sticky="true"]');
+      expect(navbar).not.toBeInTheDocument();
+    });
+
+    it('defaults to non-sticky', () => {
+      const { container } = render(<BasicNavbar />);
+
+      const navbar = container.querySelector('[data-sticky="true"]');
+      expect(navbar).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Navbar.Start', () => {
+    it('renders start section content', () => {
+      render(
+        <BasicNavbar>
+          <Navbar.Start>
+            <span>{START_TEXT}</span>
+          </Navbar.Start>
+        </BasicNavbar>
+      );
+
+      expect(screen.getByText(START_TEXT)).toBeInTheDocument();
+    });
+
+    it('supports aria-label for start section', () => {
+      render(
+        <BasicNavbar>
+          <Navbar.Start aria-label='Brand and navigation links'>
+            <span>{START_TEXT}</span>
+          </Navbar.Start>
+        </BasicNavbar>
+      );
+
+      const start = screen.getByRole('group', {
+        name: 'Brand and navigation links'
+      });
+      expect(start).toBeInTheDocument();
+    });
+
+    it('does not add role when aria-label is not provided', () => {
+      const { container } = render(
+        <BasicNavbar>
+          <Navbar.Start data-testid='start' />
+        </BasicNavbar>
+      );
+
+      const start = container.querySelector('[data-testid="start"]');
+      expect(start).not.toHaveAttribute('role');
+    });
+
+    it('applies start styles', () => {
+      const { container } = render(
+        <BasicNavbar>
+          <Navbar.Start data-testid='start-section' />
+        </BasicNavbar>
+      );
+
+      const start = container.querySelector(`.${styles.start}`);
+      expect(start).toBeInTheDocument();
+    });
+
+    it('forwards ref correctly', () => {
+      const ref = vi.fn();
+      render(
+        <BasicNavbar>
+          <Navbar.Start ref={ref} />
+        </BasicNavbar>
+      );
+      expect(ref).toHaveBeenCalled();
+    });
+
+    it('applies custom className', () => {
+      const { container } = render(
+        <BasicNavbar>
+          <Navbar.Start className='custom-start-class' />
+        </BasicNavbar>
+      );
+
+      const start = container.querySelector('.custom-start-class');
+      expect(start).toBeInTheDocument();
+    });
+
+    it('applies custom styles', () => {
+      render(
+        <BasicNavbar>
+          <Navbar.Start
+            style={{ backgroundColor: 'red', padding: '10px' }}
+            data-testid='start'
+          />
+        </BasicNavbar>
+      );
+
+      const start = screen.getByTestId('start');
+      expect(start).toBeInTheDocument();
+    });
+  });
+
+  describe('Navbar.End', () => {
+    it('renders end section content', () => {
+      render(
+        <BasicNavbar>
+          <Navbar.End>
+            <button>{END_BUTTON_TEXT}</button>
+          </Navbar.End>
+        </BasicNavbar>
+      );
+
+      expect(screen.getByText(END_BUTTON_TEXT)).toBeInTheDocument();
+    });
+
+    it('supports aria-label for end section', () => {
+      render(
+        <BasicNavbar>
+          <Navbar.End aria-label='User actions and settings'>
+            <button>{END_BUTTON_TEXT}</button>
+          </Navbar.End>
+        </BasicNavbar>
+      );
+
+      const end = screen.getByRole('group', {
+        name: 'User actions and settings'
+      });
+      expect(end).toBeInTheDocument();
+    });
+
+    it('does not add role when aria-label is not provided', () => {
+      const { container } = render(
+        <BasicNavbar>
+          <Navbar.End data-testid='end' />
+        </BasicNavbar>
+      );
+
+      const end = container.querySelector('[data-testid="end"]');
+      expect(end).not.toHaveAttribute('role');
+    });
+
+    it('applies end styles', () => {
+      const { container } = render(
+        <BasicNavbar>
+          <Navbar.End data-testid='end-section' />
+        </BasicNavbar>
+      );
+
+      const end = container.querySelector(`.${styles.end}`);
+      expect(end).toBeInTheDocument();
+    });
+
+    it('forwards ref correctly', () => {
+      const ref = vi.fn();
+      render(
+        <BasicNavbar>
+          <Navbar.End ref={ref} />
+        </BasicNavbar>
+      );
+      expect(ref).toHaveBeenCalled();
+    });
+
+    it('applies custom className', () => {
+      const { container } = render(
+        <BasicNavbar>
+          <Navbar.End className='custom-end-class' />
+        </BasicNavbar>
+      );
+
+      const end = container.querySelector('.custom-end-class');
+      expect(end).toBeInTheDocument();
+    });
+
+    it('applies custom styles', () => {
+      render(
+        <BasicNavbar>
+          <Navbar.End
+            style={{ backgroundColor: 'blue', padding: '10px' }}
+            data-testid='end'
+          />
+        </BasicNavbar>
+      );
+
+      const end = screen.getByTestId('end');
+      expect(end).toBeInTheDocument();
+    });
+  });
+
+  describe('Compound Component Structure', () => {
+    it('renders complete navbar with Start and End', () => {
+      render(
+        <BasicNavbar>
+          <Navbar.Start>
+            <span>{START_TEXT}</span>
+          </Navbar.Start>
+          <Navbar.End>
+            <button>{END_BUTTON_TEXT}</button>
+          </Navbar.End>
+        </BasicNavbar>
+      );
+
+      expect(screen.getByText(START_TEXT)).toBeInTheDocument();
+      expect(screen.getByText(END_BUTTON_TEXT)).toBeInTheDocument();
+    });
+
+    it('renders only Start section', () => {
+      render(
+        <BasicNavbar>
+          <Navbar.Start>
+            <span>{START_TEXT}</span>
+          </Navbar.Start>
+        </BasicNavbar>
+      );
+
+      expect(screen.getByText(START_TEXT)).toBeInTheDocument();
+    });
+
+    it('renders only End section', () => {
+      render(
+        <BasicNavbar>
+          <Navbar.End>
+            <button>{END_BUTTON_TEXT}</button>
+          </Navbar.End>
+        </BasicNavbar>
+      );
+
+      expect(screen.getByText(END_BUTTON_TEXT)).toBeInTheDocument();
+    });
+  });
+
+  describe('Custom Props', () => {
+    it('forwards ref to root', () => {
+      const ref = vi.fn();
+      render(<BasicNavbar ref={ref} />);
+      expect(ref).toHaveBeenCalled();
+    });
+
+    it('applies custom className to root', () => {
+      const { container } = render(<BasicNavbar className='custom-navbar' />);
+
+      const navbar = container.querySelector('.custom-navbar');
+      expect(navbar).toBeInTheDocument();
+    });
+
+    it('applies custom data attributes', () => {
+      render(<BasicNavbar data-custom='test-value' />);
+
+      const nav = screen.getByRole('navigation');
+      expect(nav).toHaveAttribute('data-custom', 'test-value');
+    });
+
+    it('applies custom id', () => {
+      render(<BasicNavbar id='my-navbar' />);
+
+      const nav = screen.getByRole('navigation');
+      expect(nav).toHaveAttribute('id', 'my-navbar');
+    });
+  });
+
+  describe('Container Layout', () => {
+    it('renders container with flex layout', () => {
+      const { container } = render(<BasicNavbar />);
+
+      const containerEl = container.querySelector(`.${styles.container}`);
+      expect(containerEl).toBeInTheDocument();
+    });
+
+    it('positions Start and End correctly', () => {
+      const { container } = render(
+        <BasicNavbar>
+          <Navbar.Start data-testid='start'>Start</Navbar.Start>
+          <Navbar.End data-testid='end'>End</Navbar.End>
+        </BasicNavbar>
+      );
+
+      const start = container.querySelector(`.${styles.start}`);
+      const end = container.querySelector(`.${styles.end}`);
+
+      expect(start).toBeInTheDocument();
+      expect(end).toBeInTheDocument();
+    });
+  });
+});
diff --git a/packages/raystack/components/navbar/index.tsx b/packages/raystack/components/navbar/index.tsx
new file mode 100644
index 000000000..ae99107e1
--- /dev/null
+++ b/packages/raystack/components/navbar/index.tsx
@@ -0,0 +1 @@
+export { Navbar } from './navbar';
diff --git a/packages/raystack/components/navbar/navbar-root.tsx b/packages/raystack/components/navbar/navbar-root.tsx
new file mode 100644
index 000000000..6700cd388
--- /dev/null
+++ b/packages/raystack/components/navbar/navbar-root.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { cx } from 'class-variance-authority';
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from 'react';
+import { Flex } from '../flex';
+import styles from './navbar.module.css';
+
+export interface NavbarRootProps extends ComponentPropsWithoutRef<'nav'> {
+  sticky?: boolean;
+}
+
+export const NavbarRoot = forwardRef<ComponentRef<'nav'>, NavbarRootProps>(
+  ({ className, sticky = false, children, ...props }, ref) => {
+    return (
+      <nav
+        ref={ref}
+        className={cx(styles.root, className)}
+        data-sticky={sticky}
+        role='navigation'
+        {...props}
+      >
+        <Flex align='center' justify='between' className={styles.container}>
+          {children}
+        </Flex>
+      </nav>
+    );
+  }
+);
+
+NavbarRoot.displayName = 'Navbar';
diff --git a/packages/raystack/components/navbar/navbar-sections.tsx b/packages/raystack/components/navbar/navbar-sections.tsx
new file mode 100644
index 000000000..74df29635
--- /dev/null
+++ b/packages/raystack/components/navbar/navbar-sections.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import { cx } from 'class-variance-authority';
+import { ComponentPropsWithoutRef, forwardRef } from 'react';
+import { Flex } from '../flex';
+import styles from './navbar.module.css';
+
+export interface NavbarStartProps
+  extends ComponentPropsWithoutRef<typeof Flex> {}
+
+export const NavbarStart = forwardRef<HTMLDivElement, NavbarStartProps>(
+  ({ className, children, 'aria-label': ariaLabel, ...props }, ref) => (
+    <Flex
+      ref={ref}
+      align='center'
+      gap={3}
+      className={cx(styles.start, className)}
+      role={ariaLabel ? 'group' : undefined}
+      aria-label={ariaLabel}
+      {...props}
+    >
+      {children}
+    </Flex>
+  )
+);
+
+NavbarStart.displayName = 'Navbar.Start';
+
+export interface NavbarEndProps extends ComponentPropsWithoutRef<typeof Flex> {}
+
+export const NavbarEnd = forwardRef<HTMLDivElement, NavbarEndProps>(
+  ({ className, children, 'aria-label': ariaLabel, ...props }, ref) => (
+    <Flex
+      ref={ref}
+      align='center'
+      gap={3}
+      className={cx(styles.end, className)}
+      role={ariaLabel ? 'group' : undefined}
+      aria-label={ariaLabel}
+      {...props}
+    >
+      {children}
+    </Flex>
+  )
+);
+
+NavbarEnd.displayName = 'Navbar.End';
diff --git a/packages/raystack/components/navbar/navbar.module.css b/packages/raystack/components/navbar/navbar.module.css
new file mode 100644
index 000000000..7062e0e31
--- /dev/null
+++ b/packages/raystack/components/navbar/navbar.module.css
@@ -0,0 +1,30 @@
+.root {
+  display: flex;
+  width: 100%;
+  padding: var(--rs-space-4) var(--rs-space-6);
+  background: var(--rs-color-background-base-primary);
+  border-bottom: 0.5px solid var(--rs-color-border-base-primary);
+  box-shadow: var(--rs-shadow-feather);
+  box-sizing: border-box;
+  min-height: 48px;
+}
+
+.root[data-sticky="true"] {
+  position: sticky;
+  top: 0;
+  z-index: var(--rs-z-index-portal);
+}
+
+.container {
+  width: 100%;
+  align-items: center;
+}
+
+.start {
+  flex: 0 0 auto;
+}
+
+.end {
+  flex: 0 0 auto;
+  margin-left: auto;
+}
diff --git a/packages/raystack/components/navbar/navbar.tsx b/packages/raystack/components/navbar/navbar.tsx
new file mode 100644
index 000000000..0277abcff
--- /dev/null
+++ b/packages/raystack/components/navbar/navbar.tsx
@@ -0,0 +1,9 @@
+'use client';
+
+import { NavbarRoot } from './navbar-root';
+import { NavbarEnd, NavbarStart } from './navbar-sections';
+
+export const Navbar = Object.assign(NavbarRoot, {
+  Start: NavbarStart,
+  End: NavbarEnd
+});
diff --git a/packages/raystack/index.tsx b/packages/raystack/index.tsx
index 7813f9f12..2c48fec64 100644
--- a/packages/raystack/index.tsx
+++ b/packages/raystack/index.tsx
@@ -38,6 +38,7 @@ export { InputField } from './components/input-field';
 export { Label } from './components/label';
 export { Link } from './components/link';
 export { List } from './components/list';
+export { Navbar } from './components/navbar';
 export { Popover } from './components/popover';
 export { Radio } from './components/radio';
 export { Search } from './components/search';