diff --git a/packages/components/src/navigation/menu-item.js b/packages/components/src/navigation/menu-item.js
index 737156fb3eb70d..a20d2876c7707c 100644
--- a/packages/components/src/navigation/menu-item.js
+++ b/packages/components/src/navigation/menu-item.js
@@ -12,11 +12,12 @@ import { Icon, chevronRight } from '@wordpress/icons';
* Internal dependencies
*/
import Button from '../button';
-import { MenuItemUI } from './styles/navigation-styles';
+import { MenuItemUI, BadgeUI } from './styles/navigation-styles';
import Text from '../text';
const NavigationMenuItem = ( props ) => {
const {
+ badge,
children,
hasChildren,
id,
@@ -43,6 +44,7 @@ const NavigationMenuItem = ( props ) => {
{ title }
+ { badge && { badge } }
{ hasChildren ? : null }
diff --git a/packages/components/src/navigation/stories/index.js b/packages/components/src/navigation/stories/index.js
index c18d0a6e7e2e73..afdd8ce43cc139 100644
--- a/packages/components/src/navigation/stories/index.js
+++ b/packages/components/src/navigation/stories/index.js
@@ -28,11 +28,13 @@ const data = [
{
title: 'Category',
id: 'item-3',
+ badge: '2',
},
{
title: 'Child 1',
id: 'child-1',
parent: 'item-3',
+ badge: '1',
},
{
title: 'Child 2',
diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js
index b20663d920ad04..12b8520cef26f8 100644
--- a/packages/components/src/navigation/styles/navigation-styles.js
+++ b/packages/components/src/navigation/styles/navigation-styles.js
@@ -3,6 +3,11 @@
*/
import styled from '@emotion/styled';
+/**
+ * Internal dependencies
+ */
+import { LIGHT_GRAY } from '../../utils/colors-values';
+
export const Root = styled.div`
width: 100%;
`;
@@ -22,3 +27,11 @@ export const MenuItemUI = styled.li`
border-bottom: 2px solid var( --wp-admin-theme-color );
}
`;
+
+export const BadgeUI = styled.span`
+ margin-left: 8px;
+ display: inline-flex;
+ padding: 4px 12px;
+ border-radius: 2px;
+ background-color: ${ LIGHT_GRAY[ 300 ] };
+`;