diff --git a/package-lock.json b/package-lock.json
index 1aca08c..eaa433a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
 			"version": "7.1.3",
 			"license": "Apache-2.0",
 			"dependencies": {
+				"@neovici/cosmoz-collapse": "^1.5.0",
 				"@neovici/cosmoz-dropdown": "^4.0.0",
 				"@neovici/cosmoz-utils": "^6.8.1",
 				"@pionjs/pion": "^2.5.2",
@@ -1094,6 +1095,14 @@
 				"typescript": "^5.1.0"
 			}
 		},
+		"node_modules/@neovici/cosmoz-collapse": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/@neovici/cosmoz-collapse/-/cosmoz-collapse-1.5.0.tgz",
+			"integrity": "sha512-oMLqMth4ySQtsBF2DMXwtZrADskxFdbAaH3wMCFHH5VqK2RWonB4gL6NcujLMvM+0TC+f0kz066fuRp9hNut4w==",
+			"dependencies": {
+				"lit-html": "^2.0.0 || ^3.0.0"
+			}
+		},
 		"node_modules/@neovici/cosmoz-dropdown": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/@neovici/cosmoz-dropdown/-/cosmoz-dropdown-4.0.0.tgz",
diff --git a/package.json b/package.json
index 68fb81b..2380669 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
 		]
 	},
 	"dependencies": {
+		"@neovici/cosmoz-collapse": "^1.5.0",
 		"@neovici/cosmoz-dropdown": "^4.0.0",
 		"@neovici/cosmoz-utils": "^6.8.1",
 		"@pionjs/pion": "^2.5.2",
diff --git a/src/cosmoz-bottom-bar-next.js b/src/cosmoz-bottom-bar-next.js
index 3438f1a..08fe02f 100644
--- a/src/cosmoz-bottom-bar-next.js
+++ b/src/cosmoz-bottom-bar-next.js
@@ -5,6 +5,7 @@ import { component, useEffect } from '@pionjs/pion';
 import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
 import { notifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
 import style from './cosmoz-bottom-bar-next.style.js';
+import '@neovici/cosmoz-collapse';
 
 const BOTTOM_BAR_TOOLBAR_SLOT = 'bottom-bar-toolbar';
 const BOTTOM_BAR_MENU_SLOT = 'bottom-bar-menu';
@@ -137,8 +138,7 @@ const _layoutActions = (host, maxToolbarItems) => {
  * See demo for example usage
  *
  * @element cosmoz-bottom-bar
- * @demo demo/bottom-bar.html Basic Demo
- * @demo demo/bottom-bar-match-parent.html match parent Demo
+ * @demo demo/bottom-bar-next.html Basic Demo
  */
 // eslint-disable-next-line max-statements
 const CosmozBottomBar = ({
@@ -158,45 +158,47 @@ const CosmozBottomBar = ({
 	};
 
 	return html`${style}
-		<div id="bar" part="bar">
-			<div id="info"><slot name="info"></slot></div>
-			<slot
-				id="bottomBarToolbar"
-				name="bottom-bar-toolbar"
-				@slotchange=${slotChangeHandler}
-			></slot>
-			<cosmoz-dropdown-menu id="dropdown" hidden=${!hasMenuItems}>
-				<svg
-					slot="button"
-					width="4"
-					height="16"
-					viewBox="0 0 4 16"
-					fill="none"
-					xmlns="http://www.w3.org/2000/svg"
-				>
-					<path
-						fill-rule="evenodd"
-						clip-rule="evenodd"
-						d="M1.50996e-07 2C1.02714e-07 3.10457 0.89543 4 2 4C3.10457 4 4 3.10457 4 2C4 0.89543 3.10457 -3.91405e-08 2 -8.74228e-08C0.895431 -1.35705e-07 1.99278e-07 0.89543 1.50996e-07 2Z"
-						fill="white"
-					/>
-					<path
-						fill-rule="evenodd"
-						clip-rule="evenodd"
-						d="M1.50996e-07 8C1.02714e-07 9.10457 0.89543 10 2 10C3.10457 10 4 9.10457 4 8C4 6.89543 3.10457 6 2 6C0.895431 6 1.99278e-07 6.89543 1.50996e-07 8Z"
-						fill="white"
-					/>
-					<path
-						fill-rule="evenodd"
-						clip-rule="evenodd"
-						d="M1.50996e-07 14C1.02714e-07 15.1046 0.89543 16 2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 1.99278e-07 12.8954 1.50996e-07 14Z"
-						fill="white"
-					/>
-				</svg>
-				<slot id="bottomBarMenu" name="bottom-bar-menu"></slot>
-			</cosmoz-dropdown-menu>
-			<slot name="extra" id="extraSlot"></slot>
-		</div>
+		<cosmoz-collapse ?opened=${active}>
+			<div id="bar" part="bar">
+				<div id="info"><slot name="info"></slot></div>
+				<slot
+					id="bottomBarToolbar"
+					name="bottom-bar-toolbar"
+					@slotchange=${slotChangeHandler}
+				></slot>
+				<cosmoz-dropdown-menu id="dropdown" hidden=${!hasMenuItems}>
+					<svg
+						slot="button"
+						width="4"
+						height="16"
+						viewBox="0 0 4 16"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							fill-rule="evenodd"
+							clip-rule="evenodd"
+							d="M1.50996e-07 2C1.02714e-07 3.10457 0.89543 4 2 4C3.10457 4 4 3.10457 4 2C4 0.89543 3.10457 -3.91405e-08 2 -8.74228e-08C0.895431 -1.35705e-07 1.99278e-07 0.89543 1.50996e-07 2Z"
+							fill="white"
+						/>
+						<path
+							fill-rule="evenodd"
+							clip-rule="evenodd"
+							d="M1.50996e-07 8C1.02714e-07 9.10457 0.89543 10 2 10C3.10457 10 4 9.10457 4 8C4 6.89543 3.10457 6 2 6C0.895431 6 1.99278e-07 6.89543 1.50996e-07 8Z"
+							fill="white"
+						/>
+						<path
+							fill-rule="evenodd"
+							clip-rule="evenodd"
+							d="M1.50996e-07 14C1.02714e-07 15.1046 0.89543 16 2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 1.99278e-07 12.8954 1.50996e-07 14Z"
+							fill="white"
+						/>
+					</svg>
+					<slot id="bottomBarMenu" name="bottom-bar-menu"></slot>
+				</cosmoz-dropdown-menu>
+				<slot name="extra" id="extraSlot"></slot>
+			</div>
+		</cosmoz-collapse>
 		<div hidden style="display:none">
 			<slot id="content" @slotchange=${slotChangeHandler}></slot>
 		</div>`;