diff --git a/packages/components/src/components/navigation-item/navigation-item.stories.ts b/packages/components/src/components/navigation-item/navigation-item.stories.ts
new file mode 100644
index 000000000..3acdf36d4
--- /dev/null
+++ b/packages/components/src/components/navigation-item/navigation-item.stories.ts
@@ -0,0 +1,411 @@
+import '../../solid-components';
+import { html } from 'lit-html';
+import { storybookDefaults, storybookHelpers, storybookTemplate } from '../../../scripts/storybook/helper';
+import { waitUntil } from '@open-wc/testing-helpers';
+import { withActions } from '@storybook/addon-actions/decorator';
+import type { ConstantDefinition } from '../../../scripts/storybook/helper';
+const { overrideArgs } = storybookHelpers('sd-navigation-item');
+const { argTypes, parameters } = storybookDefaults('sd-navigation-item');
+const { generateTemplate } = storybookTemplate('sd-navigation-item');
+
+// Reusable Constants
+const defaultSlotConstant: ConstantDefinition = {
+  type: 'slot',
+  name: 'default',
+  value: '<span>Navigation</span>'
+};
+
+const descriptionSlotConstant: ConstantDefinition = {
+  type: 'slot',
+  name: 'description',
+  value: '<p slot="description">Lorem ipsum dolor sit amet.</p>'
+};
+
+const childrenSlotConstant: ConstantDefinition = {
+  type: 'slot',
+  name: 'children',
+  value:
+    '<sd-navigation-item vertical indented slot="children">Sub Navigation 1</sd-navigation-item><sd-navigation-item vertical indented slot="children">Sub Navigation 2</sd-navigation-item><sd-navigation-item vertical indented slot="children">Sub Navigation 3</sd-navigation-item>'
+};
+
+// Stories
+export default {
+  title: 'Components/sd-navigation-item',
+  component: 'sd-navigation-item',
+  args: overrideArgs([{ type: 'slot', name: 'default', value: 'Navigation' }]),
+  argTypes,
+  parameters: { ...parameters },
+  decorators: [withActions] as any
+};
+
+/**
+ * The `sd-navigation-item` in its default state as a horizontally oriented button.
+ */
+
+export const Default = {
+  render: (args: any) => {
+    return generateTemplate({ args });
+  }
+};
+
+/**
+ * The `sd-navigation-item` using bold text.
+ */
+
+export const Bold = {
+  render: (args: any) =>
+    generateTemplate({
+      args,
+      axis: { x: { type: 'slot', name: 'default', values: ['Navigation', '<b>Navigation</b>'] } }
+    })
+};
+
+/**
+ * There are 3 variants determined by the `href` and `vertical` properties in addition to the `children` slot.  Each variant has 3 size options to define text size.
+ */
+
+export const Variants = {
+  name: 'Variant × Size',
+  parameters: {
+    controls: {
+      exclude: ['href', 'target', 'download', 'size', 'vertical', 'indented', 'relaxed', 'open', 'children']
+    }
+  },
+  render: (args: any) => {
+    return html`
+      ${generateTemplate({
+        axis: {
+          x: { type: 'attribute', name: 'vertical' },
+          y: { type: 'attribute', name: 'size' }
+        },
+        args,
+        options: {
+          title: 'Button'
+        }
+      })}
+      ${generateTemplate({
+        axis: {
+          x: { type: 'attribute', name: 'vertical' },
+          y: { type: 'attribute', name: 'size' }
+        },
+        args,
+        options: { title: 'Link (href="https://www.union-investment.de/")' },
+        constants: { type: 'attribute', name: 'href', value: 'https://www.union-investment.de/' }
+      })}
+      ${generateTemplate({
+        axis: {
+          x: { type: 'attribute', name: 'vertical', values: [true] },
+          y: { type: 'attribute', name: 'size', values: ['base'] }
+        },
+        args,
+        options: {
+          title: 'Accordion'
+        },
+        constants: [
+          childrenSlotConstant,
+          { type: 'attribute', name: 'vertical', value: true },
+          {
+            type: 'slot',
+            name: 'default',
+            value: '<div style="width: 245px; text-align: left;">Navigation</div>'
+          }
+        ]
+      })}
+    `;
+  }
+};
+
+/**
+ * The navigation element when `disabled` is true.
+ */
+
+export const Disabled = {
+  parameters: {
+    controls: { exclude: ['disabled', 'vertical', 'current'] }
+  },
+  render: (args: any) => {
+    return html`
+      ${generateTemplate({
+        axis: {
+          y: { type: 'attribute', name: 'current' }
+        },
+        options: {
+          title: 'Horizontal'
+        },
+        constants: [
+          { type: 'attribute', name: 'disabled', value: true },
+          { type: 'attribute', name: 'vertical', value: false },
+          descriptionSlotConstant
+        ],
+        args
+      })}
+      ${generateTemplate({
+        axis: {
+          x: { type: 'attribute', name: 'chevron' },
+          y: { type: 'attribute', name: 'current' }
+        },
+        options: {
+          title: 'Vertical'
+        },
+        constants: [
+          { type: 'attribute', name: 'disabled', value: true },
+          { type: 'attribute', name: 'vertical', value: true },
+          descriptionSlotConstant
+        ],
+        args
+      })}
+    `;
+  }
+};
+
+/**
+ * When `vertical` is false, `sd-navigation-item` will render as a `<button>` or link `<a>` if given an `href`.
+ * Horizontal variants have a reduced API and ignore the excluded properties.
+ */
+
+export const VerticalAndCurrent = {
+  name: 'Vertical × Current',
+  parameters: {
+    controls: {
+      exclude: [
+        'vertical',
+        'chevron',
+        'indented',
+        'relaxed',
+        'divider',
+        'open',
+        'current',
+        'description',
+        'children',
+        'sd-show',
+        'sd-hide'
+      ]
+    }
+  },
+  render: (args: any) => {
+    return html`
+      ${generateTemplate({
+        axis: {
+          x: { type: 'attribute', name: 'vertical' },
+          y: { type: 'attribute', name: 'current' }
+        },
+        args
+      })}
+    `;
+  }
+};
+
+/**
+ * Displays chevron property behaviors.  Vertical Button / Link variants show right facing chevron dependent on property.  Accordion variant always show up / down chevron to reflect open state.
+ */
+
+export const Chevron = {
+  parameters: { controls: { exclude: [] } },
+  render: (args: any) => {
+    return html`${['Button', 'Link', 'Accordion'].map(title => {
+      const constants: ConstantDefinition[] = [
+        { type: 'attribute', name: 'vertical', value: true },
+        { type: 'attribute', name: 'href', value: title === 'Link' ? 'https://www.union-investment.de/' : '' },
+        {
+          type: 'slot',
+          name: 'default',
+          value: '<div style="width: 245px; text-align: left;">Navigation</div>'
+        }
+      ];
+
+      if (title === 'Accordion') {
+        constants.push(childrenSlotConstant);
+      }
+
+      return generateTemplate({
+        args,
+        axis: {
+          y: { type: 'attribute', name: 'chevron' }
+        },
+        options: {
+          title
+        },
+        constants
+      });
+    })}`;
+  }
+};
+
+/**
+ * When `indented` is true, padding is added to the left side.  When `relaxed` is true, padding is added to both sides.
+ */
+
+export const IndentedRelaxed = {
+  name: 'Indented × Relaxed',
+  parameters: {
+    controls: {
+      exclude: ['vertical', 'chevron', 'indented', 'sd-show', 'sd-hide']
+    }
+  },
+  render: (args: any) => {
+    return html`
+      ${generateTemplate({
+        axis: {
+          x: { type: 'attribute', name: 'indented' },
+          y: { type: 'attribute', name: 'relaxed' }
+        },
+        constants: [
+          { type: 'attribute', name: 'divider', value: true },
+          { type: 'attribute', name: 'current', value: true },
+          { type: 'attribute', name: 'vertical', value: true },
+          { type: 'attribute', name: 'chevron', value: true }
+        ],
+        args
+      })}
+    `;
+  }
+};
+
+/**
+ * Shows available slots.  `description`is only used when `vertical`is true.
+ */
+
+export const Slots = {
+  parameters: {
+    controls: { exclude: [] }
+  },
+  render: (args: any) => {
+    return html`
+      ${['default', 'description', 'children'].map(slot =>
+        generateTemplate({
+          axis: {
+            x: {
+              type: 'slot',
+              name: slot,
+              title: 'slot=...',
+              values: [
+                {
+                  value:
+                    slot === 'default'
+                      ? `<slot-comp style="--slot-content: ''; --slot-height: 24px; --slot-width: 100px;"></slot-comp>`
+                      : `<slot-comp slot='${slot}' style="--slot-content: ''; --slot-height: 24px; --slot-width: ${
+                          slot === 'description' || slot === 'children' ? '100%' : '24px'
+                        }"></slot-comp>`,
+                  title: slot
+                }
+              ]
+            }
+          },
+          constants: [
+            { type: 'template', name: 'width', value: '<div style="width: 300px">%TEMPLATE%</div>' },
+            {
+              type: 'attribute',
+              name: 'vertical',
+              value: true
+            },
+            { type: 'attribute', name: 'chevron', value: true },
+            {
+              type: 'attribute',
+              name: 'open',
+              value: true
+            },
+            defaultSlotConstant,
+            descriptionSlotConstant
+          ],
+          args: overrideArgs({ type: 'slot', name: 'default', value: '' }, args)
+        })
+      )}
+    `;
+  }
+};
+
+/**
+ * Use the 'base', 'content', 'chevron', and 'description' part selectors to customize the navigation item.
+ */
+
+export const Parts = {
+  render: (args: any) => {
+    return generateTemplate({
+      axis: {
+        y: {
+          type: 'template',
+          name: 'sd-navigation-item::part(...){outline: solid 2px red}',
+          values: ['base', 'content', 'chevron', 'description', 'divider'].map(part => {
+            return {
+              title: part,
+              value: `<style>#part-${part} sd-navigation-item::part(${part}){outline: solid 2px red}</style><div id="part-${part}">%TEMPLATE%</div>`
+            };
+          })
+        }
+      },
+      constants: [
+        {
+          type: 'attribute',
+          name: 'vertical',
+          value: true
+        },
+        {
+          type: 'attribute',
+          name: 'divider',
+          value: true
+        },
+        {
+          type: 'attribute',
+          name: 'chevron',
+          value: true
+        },
+        {
+          type: 'slot',
+          name: 'icon-right',
+          value: '<sd-icon library="global-resources" name="system/picture" slot="icon-right"></sd-icon>'
+        },
+        {
+          type: 'slot',
+          name: 'icon-left',
+          value: '<sd-icon library="global-resources" name="system/picture" slot="icon-left"></sd-icon>'
+        },
+        {
+          type: 'slot',
+          name: 'main',
+          value: '<sd-badge slot="main">888</sd-badge>'
+        },
+        descriptionSlotConstant
+      ],
+      args
+    });
+  }
+};
+
+/**
+ * `sd-navigation-item` is fully accessibile via keyboard in all variants. Tab through the story to try each variant.
+ */
+
+export const Mouseless = {
+  render: (args: any) => {
+    return html`<div class="mouseless">
+      ${['Button', 'Link', 'Accordion'].map(title => {
+        const constants: ConstantDefinition[] = [
+          { type: 'attribute', name: 'vertical', value: true },
+          { type: 'attribute', name: 'chevron', value: true },
+          {
+            type: 'slot',
+            name: 'default',
+            value: '<div style="width: 245px; text-align: left;">Navigation</div>'
+          }
+        ];
+
+        if (title === 'Link')
+          constants.push({ type: 'attribute', name: 'href', value: 'https://www.union-investment.de/' });
+        if (title === 'Accordion') constants.push(childrenSlotConstant);
+
+        return generateTemplate({
+          args,
+          constants,
+          options: { title }
+        });
+      })}
+    </div>`;
+  },
+
+  play: async ({ canvasElement }: { canvasElement: HTMLUnknownElement }) => {
+    const el = canvasElement.querySelector('.mouseless sd-navigation-item');
+    await waitUntil(() => el?.shadowRoot?.querySelector('button'));
+
+    el?.shadowRoot?.querySelector('button')?.focus();
+  }
+};
diff --git a/packages/components/src/components/navigation-item/navigation-item.test.ts b/packages/components/src/components/navigation-item/navigation-item.test.ts
new file mode 100644
index 000000000..7947bb8ea
--- /dev/null
+++ b/packages/components/src/components/navigation-item/navigation-item.test.ts
@@ -0,0 +1,293 @@
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import sinon from 'sinon';
+import type SdNavigationItem from './navigation-item';
+
+const defaultSlot = 'Default Slot';
+const childrenSlot = html`<div slot="children">Children</div>`;
+const variants = {
+  button: {
+    default: html`<sd-navigation-item>${defaultSlot}</sd-navigation-item>`,
+    current: html`<sd-navigation-item current>${defaultSlot}</sd-navigation-item>`,
+    disabled: html`<sd-navigation-item disabled>${defaultSlot}</sd-navigation-item>`
+  },
+  link: {
+    default: html`<sd-navigation-item href="#">${defaultSlot}</sd-navigation-item>`,
+    current: html`<sd-navigation-item current href="#">${defaultSlot}</sd-navigation-item>`,
+    disabled: html`<sd-navigation-item disabled href="#">${defaultSlot}</sd-navigation-item>`,
+    children: html`<sd-navigation-item href="#">${defaultSlot}${childrenSlot}</sd-navigation-item>`
+  },
+  accordion: {
+    default: html`<sd-navigation-item>${defaultSlot}${childrenSlot}</sd-navigation-item>`,
+    current: html`<sd-navigation-item current>${defaultSlot}${childrenSlot}</sd-navigation-item>`,
+    disabled: html`<sd-navigation-item disabled>${defaultSlot}${childrenSlot}</sd-navigation-item>`
+  }
+};
+
+describe('<sd-navigation-item>', () => {
+  // Test default button variant
+  describe('by default', () => {
+    // Render
+    it('only renders a button element', async () => {
+      const el = await fixture<SdNavigationItem>(variants.button.default);
+
+      expect(el).to.exist;
+      expect(el.shadowRoot!.querySelector('a')).to.not.exist;
+      expect(el.shadowRoot!.querySelector('button')).to.exist;
+      expect(el.shadowRoot!.querySelector('summary')).to.not.exist;
+      expect(el.shadowRoot!.querySelector('details')).to.not.exist;
+    });
+
+    // Accessibility
+    it('passes accessibility test', async () => {
+      const el = await fixture<SdNavigationItem>(variants.button.default);
+      await expect(el).to.be.accessible();
+    });
+
+    it('adds aria-current: "page" to <a> when current is true', async () => {
+      const el = await fixture<SdNavigationItem>(variants.link.current);
+      const link = el.shadowRoot!.querySelector('a');
+      expect(link).attribute('aria-current', 'page');
+    });
+
+    // Events
+    describe('when disabled', () => {
+      it('passes accessibility test', async () => {
+        const el = await fixture<SdNavigationItem>(variants.button.disabled);
+        await expect(el).to.be.accessible();
+      });
+
+      it('adds aria-disabled', async () => {
+        const el = await fixture<SdNavigationItem>(variants.button.disabled);
+        const button = el.shadowRoot!.querySelector('button');
+        expect(button).attribute('aria-disabled');
+      });
+
+      it('should disable the native <button>', async () => {
+        const el = await fixture<SdNavigationItem>(variants.button.disabled);
+        expect(el.shadowRoot!.querySelector('button[disabled]')).to.exist;
+      });
+
+      it('should not emit any events when disabled', async () => {
+        const el = await fixture<SdNavigationItem>(variants.button.disabled);
+        const button = el.shadowRoot!.querySelector('button');
+        const focusHandler = sinon.spy();
+        const clickHandler = sinon.spy();
+
+        el.addEventListener('focus', focusHandler);
+        el.addEventListener('click', clickHandler);
+
+        // Trigger focus event
+        el.disabled = true; // Simulate focusing on the disabled element
+        el.focus();
+
+        // Wait for event handling
+        await el.updateComplete;
+
+        // Simulate a click on the disabled element
+        const clickEvent = new MouseEvent('click');
+        button!.dispatchEvent(clickEvent);
+
+        // Wait for event handling
+        await el.updateComplete;
+
+        expect(focusHandler.calledOnce).to.be.false;
+        expect(clickHandler.calledOnce).to.be.false;
+      });
+    });
+  });
+
+  // Test overriding link variant
+  describe('when given an "href" property', () => {
+    // Render
+    it('only renders an anchor element, regardless of children', async () => {
+      const el = await fixture<SdNavigationItem>(variants.link.children);
+
+      expect(el).to.exist;
+      expect(el.shadowRoot!.querySelector('a')).to.exist;
+      expect(el.shadowRoot!.querySelector('button')).to.not.exist;
+      expect(el.shadowRoot!.querySelector('summary')).to.not.exist;
+      expect(el.shadowRoot!.querySelector('details')).to.not.exist;
+    });
+
+    // Accessibility
+    it('passes accessibility test', async () => {
+      const el = await fixture<SdNavigationItem>(variants.link.default);
+      await expect(el).to.be.accessible();
+    });
+
+    it('adds aria-current: "page" to <a> when current is true', async () => {
+      const el = await fixture<SdNavigationItem>(variants.link.current);
+      const link = el.shadowRoot!.querySelector('a');
+      expect(link).attribute('aria-current', 'page');
+    });
+
+    // Events
+    it('should not emit any events when disabled', async () => {
+      const el = await fixture<SdNavigationItem>(variants.link.disabled);
+      const link = el.shadowRoot!.querySelector('a');
+      const focusHandler = sinon.spy();
+      const clickHandler = sinon.spy();
+
+      el.addEventListener('focus', focusHandler);
+      el.addEventListener('click', clickHandler);
+
+      // Trigger focus event
+      el.disabled = true; // Simulate focusing on the disabled element
+      el.focus();
+
+      // Wait for event handling
+      await el.updateComplete;
+
+      // Simulate a click on the disabled element
+      const clickEvent = new MouseEvent('click');
+      link!.dispatchEvent(clickEvent);
+
+      // Wait for event handling
+      await el.updateComplete;
+
+      expect(focusHandler.calledOnce).to.be.false;
+      expect(clickHandler.calledOnce).to.be.false;
+    });
+
+    describe('when disabled', () => {
+      it('passes accessibility test', async () => {
+        const el = await fixture<SdNavigationItem>(variants.link.disabled);
+        await expect(el).to.be.accessible();
+      });
+
+      it('adds aria-disabled', async () => {
+        const el = await fixture<SdNavigationItem>(variants.link.disabled);
+        const link = el.shadowRoot!.querySelector('a');
+        expect(link).attribute('aria-disabled');
+      });
+
+      it('should not disable the native <a>', async () => {
+        const el = await fixture<SdNavigationItem>(variants.link.disabled);
+        const link = el.shadowRoot!.querySelector('a');
+        expect(link).not.to.have.attribute('disabled');
+      });
+    });
+  });
+
+  // Test accordion variant
+  describe('when given a value for the "children" slot', () => {
+    // Render
+    it('only renders a details and summary element pair', async () => {
+      const el = await fixture<SdNavigationItem>(variants.accordion.default);
+
+      expect(el).to.exist;
+      expect(el.shadowRoot!.querySelector('a')).to.not.exist;
+      expect(el.shadowRoot!.querySelector('button')).to.not.exist;
+      expect(el.shadowRoot!.querySelector('summary')).to.exist;
+      expect(el.shadowRoot!.querySelector('details')).to.exist;
+    });
+
+    // Accessibility
+    it('passes accessibility test', async () => {
+      const el = await fixture<SdNavigationItem>(variants.accordion.default);
+      await expect(el).to.be.accessible();
+    });
+
+    it('adds aria-current: "page" to <summary> when current is true', async () => {
+      const el = await fixture<SdNavigationItem>(variants.accordion.current);
+      const summary = el.shadowRoot!.querySelector('summary');
+      expect(summary).attribute('aria-current', 'page');
+    });
+
+    it('adds aria-controls: "navigation-item-details" to <summary>', async () => {
+      const el = await fixture<SdNavigationItem>(variants.accordion.default);
+      const summary = el.shadowRoot!.querySelector('summary');
+      expect(summary).attribute('aria-controls', 'navigation-item-details');
+    });
+
+    // Events
+    it('emits "sd-show" event when clicking closed HTML details element summary', async () => {
+      const el = await fixture<SdNavigationItem>(variants.accordion.default);
+      const details = el.shadowRoot!.querySelector('details');
+      const summary = el.shadowRoot!.querySelector('summary');
+      const clickHandler = sinon.spy();
+
+      el.addEventListener('sd-show', clickHandler);
+
+      summary!.click();
+      await waitUntil(() => clickHandler.calledOnce);
+
+      expect(clickHandler).to.have.been.calledOnce;
+      expect(details).to.have.attribute('open');
+    });
+
+    it('emits "sd-hide" when clicking open HTML details element summary', async () => {
+      const el = await fixture<SdNavigationItem>(
+        html`<sd-navigation-item open>Default Slot ${childrenSlot}</sd-navigation-item>;`
+      );
+      const details = el.shadowRoot!.querySelector('details');
+      const summary = el.shadowRoot!.querySelector('summary');
+      const clickHandler = sinon.spy();
+
+      el.addEventListener('sd-hide', clickHandler);
+
+      summary!.click();
+      await waitUntil(() => clickHandler.calledOnce);
+
+      expect(clickHandler).to.have.been.calledOnce;
+      expect(details).to.not.have.attribute('open');
+    });
+
+    describe('when disabled', () => {
+      it('passes accessibility test', async () => {
+        const el = await fixture<SdNavigationItem>(variants.accordion.disabled);
+        await expect(el).to.be.accessible();
+      });
+
+      it('adds aria-disabled', async () => {
+        const el = await fixture<SdNavigationItem>(variants.accordion.disabled);
+        const summary = el.shadowRoot!.querySelector('summary');
+        expect(summary).attribute('aria-disabled');
+      });
+
+      it('should disable the native <summary> element', async () => {
+        const el = await fixture<SdNavigationItem>(variants.accordion.disabled);
+        const summary = el.shadowRoot!.querySelector('summary');
+        expect(summary).attribute('aria-disabled');
+      });
+
+      it('should not emit any events when disabled', async () => {
+        const el = await fixture<SdNavigationItem>(variants.accordion.disabled);
+        const summary = el.shadowRoot!.querySelector('summary');
+        const focusHandler = sinon.spy();
+        const clickHandler = sinon.spy();
+        const showHandler = sinon.spy();
+        const hideHandler = sinon.spy();
+
+        el.addEventListener('focus', focusHandler);
+        el.addEventListener('click', clickHandler);
+        el.addEventListener('sd-show', showHandler);
+        el.addEventListener('sd-hide', hideHandler);
+
+        // Trigger focus event
+        el.disabled = true; // Simulate focusing on the disabled element
+        el.focus();
+
+        // Wait for event handling
+        await el.updateComplete;
+
+        // Simulate a click on the disabled element
+        const clickEvent = new MouseEvent('click');
+        summary!.dispatchEvent(clickEvent);
+
+        // Wait for event handling
+        await el.updateComplete;
+
+        expect(focusHandler.calledOnce).to.be.false;
+        expect(clickHandler.calledOnce).to.be.false;
+        expect(showHandler.calledOnce).to.be.false;
+
+        // Simulate a second click on the disabled element
+        const clickAgainEvent = new MouseEvent('click');
+        summary!.dispatchEvent(clickAgainEvent);
+
+        expect(hideHandler.calledOnce).to.be.false;
+      });
+    });
+  });
+});
diff --git a/packages/components/src/components/navigation-item/navigation-item.ts b/packages/components/src/components/navigation-item/navigation-item.ts
new file mode 100644
index 000000000..3216aaaf1
--- /dev/null
+++ b/packages/components/src/components/navigation-item/navigation-item.ts
@@ -0,0 +1,255 @@
+import { css } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { HasSlotController } from '../../internal/slot';
+import { html, literal } from 'lit/static-html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { property } from 'lit/decorators.js';
+import componentStyles from '../../styles/component.styles';
+import cx from 'classix';
+import SolidElement from '../../internal/solid-element';
+
+/**
+ * @summary Flexible button / link component that can be used to quickly build navigations. Takes one of 3 forms: link (overrides all other if 'href' is provided), button (default), or accordion (if 'children' slot defined).
+ * @status experimental
+ * @since 1.12.0
+ *
+ * @dependency sd-divider
+ *
+ * @event sd-show - Emitted when the navigation item has has children, no href, and is clicked while HTML details are hidden.
+ * @event sd-hide - Emitted when the navigation item has has children, no href, and is clicked while HTML details are shown.
+ *
+ * @slot - The navigation item's label.
+ * @slot description - *Vertical only: Slot used to provide a description for the navigation item.
+ * @slot children - Slot used to provide nested child navigation elements. If provided, details and summary elements will be used. A chevron will be shown on the right side regardless of the chevron property.
+ *
+ * @csspart base - The component's base wrapper including children.
+ * @csspart content - The component's content excluding children.
+ * @csspart chevron - The container that wraps the chevron.
+ * @csspart description - The component's description area below its main content.
+ * @csspart divider - The component's optional top divider.
+ *
+ */
+@customElement('sd-navigation-item')
+export default class SdNavigationItem extends SolidElement {
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'description', 'children');
+
+  /** The navigation item's href target. If provided, the navigation item will use an anchor tag otherwise it will use a button tag. The 'children' slot and accordion behavior will be ignored if an 'href' is provided. */
+  @property({ reflect: true }) href = '';
+
+  /** Tells the browser where to open the link. Only used when `href` is defined. */
+  @property() target: '_blank' | '_parent' | '_self' | '_top';
+
+  /** Tells the browser to download the linked file as this filename. Only used when `href` is defined. */
+  @property() download?: string;
+
+  /** Indicates that the navigation item is currently selected. The aria-current attribute is set to "page" on the host if true. */
+  @property({ type: Boolean, reflect: true }) current = false;
+
+  /** Disables the navigation item. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /** The navigation item's font size. */
+  @property({ reflect: true }) size: 'base' | 'lg' | 'sm' = 'base';
+
+  /** The navigation item's orientation. If false, properties below this point are not used. */
+  @property({ type: Boolean, reflect: true }) vertical = false;
+
+  /** Appends a chevron to the right side of a navigation item. Only used if `vertical` is true. */
+  @property({ type: Boolean, reflect: true }) chevron = false;
+
+  /** Adds additional padding to navigation item's left side. Only used if `vertical` is true. */
+  @property({ type: Boolean, reflect: true }) indented = false;
+
+  /** Adds additional padding to navigation item's left and right sides. Only used if `vertical` is true. */
+  @property({ type: Boolean, reflect: true }) relaxed = false;
+
+  /** Adds additional padding to navigation item's left and right sides. Only used if `vertical` is true. */
+  @property({ type: Boolean, reflect: true }) divider = false;
+
+  /** Reflects HTML details element state and allows control from parent. Only used if `vertical` is true, no `href`is undefined, and `children` is defined. */
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  private isButton(): boolean {
+    return !this.href && !this.hasSlotController.test('children');
+  }
+
+  private isLink(): boolean {
+    return !!this.href;
+  }
+
+  private isAccordion(): boolean {
+    return !this.href && this.hasSlotController.test('children');
+  }
+
+  private handleClickButton(event: MouseEvent) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+
+  private handleClickSummary(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (!this.disabled) {
+      if (this.open) {
+        this.hideDetails();
+      } else {
+        this.showDetails();
+      }
+    }
+  }
+
+  private hideDetails() {
+    this.open = false;
+    this.emit('sd-hide', { cancelable: true });
+  }
+
+  private showDetails() {
+    this.open = true;
+    this.emit('sd-show', { cancelable: true });
+  }
+
+  private calculatePaddingX(): string {
+    if (this.relaxed && this.indented) return 'pl-8 pr-4';
+    if (this.relaxed) return 'px-4';
+    if (this.indented) return 'pl-4';
+    return '';
+  }
+
+  render() {
+    const isLink = this.isLink();
+    const isButton = this.isButton();
+    const isAccordion = this.isAccordion();
+
+    const slots = {
+      label: this.hasSlotController.test('[default]'),
+      main: this.hasSlotController.test('main'),
+      description: this.hasSlotController.test('description'),
+      children: this.hasSlotController.test('children')
+    };
+    const tag = isLink ? literal`a` : isAccordion ? literal`summary` : literal`button`;
+    const horizontalPaddingBottom = this.vertical ? 'pb-3' : 'pb-2';
+
+    /* eslint-disable lit/no-invalid-html */
+    /* eslint-disable lit/binding-positions */
+    const root = html`
+      <${tag}
+        part="base"
+        class=${cx(
+          'hover:bg-neutral-200 group transition-all min-h-[48px] cursor-pointer relative focus-visible:focus-outline',
+          { base: 'text-base', lg: 'text-lg', sm: 'text-[14px]' }[this.size],
+          this.disabled ? 'text-neutral-500 pointer-events-none' : 'text-primary',
+          isAccordion ? 'flex flex-col' : 'inline-block w-full',
+          this.divider && this.vertical && 'mt-[1px]',
+          this.vertical ? 'px-8' : 'px-4'
+        )}
+        aria-controls=${ifDefined(isAccordion ? 'navigation-item-details' : undefined)}
+        aria-current=${ifDefined(this.current ? 'page' : undefined)}
+        aria-disabled=${this.disabled}
+        ?disabled=${ifDefined(isButton ? this.disabled : undefined)}
+        href=${ifDefined(this.href || undefined)}
+        target=${ifDefined(isLink ? this.target : undefined)}
+        download=${ifDefined(isLink ? this.download : undefined)}
+        rel=${ifDefined(isLink && this.target ? 'noreferrer noopener' : undefined)}
+        role=${isLink ? 'link' : 'button'}
+        tabindex=${this.disabled ? '-1' : '0'}
+        @click=${isAccordion ? this.handleClickSummary : isButton ? this.handleClickButton : undefined}
+      >
+        <div class=${cx(
+          'absolute w-full left-0 top-0 pointer-events-none transition-all duration-150',
+          this.vertical
+            ? 'border-l-4 h-[calc(100%-8px)] top-1 group-hover:h-full group-hover:top-0'
+            : 'border-b-4 h-full',
+          this.current ? 'border-accent' : 'border-transparent',
+          this.disabled && 'border-neutral-500'
+        )}></div>
+        <span class=${cx(
+          'relative pt-3 inline-flex justify-between items-center',
+          isAccordion ? 'grow' : 'w-full',
+          slots['description'] ? 'pb-1' : horizontalPaddingBottom,
+          this.calculatePaddingX()
+        )}>
+          ${
+            this.divider && this.vertical
+              ? html`<sd-divider
+                  part="divider"
+                  class=${cx('w-full transition-all absolute -top-[1px] left-0', this.calculatePaddingX())}
+                ></sd-divider>`
+              : ''
+          }
+          <span class="inline-flex items-center flex-auto">
+            <slot part="content" class='inline'></slot>
+          </span>
+          ${
+            (this.chevron || slots['children']) && this.vertical
+              ? html`<sd-icon
+                  name="chevron-down"
+                  part="chevron"
+                  library="system"
+                  color="currentColor"
+                  class=${cx(
+                    'h-6 w-6 ml-2 transition-all',
+                    isAccordion ? (this.open ? 'rotate-180' : 'rotate-0') : 'rotate-[270deg]'
+                  )}
+                ></sd-icon>`
+              : ''
+          }
+        </span>
+        ${
+          slots['description'] && this.vertical
+            ? html`<slot
+                name="description"
+                part="description"
+                class=${cx(
+                  'inline-block text-sm text-left text-black',
+                  isAccordion ? 'grow' : 'w-full',
+                  horizontalPaddingBottom,
+                  this.calculatePaddingX()
+                )}
+              ></slot>`
+            : ''
+        }
+      </${tag}>
+    `;
+    /* eslint-enable lit/no-invalid-html */
+    /* eslint-enable lit/binding-positions */
+
+    return isAccordion
+      ? html`<details id="navigation-item-details" ?open=${this.open} class="relative flex">
+          ${root}<slot name="children"></slot>
+        </details>`
+      : html`${root}`;
+  }
+
+  /**
+   * Inherits Tailwindclasses and includes additional styling.
+   */
+  static styles = [
+    componentStyles,
+    SolidElement.styles,
+
+    css`
+      :host {
+        box-sizing: border-box;
+        position: relative;
+        display: inline-block;
+      }
+
+      :host([vertical]) {
+        display: block;
+      }
+
+      details summary::-webkit-details-marker {
+        display: none;
+      }
+    `
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sd-navigation-item': SdNavigationItem;
+  }
+}