diff --git a/.travis.yml b/.travis.yml
index a606097..57fc49a 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -8,8 +8,10 @@ os:
   - linux
 
 node_js:
-  - '8'
-  - '10'
+  - '14'
+
+install:
+  - npm install --legacy-peer-deps
 
 before_install:
   - npm install -g npm
diff --git a/src/Nav.jsx b/src/Nav.jsx
index 544ef05..f57758d 100644
--- a/src/Nav.jsx
+++ b/src/Nav.jsx
@@ -104,9 +104,10 @@ class Nav extends PureComponent {
                     { [styles.expanded]: expanded }
                 )}
             >
-                {React.Children.map(children, child => {
+                {React.Children.map(children, (child, key) => {
                     if (React.isValidElement(child) && this.isNavItem(child)) {
                         return this.renderNavItem(child, {
+                            tabIndex: child.props.tabIndexPosition || key,
                             onSelect,
                             selected: currentSelected,
                             expanded: (!!child.props.expanded) ||
diff --git a/src/NavItem.jsx b/src/NavItem.jsx
index 3386fe3..34ddbb5 100644
--- a/src/NavItem.jsx
+++ b/src/NavItem.jsx
@@ -56,7 +56,9 @@ class NavItem extends PureComponent {
         navitemClassName: PropTypes.string,
         navitemStyle: PropTypes.object,
         subnavClassName: PropTypes.string,
-        subnavStyle: PropTypes.object
+        subnavStyle: PropTypes.object,
+
+        tabIndex: PropTypes.string
     };
     static defaultProps = {
         componentClass: 'div',
@@ -86,6 +88,20 @@ class NavItem extends PureComponent {
         }
     };
 
+    preventDefault = (event) => {
+        event.preventDefault();
+    };
+
+    onKeyDown = (event) => {
+        const SPACEBAR_CODE = 32;
+        const ENTER_KEY = 13;
+        const isSpaceKey = event.keyCode === SPACEBAR_CODE;
+        const isEnterKey = event.keyCode === ENTER_KEY;
+        if (isSpaceKey || isEnterKey) {
+            event.target.click();
+        }
+    }
+
     render() {
         const {
             componentType, // eslint-disable-line
@@ -99,6 +115,7 @@ class NavItem extends PureComponent {
 
             // Nav props
             selected,
+            tabIndex,
 
             // Sub navigation item
             subnav,
@@ -141,25 +158,32 @@ class NavItem extends PureComponent {
                     })}
                     style={style}
                 >
-                    <div
-                        {...props}
-                        className={cx(navitemClassName, styles.navitem)}
-                        style={navitemStyle}
-                        disabled={disabled}
-                        role="menuitem"
-                        tabIndex="-1"
+                    <a
+                        href="#"
                         onClick={chainedFunction(
                             onClick,
-                            this.handleSelect
+                            this.handleSelect,
+                            this.preventDefault,
                         )}
+                        onKeyDown={this.onKeyDown}
+                        aria-label={navText.props.title}
                     >
-                        {navIcon &&
-                        <div {...navIconProps} className={cx(navIconClassName, styles.navicon)} />
-                        }
-                        {navText &&
-                        <div {...navTextProps} className={cx(navTextClassName, styles.navtext)} />
-                        }
-                    </div>
+                        <div
+                            {...props}
+                            className={cx(navitemClassName, styles.navitem)}
+                            style={navitemStyle}
+                            disabled={disabled}
+                            role="menuitem"
+                            tabIndex="-1"
+                        >
+                            {navIcon &&
+                            <div {...navIconProps} className={cx(navIconClassName, styles.navicon)} />
+                            }
+                            {navText &&
+                            <div {...navTextProps} className={cx(navTextClassName, styles.navtext)} />
+                            }
+                        </div>
+                    </a>
                 </Component>
             );
         }
@@ -208,26 +232,37 @@ class NavItem extends PureComponent {
                 })}
                 style={style}
             >
-                <div
-                    {...props}
-                    className={cx(navitemClassName, styles.navitem)}
-                    style={navitemStyle}
-                    disabled={disabled}
-                    role="menuitem"
-                    tabIndex="-1"
+                <a
+                    href="#"
                     onClick={chainedFunction(
                         onClick,
-                        (navItems.length === 0) ? this.handleSelect : noop
+                        this.handleSelect,
+                        this.preventDefault,
                     )}
+                    onKeyDown={this.onKeyDown}
+                    aria-label={navText.props.title}
                 >
-                    {navIcon &&
-                    <div {...navIconProps} className={cx(navIconClassName, styles.navicon)} />
-                    }
-                    {navText &&
-                    <div {...navTextProps} className={cx(navTextClassName, styles.navtext)} />
-                    }
-                    {others}
-                </div>
+                    <div
+                        {...props}
+                        className={cx(navitemClassName, styles.navitem)}
+                        style={navitemStyle}
+                        disabled={disabled}
+                        role="menuitem"
+                        tabIndex={tabIndex}
+                        onClick={chainedFunction(
+                            onClick,
+                            (navItems.length === 0) ? this.handleSelect : noop
+                        )}
+                    >
+                        {navIcon &&
+                        <div {...navIconProps} className={cx(navIconClassName, styles.navicon)} />
+                        }
+                        {navText &&
+                        <div {...navTextProps} className={cx(navTextClassName, styles.navtext)} />
+                        }
+                        {others}
+                    </div>
+                </a>
                 {(navItems.length > 0) &&
                     <div
                         role="menu"
diff --git a/src/sidenav-navitem.styl b/src/sidenav-navitem.styl
index 969ffac..65c5c61 100644
--- a/src/sidenav-navitem.styl
+++ b/src/sidenav-navitem.styl
@@ -2,49 +2,49 @@
     clear: both;
     position: relative;
 
-    &.highlighted > .navitem {
+    &.highlighted > a > .navitem {
         cursor: default;
     }
 
-    &:hover > .navitem::after {
+    &:hover > a > .navitem::after {
         background: #fff;
         opacity: .15;
     }
 
-    &.highlighted > .navitem::after,
+    &.highlighted > a > .navitem::after,
     &:hover.highlighted > .navitem::after {
         background: #000;
         opacity: .2;
     }
 
-    &.highlighted.expanded > .navitem::after,
-    &:hover.highlighted.expanded > .navitem::after {
+    &.highlighted.expanded > a > .navitem::after,
+    &:hover.highlighted.expanded > a > .navitem::after {
         background: #000;
         opacity: .25;
     }
 
-    &.highlighted.selected.expanded > .navitem::after,
-    &:hover.highlighted.selected.expanded > .navitem::after {
+    &.highlighted.selected.expanded > a > .navitem::after,
+    &:hover.highlighted.selected.expanded > a > .navitem::after {
         background: #000;
         opacity: .2;
     }
 
-    &:hover > .navitem .navicon,
-    &.highlighted > .navitem .navicon {
+    &:hover > a > .navitem .navicon,
+    &.highlighted > a > .navitem .navicon {
         opacity: 1;
     }
 
-    &:hover > .navitem .navicon,
-    &:hover > .navitem .navtext,
-    &.highlighted > .navitem .navicon,
-    &.highlighted > .navitem .navtext {
+    &:hover > a > .navitem .navicon,
+    &:hover > a > .navitem .navtext,
+    &.highlighted > a > .navitem .navicon,
+    &.highlighted > a > .navitem .navtext {
         color: #fff;
         > * {
             color: #fff;
         }
     }
 
-    > .navitem {
+    > a > .navitem {
         position: relative;
         display: block;
         line-height: 50px;
@@ -73,15 +73,15 @@
         }
     }
 
-    > .navitem .navicon,
-    > .navitem .navtext {
+    > a > .navitem .navicon,
+    > a > .navitem .navtext {
         color: #f9dcdd;
         > * {
             color: #f9dcdd;
         }
     }
 
-    > .navitem .navicon {
+    > a > .navitem .navicon {
         display: block;
         float: left;
         width: 64px;
@@ -96,7 +96,7 @@
         text-align: center;
     }
 
-    > .navitem .navicon + .navtext {
+    > a > .navitem .navicon + .navtext {
         width: 0;
         visibility: hidden;
         opacity: 0;