diff --git a/packages/fiori/bundle.esm.js b/packages/fiori/bundle.esm.js
index 79f932dca5ff..e00fed8c7b2f 100644
--- a/packages/fiori/bundle.esm.js
+++ b/packages/fiori/bundle.esm.js
@@ -7,6 +7,7 @@ import "./dist/Assets.js";
 import "./dist/features/CoPilotAnimation.js";
 
 // FIORI components
+import Bar from "./dist/Bar.js";
 import FlexibleColumnLayout from "./dist/FlexibleColumnLayout.js";
 import ProductSwitch from "./dist/ProductSwitch.js";
 import ProductSwitchItem from "./dist/ProductSwitchItem.js";
diff --git a/packages/fiori/src/Bar.hbs b/packages/fiori/src/Bar.hbs
new file mode 100644
index 000000000000..fe94038de5f6
--- /dev/null
+++ b/packages/fiori/src/Bar.hbs
@@ -0,0 +1,12 @@
+<div class="ui5-bar-root"
+	role="toolbar">
+	<div class="ui5-bar-content-container ui5-bar-startcontent-container">
+		<slot name="startContent"></slot>
+	</div>
+	<div class="ui5-bar-content-container ui5-bar-midcontent-container">
+		<slot name="middleContent"></slot>
+	</div>
+	<div class="ui5-bar-content-container ui5-bar-endcontent-container">
+		<slot name="endContent"></slot>
+	</div>
+</div>
\ No newline at end of file
diff --git a/packages/fiori/src/Bar.js b/packages/fiori/src/Bar.js
new file mode 100644
index 000000000000..072f1bccbdc0
--- /dev/null
+++ b/packages/fiori/src/Bar.js
@@ -0,0 +1,105 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import BarTemplate from "./generated/templates/BarTemplate.lit.js";
+import BarDesign from "./types/BarDesign.js";
+
+// Styles
+import BarCss from "./generated/themes/Bar.css.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-bar",
+	managedSlots: true,
+	properties: /** @lends sap.ui.webcomponents.main.Bar.prototype */ {
+		/**
+		 * Defines the <code>ui5-bar</code> design.
+		 * <br><br>
+		 * <b>Note:</b> Available options are "Header", "Subheader", "Footer", "FloatingFooter".
+		 *
+		 * @type {BarDesign}
+		 * @defaultvalue "Header"
+		 * @public
+		 */
+		design: {
+			type: BarDesign,
+			defaultValue: BarDesign.Header,
+		},
+	},
+	slots: /** @lends sap.ui.webcomponents.main.Bar.prototype */ {
+		/**
+		 * @type {HTMLElement[]}
+		 * @slot
+		 * @public
+		 */
+		startContent: {
+			type: HTMLElement,
+		},
+		/**
+		 * @type {HTMLElement[]}
+		 * @slot
+		 * @public
+		 */
+		middleContent: {
+			type: HTMLElement,
+		},
+		/**
+		 * @type {HTMLElement[]}
+		 * @slot
+		 * @public
+		 */
+		endContent: {
+			type: HTMLElement,
+		},
+	},
+	events: /** @lends sap.ui.webcomponents.main.Bar.prototype */ {
+		//
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The Bar component consists of three areas to hold its content. It has the capability to center content, such as a title, while having other components on the left and right side.
+ *
+ * <h3>Usage</h3>
+ * With the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.
+ *
+ * Note: Do not place a Bar inside another Bar or inside any bar-like component. Doing so causes unpredictable behavior.
+ *
+ * For the <code>ui5-bar</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @ui5/webcomponents/dist/Bar.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.Bar
+ * @extends UI5Element
+ * @tagname ui5-bar
+ * @public
+ * @since 1.0.0-rc.11
+ */
+class Bar extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get styles() {
+		return BarCss;
+	}
+
+	static get template() {
+		return BarTemplate;
+	}
+}
+
+Bar.define();
+
+export default Bar;
diff --git a/packages/fiori/src/themes/Bar.css b/packages/fiori/src/themes/Bar.css
new file mode 100644
index 000000000000..f667bcfd14df
--- /dev/null
+++ b/packages/fiori/src/themes/Bar.css
@@ -0,0 +1,62 @@
+:host {
+	background-color: var(--sapPageHeader_Background);
+	height: var(--_ui5_bar_base_height);
+	width: 100%;
+	box-shadow: inset 0 -0.0625rem var(--sapPageHeader_BorderColor);
+	display: block;
+}
+
+.ui5-bar-root {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: inherit;
+	width: inherit;
+	background-color: inherit;
+	box-shadow: inherit;
+	border-radius: inherit;
+}
+
+.ui5-bar-root .ui5-bar-startcontent-container {
+	padding-left: 0.5rem;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.ui5-bar-root .ui5-bar-endcontent-container {
+	padding-right: 0.5rem;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+.ui5-bar-root .ui5-bar-midcontent-container {
+	padding-left: 0.5rem;
+	padding-right: 0.5rem;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+:host([design="Footer"]){
+	background-color: var(--sapPageFooter_Background);
+	border-top: 0.0625rem solid var(--sapPageFooter_BorderColor);
+	box-shadow: none;
+}
+
+:host([design="Subheader"]){
+	height: var(--_ui5_bar_subheader_height);
+}
+
+:host([design="FloatingFooter"]){
+	border-radius: var(--sapElement_BorderCornerRadius);
+	background-color: var(--sapPageFooter_Background);
+	box-shadow: var(--sapContent_Shadow1);
+	border: none;
+}
+
+::slotted(*){
+	display: flex;
+	align-items: center;
+	margin: 0 0.25rem;
+}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/base/Bar-parameters.css b/packages/fiori/src/themes/base/Bar-parameters.css
new file mode 100644
index 000000000000..650444c159d7
--- /dev/null
+++ b/packages/fiori/src/themes/base/Bar-parameters.css
@@ -0,0 +1,11 @@
+:root {
+	--_ui5_bar_base_height: 2.75rem;
+	--_ui5_bar_subheader_height: 3rem;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+	--_ui5_bar_base_height: 2.5rem;
+	--_ui5_bar_subheader_height: 2.25rem;
+}
diff --git a/packages/fiori/src/themes/sap_belize/parameters-bundle.css b/packages/fiori/src/themes/sap_belize/parameters-bundle.css
index 1e0df06b3368..7a84153d93ed 100644
--- a/packages/fiori/src/themes/sap_belize/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_belize/parameters-bundle.css
@@ -1,3 +1,4 @@
+@import "../base/Bar-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/ProductSwitchItem-parameters.css";
 @import "../base/TimelineItem-parameters.css";
diff --git a/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css
index f9c691ab648f..fbaff801a388 100644
--- a/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css
@@ -1,3 +1,4 @@
+@import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "./ProductSwitchItem-parameters.css";
 @import "./TimelineItem-parameters.css";
diff --git a/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css
index f9c691ab648f..fbaff801a388 100644
--- a/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css
@@ -1,3 +1,4 @@
+@import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "./ProductSwitchItem-parameters.css";
 @import "./TimelineItem-parameters.css";
diff --git a/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css
index af6f8305d001..3dd6cee7a3f7 100644
--- a/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css
@@ -1,3 +1,4 @@
+@import "../base/Bar-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/ProductSwitchItem-parameters.css";
 @import "../base/TimelineItem-parameters.css";
diff --git a/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css
index 5c31b2dd8d8c..f2af38abec1e 100644
--- a/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css
@@ -1,3 +1,4 @@
+@import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/ProductSwitchItem-parameters.css";
 @import "../base/TimelineItem-parameters.css";
diff --git a/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css
index 590f7db33a19..0863a057bf29 100644
--- a/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -1,3 +1,4 @@
+@import "../base/Bar-parameters.css";
 @import "./ProductSwitchItem-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./UploadCollection-parameters.css";
diff --git a/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css
index 590f7db33a19..0863a057bf29 100644
--- a/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css
@@ -1,3 +1,4 @@
+@import "../base/Bar-parameters.css";
 @import "./ProductSwitchItem-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./UploadCollection-parameters.css";
diff --git a/packages/fiori/src/types/BarDesign.js b/packages/fiori/src/types/BarDesign.js
new file mode 100644
index 000000000000..d52e322fd3e7
--- /dev/null
+++ b/packages/fiori/src/types/BarDesign.js
@@ -0,0 +1,54 @@
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * @lends sap.ui.webcomponents.main.types.BarDesign.prototype
+ * @public
+ */
+const BarTypes = {
+	/**
+	 * Default type
+	 * @public
+	 * @type {Header}
+	 */
+	Header: "Header",
+
+	/**
+	 * Subheader type
+	 * @public
+	 * @type {Subheader}
+	 */
+	Subheader: "Subheader",
+
+	/**
+	 * Footer type
+	 * @public
+	 * @type {Footer}
+	 */
+	Footer: "Footer",
+
+	/**
+	 * Floating Footer type - there is visible border on all sides
+	 * @public
+	 * @type {FloatingFooter}
+	 */
+	FloatingFooter: "FloatingFooter",
+};
+
+/**
+ * @class
+ * Different types of Bar.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.types.BarDesign
+ * @public
+ * @enum {string}
+ */
+class BarDesign extends DataType {
+	static isValid(value) {
+		return !!BarTypes[value];
+	}
+}
+
+BarDesign.generateTypeAcessors(BarTypes);
+
+export default BarDesign;
diff --git a/packages/fiori/test/pages/Bar.html b/packages/fiori/test/pages/Bar.html
new file mode 100644
index 000000000000..f60dbef99e0e
--- /dev/null
+++ b/packages/fiori/test/pages/Bar.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta charset="utf-8">
+
+	<title>Bar test page</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta charset="utf-8">
+
+	<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
+	<script src="../../resources/bundle.esm.js" type="module"></script>
+	<script nomodule src="../../resources/bundle.es5.js"></script>
+
+</head>
+
+<body style="background-color: var(--sapBackgroundColor);">
+	<section>
+		<ui5-bar design="Footer">
+			<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
+			<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
+			<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
+		</ui5-bar>
+		<ui5-bar design="Subheader">
+			<ui5-button slot="startContent">Left Button</ui5-button>
+			<ui5-label slot="endContent" id="basic-label">Basic Label</ui5-label>
+			<ui5-button slot="middleContent">Middle Button</ui5-button>
+			<ui5-button slot="middleContent">Middle2 Button</ui5-button>
+			<ui5-button slot="startContent">Middle3 Button</ui5-button>
+			<ui5-button slot="endContent">Right Button</ui5-button>
+		</ui5-bar>
+		<ui5-bar design="FloatingFooter">
+			<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
+			<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
+			<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
+		</ui5-bar>
+		<ui5-bar design="Header">
+			<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
+			<ui5-label id="basic-label" slot="middleContent">Title</ui5-label>
+			<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
+		</ui5-bar>
+	</section>
+	<style>
+		ui5-bar {
+			margin: 0.25rem 0;
+		}
+	</style>
+</body>
+</html>
diff --git a/packages/fiori/test/samples/Bar.sample.html b/packages/fiori/test/samples/Bar.sample.html
new file mode 100644
index 000000000000..64d8af6e32bb
--- /dev/null
+++ b/packages/fiori/test/samples/Bar.sample.html
@@ -0,0 +1,81 @@
+<header>
+	<div class="control-header">Bar</div>
+	<div class="component-heading-since">
+		<span><!--since_tag_marker--></span>
+	</div>
+</header>
+
+<div class="component-package">@ui5/webcomponents</div>
+
+<div class="control-tag">&lt;ui5-bar&gt;</div>
+
+<section>
+	<h3>Header Bar</h3>
+	<div class="snippet">
+		<ui5-bar design="Header">
+			<ui5-button icon="home" title="Go home" design="Transparent" slot="startContent"></ui5-button>
+			<ui5-label id="basic-label" slot="middleContent">Header Title</ui5-label>
+			<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
+		</ui5-bar>
+	</div>
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-bar design="Header">
+	<ui5-button icon="home" title="Go home" design="Transparent" slot="startContent"></ui5-button>
+	<ui5-label id="basic-label" slot="middleContent">Header Title</ui5-label>
+	<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
+</ui5-bar>
+	</xmp></pre>
+</section>
+<section>
+	<h3>Subheader Bar</h3>
+	<div class="snippet">
+		<ui5-bar design="Subheader">
+			<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
+			<ui5-label id="basic-label" slot="middleContent">Subheader Title</ui5-label>
+			<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
+		</ui5-bar>
+	</div>
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-bar design="Subheader">
+	<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
+	<ui5-label id="basic-label" slot="middleContent">Subheader Title</ui5-label>
+	<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
+</ui5-bar>
+	</xmp></pre>
+</section>
+<section>
+	<h3>Footer Bar</h3>
+	<div class="snippet">
+		<ui5-bar design="Footer">
+			<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
+			<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
+			<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
+		</ui5-bar>
+	</div>
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-bar design="Footer">
+	<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
+	<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
+	<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
+</ui5-bar>
+	</xmp></pre>
+</section>
+<section>
+	<h3>FloatingFooter Bar</h3>
+	<div class="snippet">
+		<ui5-bar design="FloatingFooter">
+			<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
+			<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
+			<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
+		</ui5-bar>
+	</div>
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-bar design="FloatingFooter">
+	<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
+	<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
+	<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
+</ui5-bar>
+	</xmp></pre>
+</section>
+
+<!-- JSDoc marker -->
\ No newline at end of file
diff --git a/packages/playground/build-scripts/samples-prepare.js b/packages/playground/build-scripts/samples-prepare.js
index f07f77d8a89f..57102f6e4f55 100644
--- a/packages/playground/build-scripts/samples-prepare.js
+++ b/packages/playground/build-scripts/samples-prepare.js
@@ -12,6 +12,7 @@ const components = [];
 
  // Add new components here
 const newComponents = [
+	"Bar",
 	"Calendar",
 	"MultiInput",
 	"RangeSlider",
diff --git a/packages/theme-base/css-vars-usage.json b/packages/theme-base/css-vars-usage.json
index 2edfcb613e23..da9477920b1f 100644
--- a/packages/theme-base/css-vars-usage.json
+++ b/packages/theme-base/css-vars-usage.json
@@ -79,6 +79,7 @@
   "--sapContent_Selected_Background",
   "--sapContent_Selected_TextColor",
   "--sapContent_Shadow0",
+  "--sapContent_Shadow1",
   "--sapContent_Shadow2",
   "--sapContent_Shadow3",
   "--sapContent_TextShadow",
@@ -182,6 +183,7 @@
   "--sapPageFooter_Background",
   "--sapPageFooter_BorderColor",
   "--sapPageFooter_TextColor",
+  "--sapPageHeader_Background",
   "--sapPageHeader_BorderColor",
   "--sapPageHeader_TextColor",
   "--sapPositiveColor",