diff --git a/docs/images/desktop_header.png b/docs/images/desktop_header.png
new file mode 100644
index 0000000000..a97be14530
Binary files /dev/null and b/docs/images/desktop_header.png differ
diff --git a/docs/images/mobile_main_menu.png b/docs/images/mobile_main_menu.png
new file mode 100644
index 0000000000..16503961df
Binary files /dev/null and b/docs/images/mobile_main_menu.png differ
diff --git a/docs/images/mobile_user_menu.png b/docs/images/mobile_user_menu.png
new file mode 100644
index 0000000000..7235f63fb5
Binary files /dev/null and b/docs/images/mobile_user_menu.png differ
diff --git a/docs/using_custom_header.rst b/docs/using_custom_header.rst
new file mode 100644
index 0000000000..091a15f1f6
--- /dev/null
+++ b/docs/using_custom_header.rst
@@ -0,0 +1,119 @@
+.. title:: Custom Header Component Documentation
+
+Custom Header Component
+=======================
+
+Overview
+--------
+
+The ``Header`` component is used to display a header with a provided ``logo``, ``mainMenuItems``,
+``secondaryMenuItems``, and ``userMenuItems`` props. If props are provided, the component will use them; otherwise,
+If any of the props ``(logo, mainMenuItems, secondaryMenuItems, userMenuItems)`` are not provided, default
+items are displayed. This component provides flexibility in customization, making it suitable for a wide
+range of applications.
+
+Props Details
+-------------
+
+The `Header` component accepts the following **optional** props for customization:
+
+``logo``
+*******
+
+The logo prop is an object containing `src`, `alt`, and `href` properties. If not passed, LOGO_URL from config will be used.
+It is displayed on the left of the header in the desktop screen and in the center of the header on the mobile screen.
+
+Example:
+::
+
+ {
+ src: 'path/to/logo.png',
+ alt: 'Logo Alt Text',
+ href: '/home'
+ }
+
+``mainMenuItems``
+*****************
+
+The main menu items is a list of menu items objects. On desktop screens, these items are displayed on the left, to the right of the logo icon and to the left of the secondary menu.
+On mobile screens, the main menu is displayed as a dropdown menu triggered by a hamburger icon. The main menu dropdown appears below the logo when opened.
+
+Example:
+::
+
+ [
+ { type: 'item', href: '/courses', content: 'Courses', isActive: true },
+ { type: 'item', href: '/programs', content: 'Programs' },
+ { type: 'item', href: '/discover', content: 'Discover New', disabled, true },
+ {
+ type: 'submenu',
+ content: 'Sub Menu Item',
+ submenuContent: [
+ '
'
+ ],
+ },
+ ]
+
+**Note:**
+
+- The ``type`` should be ``item`` or ``submenu``. If type is ``submenu``, it should contain ``submenuContent`` instead of ``href``.
+
+- If any item is to be disabled, we can pass optional ``disabled: true`` in that item object and
+
+- If any item is to be active, we can pass optional ``isActive: true`` in that item object
+
+secondaryMenuItems
+******************
+
+The secondary menu items has same structure as ``mainMenuItems``. On desktop screen, These items are displayed on the right of header just before the userMenu avatar and on mobile screen,
+these items are displayed below the mainMenu items in dropdown.
+
+Example:
+::
+
+ [
+ { type: 'item', href: '/help', content: 'Help' },
+ ]
+
+userMenuItems
+*************
+
+The user menu items is list of objects. On desktop screens, these items are displayed as a dropdown menu on the most right side of the header. The dropdown is opened by clicking on the avatar icon, which is typically located at the far right of the header.
+On mobile screens, the user menu is also displayed as a dropdown menu, appearing under the avatar icon.
+
+User Menu is list of objects. Each object represent a group in user menu. Each object contains the ``heading`` and
+list of menu items to be displayed in that group. Heading is optional and will be displayed only if passed. There can
+be multiple groups. For a normal user menu, we can pass single group with empty heading.
+
+Example:
+::
+
+ [
+ {
+ heading: '',
+ items: [
+ { type: 'item', href: '/profile', content: 'Profile' },
+ { type: 'item', href: '/logout', content: 'Logout' }
+ ]
+ },
+ ]
+
+Screenshots
+***********
+
+Desktop:
+
+.. image:: ./images/desktop_header.png
+
+Mobile:
+
+.. image:: ./images/mobile_main_menu.png
+.. image:: ./images/mobile_user_menu.png
+
+Some Important Notes
+--------------------
+
+- Intl formatted strings should be passed in content attribute.
+- Only menu items in the main menu can be disabled.
+- Menu items in the main menu and user menu can have ``isActive`` prop.
diff --git a/example/headersData.js b/example/headersData.js
new file mode 100644
index 0000000000..e22b5e6799
--- /dev/null
+++ b/example/headersData.js
@@ -0,0 +1,305 @@
+
+export const learnerHomeHeaderData = {
+ mainMenu: [
+ {
+ type: 'item',
+ href: `#`,
+ content: 'Courses',
+ },
+ {
+ type: 'item',
+ href: `#`,
+ content: 'Programs',
+ },
+ {
+ type: 'item',
+ href: `#`,
+ content: 'Discover New',
+ },
+ ],
+ secondaryMenu: [
+ {
+ type: 'item',
+ href: `#`,
+ content: 'Help',
+ },
+ ],
+ userMenu: [
+ {
+ heading: 'SWITCH DASHBOARD',
+ items: [
+ {
+ type: 'item',
+ href: `#`,
+ content: 'Personal',
+ isActive: true,
+ },
+ {
+ type: 'item',
+ href: `#`,
+ content: 'Enterprise Dashboard',
+ },
+ ],
+ },
+ {
+ heading: '',
+ items: [
+ {
+ type: 'item',
+ href: `#`,
+ content: 'Profile',
+ },
+ {
+ type: 'item',
+ href: `#`,
+ content: 'Account',
+ },
+ {
+ type: 'item',
+ href: `#`,
+ content: 'Order History',
+ },
+ ],
+ },
+ {
+ heading: '',
+ items: [
+ {
+ type: 'item',
+ href: `#`,
+ content: 'Sign Out',
+ },
+ ],
+ },
+ ]
+};
+
+export const publisherHeaderData = {
+ mainMenu: [
+ {
+ type: 'item',
+ href: `#`,
+ content: 'Open Courses',
+ disabled: true,
+ },
+ {
+ type: 'item',
+ href: `#`,
+ content: 'Executive Education',
+ },
+ {
+ type: 'item',
+ href: `#`,
+ content: 'Bootcamps',
+ },
+ ],
+ secondaryMenu: [],
+ userMenu: [
+ {
+ heading: '',
+ items: [
+ {
+ type: 'item',
+ href: `#`,
+ content: 'Sign Out',
+ },
+ ],
+ },
+ ]
+};
+
+
+export const supportToolsHeaderData = {
+ mainMenu: [
+ {
+ type: 'item',
+ content: 'Confluence',
+ href: '#',
+ },
+ {
+ type: 'item',
+ content: 'Support Tools',
+ href: '#',
+ },
+ {
+ type: 'submenu',
+ content: 'Escalations',
+ submenuContent: (
+ <>
+