diff --git a/src/framework/ui/topNavigation/topNavigation.component.tsx b/src/framework/ui/topNavigation/topNavigation.component.tsx
index 719ec9eda..cea7c192e 100644
--- a/src/framework/ui/topNavigation/topNavigation.component.tsx
+++ b/src/framework/ui/topNavigation/topNavigation.component.tsx
@@ -214,6 +214,7 @@ export class TopNavigationComponent extends React.Component<TopNavigationProps>
     return React.Children.map(source, (element: TopNavigationActionElement, index: number) => {
       return React.cloneElement(element, {
         key: index,
+        appearance: this.props.appearance,
       });
     });
   }
diff --git a/src/playground/src/ui/screen/topNavigation/type.tsx b/src/playground/src/ui/screen/topNavigation/type.tsx
index 05940d6a7..4ab3b1fc4 100644
--- a/src/playground/src/ui/screen/topNavigation/type.tsx
+++ b/src/playground/src/ui/screen/topNavigation/type.tsx
@@ -92,6 +92,14 @@ export const topNavigationShowcase: ComponentShowcase = {
 };
 
 export const topNavigationSettings: ComponentShowcaseSetting[] = [
+  {
+    propertyName: 'appearance',
+    value: 'default',
+  },
+  {
+    propertyName: 'appearance',
+    value: 'control',
+  },
   {
     propertyName: 'alignment',
     value: 'start',