4 files changed, 87 insertions, 0 deletions
diff --git a/src/components/molecules/nav/nav-item/index.ts b/src/components/molecules/nav/nav-item/index.ts
new file mode 100644
index 0000000..d6f1411
--- /dev/null
+++ b/src/components/molecules/nav/nav-item/index.ts
@@ -0,0 +1 @@
+export * from './nav-item';
diff --git a/src/components/molecules/nav/nav-item/nav-item.stories.tsx b/src/components/molecules/nav/nav-item/nav-item.stories.tsx
new file mode 100644
index 0000000..df736a4
--- /dev/null
+++ b/src/components/molecules/nav/nav-item/nav-item.stories.tsx
@@ -0,0 +1,37 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { NavLink } from '../nav-link';
+import { NavItem } from './nav-item';
+
+/**
+ * NavItem - Storybook Meta
+ */
+export default {
+  title: 'Molecules/Nav/NavItem',
+  component: NavItem,
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+      },
+      description: 'Define the nav item contents.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof NavItem>;
+
+const Template: ComponentStory<typeof NavItem> = (args) => (
+  <ul style={{ margin: 0, padding: 0 }}>
+    <NavItem {...args} />
+  </ul>
+);
+
+/**
+ * NavItem Stories - Default
+ */
+export const Default = Template.bind({});
+Default.args = {
+  children: <NavLink href="#example" label="Example" />,
+};
diff --git a/src/components/molecules/nav/nav-item/nav-item.test.tsx b/src/components/molecules/nav/nav-item/nav-item.test.tsx
new file mode 100644
index 0000000..a78b97b
--- /dev/null
+++ b/src/components/molecules/nav/nav-item/nav-item.test.tsx
@@ -0,0 +1,25 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import { NavLink } from '../nav-link';
+import { NavItem } from './nav-item';
+
+describe('NavItem', () => {
+  it('renders its children', () => {
+    const label = 'maxime';
+    const target = '#sunt';
+
+    render(
+      <ul>
+        <NavItem>
+          <NavLink href={target} label={label} />
+        </NavItem>
+      </ul>
+    );
+
+    expect(rtlScreen.getByRole('listitem')).toHaveTextContent(label);
+    expect(rtlScreen.getByRole('link', { name: label })).toHaveAttribute(
+      'href',
+      target
+    );
+  });
+});
diff --git a/src/components/molecules/nav/nav-item/nav-item.tsx b/src/components/molecules/nav/nav-item/nav-item.tsx
new file mode 100644
index 0000000..2e85043
--- /dev/null
+++ b/src/components/molecules/nav/nav-item/nav-item.tsx
@@ -0,0 +1,24 @@
+import {
+  type ForwardRefRenderFunction,
+  forwardRef,
+  type ReactNode,
+} from 'react';
+import { ListItem, type ListItemProps } from '../../../atoms';
+
+export type NavItemProps = Omit<ListItemProps, 'children' | 'hideMarker'> & {
+  /**
+   * The nav item contents.
+   */
+  children: ReactNode;
+};
+
+const NavItemWithRef: ForwardRefRenderFunction<HTMLLIElement, NavItemProps> = (
+  { children, ...props },
+  ref
+) => (
+  <ListItem {...props} hideMarker ref={ref}>
+    {children}
+  </ListItem>
+);
+
+export const NavItem = forwardRef(NavItemWithRef);