diff --git a/docs/_includes/layout-templates/app.html.njk b/docs/_includes/layout-templates/app.html.njk
index 576d751ea..8adc14ba1 100644
--- a/docs/_includes/layout-templates/app.html.njk
+++ b/docs/_includes/layout-templates/app.html.njk
@@ -21,7 +21,7 @@
 
       <wa-divider></wa-divider>
 
-      <wa-nav-item href="#" active>
+      <wa-nav-item href="#" current="page">
         <wa-icon name="house-door" slot="prefix"></wa-icon>
         Home
       </wa-nav-item>
diff --git a/docs/pages/components/nav-item.md b/docs/pages/components/nav-item.md
index 8524773b8..79d540bc3 100644
--- a/docs/pages/components/nav-item.md
+++ b/docs/pages/components/nav-item.md
@@ -104,11 +104,11 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 ### Active nav item
 
-Set a `<wa-nav-item>` to active using the `active` boolean attribute. Doing so will
-map to `aria-current="page"` under the hood.
+Set a `<wa-nav-item>` to active using the `current` string attribute. Doing so will
+map to `current="page"` under the hood.
 
 ```html:preview
-<wa-nav-item href="#" active>
+<wa-nav-item href="#" current="page">
   Active Nav Item
 </wa-nav-item>
 ```
@@ -120,7 +120,7 @@ import WaNavItem from '@shoelace-style/shoelace/dist/react/nav-item';
 
 export default () => {
   return (
-    <WaNavItem href="#" active>
+    <WaNavItem href="#" current="page">
       Active Nav Item
     </WaNavItem>
   )
diff --git a/src/components/nav-item/nav-item.component.ts b/src/components/nav-item/nav-item.component.ts
index 2666292d7..1e06586f7 100644
--- a/src/components/nav-item/nav-item.component.ts
+++ b/src/components/nav-item/nav-item.component.ts
@@ -32,13 +32,13 @@ export default class WaNavItem extends WebAwesomeElement {
   private readonly localize = new LocalizeController(this);
 
   /** maps to the underlying `<a>`'s href */
-  @property() href = '';
+  @property({ reflect: true }) href = '';
 
-  /** maps to aria-current="page" */
-  @property({ type: Boolean, reflect: true }) active: boolean = false;
+  /** maps to aria-current="<current>". Generally this value will either be "page", "true", or "false" */
+  @property({ reflect: true }) current:  "page" | "step" | "location" | "date" | "time" | "true" | "false" = "false"
 
   /** Tells the browser where to open the link. Only used when `href` is present. */
-  @property() target: '_blank' | '_parent' | '_self' | '_top';
+  @property({ reflect: true }) target: '_blank' | '_parent' | '_self' | '_top';
 
   /**
    * When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the
@@ -46,10 +46,10 @@ export default class WaNavItem extends WebAwesomeElement {
    * specific tab/window, this will prevent that from working correctly. You can remove or change the default value by
    * setting the attribute to an empty string or a value of your choice, respectively.
    */
-  @property() rel = 'noreferrer noopener';
+   @property({ reflect: true }) rel = 'noreferrer noopener';
 
   /** Tells the browser to download the linked file as this filename. Only used when `href` is present. */
-  @property() download?: string;
+  @property({ reflect: true }) download?: string;
 
   /**
    * The text to display in the summary of the `<wa-details>` element when the nav item is expandable.
@@ -76,14 +76,15 @@ export default class WaNavItem extends WebAwesomeElement {
 
   render() {
     const isRtl = this.localize.dir() === 'rtl';
+    const isActive = this.current && this.current !== "false"
     return html`
       <div
         class=${classMap({
           base: true,
-          "base--active": this.active,
+          "base--active": isActive,
         })}
         role="listitem"
-        aria-current=${this.active && !this.expandable ? 'page' : 'false'}
+        aria-current=${this.expandable ? "false" : this.current}
       >
         ${when(
           this.expandable,