diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Navigation.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Navigation.tsx
index c0c2ad09d9..e2652a0d9c 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Navigation.tsx
+++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Navigation.tsx
@@ -16,6 +16,7 @@ type NavigationProps = {
   params?: { [key: string]: string };
   fields: Fields;
   handleClick: () => void;
+  relativeLevel: number;
 };
 
 const getNavigationText = function (props: NavigationProps): JSX.Element | string {
@@ -65,6 +66,7 @@ export const Default = (props: NavigationProps): JSX.Element => {
         key={`${key}${element.Id}`}
         fields={element}
         handleClick={() => handleToggleMenu(false)}
+        relativeLevel={1}
       />
     ));
   const styles =
@@ -107,12 +109,13 @@ const NavigationList = (props: NavigationProps) => {
         key={`${index}${element.Id}`}
         fields={element}
         handleClick={props.handleClick}
+        relativeLevel={props.relativeLevel + 1}
       />
     ));
   }
 
   return (
-    <li className={props.fields.Styles.join(' ')} key={props.fields.Id}>
+    <li className={props.fields.Styles.concat('rel-level' + props.relativeLevel).join(' ')} key={props.fields.Id}>
       <div className="navigation-title">
         <Link field={getLinkField(props)} title={title} onClick={props.handleClick}>
           {getNavigationText(props)}