@teambit/component 0.0.958 → 0.0.959

package/dist/{preview-1673580548831.js → preview-1673666932263.js}

@@ -1,5 +1,5 @@
-import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.958/dist/component.composition.js';
-import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.958/dist/component.docs.mdx';
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.959/dist/component.composition.js';
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.959/dist/component.docs.mdx';
 
 export const compositions = [compositions_0];
 export const overview = [overview_0];

package/dist/ui/menu/menu-nav.d.ts

@@ -13,5 +13,9 @@ export declare type MenuNavProps = {
     widgetSlot?: OrderedNavigationSlot;
     navPlugins?: [string, NavPlugin][];
     widgetPlugins?: [string, NavPlugin][];
+    /**
+     * A className to pass to the secondary nav, i.e dropdown
+     */
+    secondaryNavClassName?: string;
 } & React.HTMLAttributes<HTMLElement>;
-export declare function CollapsibleMenuNav({ navigationSlot, widgetSlot, navPlugins, widgetPlugins, className, }: MenuNavProps): JSX.Element;
+export declare function CollapsibleMenuNav({ navigationSlot, widgetSlot, navPlugins, widgetPlugins, className, secondaryNavClassName, children, }: MenuNavProps): JSX.Element;

package/dist/ui/menu/menu-nav.js

@@ -65,7 +65,9 @@ function CollapsibleMenuNav({
   widgetSlot,
   navPlugins = [],
   widgetPlugins = [],
-  className
+  className,
+  secondaryNavClassName,
+  children
 }) {
   const plugins = (0, _react().useMemo)(() => {
     const _navPlugins = navPlugins.length > 0 ? navPlugins : navigationSlot === null || navigationSlot === void 0 ? void 0 : navigationSlot.toArray();
@@ -88,23 +90,25 @@ function CollapsibleMenuNav({
         isInMenu
       }) {
         const widgetDisplayText = menuItem.props.displayName && isInMenu && menuItem.props.displayName;
-        return /*#__PURE__*/_react().default.createElement(_topBarNav().TopBarNav, (0, _extends2().default)({
+        return /*#__PURE__*/_react().default.createElement(_topBarNav().TopBarNav, (0, _extends2().default)({}, menuItem.props, {
           className: (0, _classnames().default)(menuItem.props.className, _menuModule().default.topBarNav, isInMenu && _menuModule().default.noBorder),
           key: id
-        }, menuItem.props), widgetDisplayText || menuItem.props.children);
+        }), widgetDisplayText || menuItem.props.children);
       },
-      style: _objectSpread(_objectSpread({}, firstWidgetStyle), lastPluginStyle)
+      style: _objectSpread(_objectSpread({}, firstWidgetStyle), lastPluginStyle),
+      className: menuItem.props.className
     };
   });
   return /*#__PURE__*/_react().default.createElement(_designNavigation().ResponsiveNavbar, {
     navClassName: (0, _classnames().default)(_menuModule().default.tab, className),
+    secondaryNavClassName: secondaryNavClassName,
     style: {
       width: '100%',
       height: '100%'
     },
     priority: "none",
     tabs: links
-  });
+  }, children);
 }
 function sortFn([, {
   order: first

package/dist/ui/menu/menu-nav.js.map

@@ -1 +1 @@
-{"version":3,"names":["CollapsibleMenuNav","navigationSlot","widgetSlot","navPlugins","widgetPlugins","className","plugins","useMemo","_navPlugins","length","toArray","sort","sortFn","widgets","_widgetPlugins","links","map","id","menuItem","index","lastPluginStyle","marginRight","firstWidgetStyle","marginLeft","component","TopBarNavComponent","isInMenu","widgetDisplayText","props","displayName","classnames","styles","topBarNav","noBorder","children","style","tab","width","height","order","first","second"],"sources":["menu-nav.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport classnames from 'classnames';\nimport { ResponsiveNavbar } from '@teambit/design.navigation.responsive-navbar';\nimport type { TabProps } from '@teambit/design.navigation.responsive-navbar';\nimport { TopBarNav } from '../top-bar-nav';\nimport styles from './menu.module.scss';\nimport { NavPlugin, OrderedNavigationSlot } from './nav-plugin';\n\nexport type MenuNavProps = {\n  /**\n   * @deprecated\n   * use @property navPlugins\n   */\n  navigationSlot?: OrderedNavigationSlot;\n  /**\n   * @deprecated\n   * use @property widgetPlugins\n   */\n  widgetSlot?: OrderedNavigationSlot;\n  navPlugins?: [string, NavPlugin][];\n  widgetPlugins?: [string, NavPlugin][];\n} & React.HTMLAttributes<HTMLElement>;\n\nexport function CollapsibleMenuNav({\n  navigationSlot,\n  widgetSlot,\n  navPlugins = [],\n  widgetPlugins = [],\n  className,\n}: MenuNavProps) {\n  const plugins = useMemo(() => {\n    const _navPlugins = navPlugins.length > 0 ? navPlugins : navigationSlot?.toArray();\n    return (_navPlugins || []).sort(sortFn);\n  }, [navigationSlot, navPlugins]);\n  const widgets = useMemo(() => {\n    const _widgetPlugins = widgetPlugins.length > 0 ? widgetPlugins : widgetSlot?.toArray();\n    return (_widgetPlugins || []).sort(sortFn);\n  }, [widgetSlot, widgetPlugins]);\n\n  const links = [...plugins, ...widgets].map(([id, menuItem], index) => {\n    // these styles keep plugins to the left and widgets to the right.\n    const lastPluginStyle = plugins.length - 1 === index ? { marginRight: 'auto' } : {};\n\n    const firstWidgetStyle = plugins.length === index ? { marginLeft: 'auto' } : {};\n\n    return {\n      component: function TopBarNavComponent({ isInMenu }: TabProps) {\n        const widgetDisplayText = menuItem.props.displayName && isInMenu && menuItem.props.displayName;\n        return (\n          <TopBarNav\n            className={classnames(menuItem.props.className, styles.topBarNav, isInMenu && styles.noBorder)}\n            key={id}\n            {...menuItem.props}\n          >\n            {widgetDisplayText || menuItem.props.children}\n          </TopBarNav>\n        );\n      },\n      style: { ...firstWidgetStyle, ...lastPluginStyle },\n    };\n  });\n  return (\n    <ResponsiveNavbar\n      navClassName={classnames(styles.tab, className)}\n      style={{ width: '100%', height: '100%' }}\n      priority=\"none\"\n      tabs={links}\n    />\n  );\n}\n\nfunction sortFn([, { order: first }]: [string, NavPlugin], [, { order: second }]: [string, NavPlugin]) {\n  // 0  - equal\n  // <0 - first < second\n  // >0 - first > second\n\n  return (first ?? 0) - (second ?? 0);\n}\n\n// // this is the aspect-oriented and serialize-able way to sort plugins.\n// const pluginOrder = ['teambit.docs/docs', 'teambit.compositions/compositions', 'teambit.docs/docs'];\n// export function toSortedArray<T>(slot: SlotRegistry<T>, order: string[]) {\n//   // sort items according to the order\n//   const sorted = order.map((x) => [x, slot.get(x)]).filter(([, val]) => !!val) as [string, T][];\n//\n//   // add all other items\n//   const unsorted = slot.toArray().filter(([id]) => order.indexOf(id) < 0);\n//\n//   return sorted.concat(unsorted);\n// }\n"],"mappings":"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"}
+{"version":3,"names":["CollapsibleMenuNav","navigationSlot","widgetSlot","navPlugins","widgetPlugins","className","secondaryNavClassName","children","plugins","useMemo","_navPlugins","length","toArray","sort","sortFn","widgets","_widgetPlugins","links","map","id","menuItem","index","lastPluginStyle","marginRight","firstWidgetStyle","marginLeft","component","TopBarNavComponent","isInMenu","widgetDisplayText","props","displayName","classnames","styles","topBarNav","noBorder","style","tab","width","height","order","first","second"],"sources":["menu-nav.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport classnames from 'classnames';\nimport { ResponsiveNavbar } from '@teambit/design.navigation.responsive-navbar';\nimport type { TabProps } from '@teambit/design.navigation.responsive-navbar';\nimport { TopBarNav } from '../top-bar-nav';\nimport styles from './menu.module.scss';\nimport { NavPlugin, OrderedNavigationSlot } from './nav-plugin';\n\nexport type MenuNavProps = {\n  /**\n   * @deprecated\n   * use @property navPlugins\n   */\n  navigationSlot?: OrderedNavigationSlot;\n  /**\n   * @deprecated\n   * use @property widgetPlugins\n   */\n  widgetSlot?: OrderedNavigationSlot;\n  navPlugins?: [string, NavPlugin][];\n  widgetPlugins?: [string, NavPlugin][];\n  /**\n   * A className to pass to the secondary nav, i.e dropdown\n   */\n  secondaryNavClassName?: string;\n} & React.HTMLAttributes<HTMLElement>;\n\nexport function CollapsibleMenuNav({\n  navigationSlot,\n  widgetSlot,\n  navPlugins = [],\n  widgetPlugins = [],\n  className,\n  secondaryNavClassName,\n  children,\n}: MenuNavProps) {\n  const plugins = useMemo(() => {\n    const _navPlugins = navPlugins.length > 0 ? navPlugins : navigationSlot?.toArray();\n    return (_navPlugins || []).sort(sortFn);\n  }, [navigationSlot, navPlugins]);\n  const widgets = useMemo(() => {\n    const _widgetPlugins = widgetPlugins.length > 0 ? widgetPlugins : widgetSlot?.toArray();\n    return (_widgetPlugins || []).sort(sortFn);\n  }, [widgetSlot, widgetPlugins]);\n\n  const links = [...plugins, ...widgets].map(([id, menuItem], index) => {\n    // these styles keep plugins to the left and widgets to the right.\n    const lastPluginStyle = plugins.length - 1 === index ? { marginRight: 'auto' } : {};\n\n    const firstWidgetStyle = plugins.length === index ? { marginLeft: 'auto' } : {};\n\n    return {\n      component: function TopBarNavComponent({ isInMenu }: TabProps) {\n        const widgetDisplayText = menuItem.props.displayName && isInMenu && menuItem.props.displayName;\n        return (\n          <TopBarNav\n            {...menuItem.props}\n            className={classnames(menuItem.props.className, styles.topBarNav, isInMenu && styles.noBorder)}\n            key={id}\n          >\n            {widgetDisplayText || menuItem.props.children}\n          </TopBarNav>\n        );\n      },\n      style: { ...firstWidgetStyle, ...lastPluginStyle },\n      className: menuItem.props.className,\n    };\n  });\n\n  return (\n    <ResponsiveNavbar\n      navClassName={classnames(styles.tab, className)}\n      secondaryNavClassName={secondaryNavClassName}\n      style={{ width: '100%', height: '100%' }}\n      priority=\"none\"\n      tabs={links}\n    >\n      {children}\n    </ResponsiveNavbar>\n  );\n}\n\nfunction sortFn([, { order: first }]: [string, NavPlugin], [, { order: second }]: [string, NavPlugin]) {\n  // 0  - equal\n  // <0 - first < second\n  // >0 - first > second\n\n  return (first ?? 0) - (second ?? 0);\n}\n\n// // this is the aspect-oriented and serialize-able way to sort plugins.\n// const pluginOrder = ['teambit.docs/docs', 'teambit.compositions/compositions', 'teambit.docs/docs'];\n// export function toSortedArray<T>(slot: SlotRegistry<T>, order: string[]) {\n//   // sort items according to the order\n//   const sorted = order.map((x) => [x, slot.get(x)]).filter(([, val]) => !!val) as [string, T][];\n//\n//   // add all other items\n//   const unsorted = slot.toArray().filter(([id]) => order.indexOf(id) < 0);\n//\n//   return sorted.concat(unsorted);\n// }\n"],"mappings":"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"}

package/dist/ui/menu/nav-plugin.d.ts

@@ -5,6 +5,7 @@ import { LaneModel } from '@teambit/lanes.ui.models.lanes-model';
 import { ComponentModel } from '../../ui';
 export declare type NavPluginProps = {
     displayName?: string;
+    ignoreQueryParams?: boolean;
 } & LinkProps;
 export declare type NavPlugin = {
     props: NavPluginProps;

package/dist/ui/menu/nav-plugin.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["nav-plugin.tsx"],"sourcesContent":["import { SlotRegistry } from '@teambit/harmony';\nimport type { LinkProps } from '@teambit/base-react.navigation.link';\nimport type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';\nimport { LaneModel } from '@teambit/lanes.ui.models.lanes-model';\nimport { ComponentModel } from '../../ui';\n\nexport type NavPluginProps = {\n  displayName?: string;\n} & LinkProps;\n\nexport type NavPlugin = {\n  props: NavPluginProps;\n  order?: number;\n};\n\nexport type OrderedNavigationSlot = SlotRegistry<NavPlugin>;\nexport type ConsumePluginOptions = {\n  currentLane?: LaneModel;\n};\n\nexport type ConsumePlugin = (\n  componentModel: ComponentModel,\n  options?: ConsumePluginOptions\n) => ConsumeMethod | undefined;\n\nexport type ConsumeMethodSlot = SlotRegistry<ConsumePlugin[]>;\n"],"mappings":""}
+{"version":3,"names":[],"sources":["nav-plugin.tsx"],"sourcesContent":["import { SlotRegistry } from '@teambit/harmony';\nimport type { LinkProps } from '@teambit/base-react.navigation.link';\nimport type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';\nimport { LaneModel } from '@teambit/lanes.ui.models.lanes-model';\nimport { ComponentModel } from '../../ui';\n\nexport type NavPluginProps = {\n  displayName?: string;\n  ignoreQueryParams?: boolean;\n} & LinkProps;\n\nexport type NavPlugin = {\n  props: NavPluginProps;\n  order?: number;\n};\n\nexport type OrderedNavigationSlot = SlotRegistry<NavPlugin>;\nexport type ConsumePluginOptions = {\n  currentLane?: LaneModel;\n};\n\nexport type ConsumePlugin = (\n  componentModel: ComponentModel,\n  options?: ConsumePluginOptions\n) => ConsumeMethod | undefined;\n\nexport type ConsumeMethodSlot = SlotRegistry<ConsumePlugin[]>;\n"],"mappings":""}

package/dist/ui/top-bar-nav/top-bar-nav.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { NavPluginProps } from '../menu/nav-plugin';
-export declare function TopBarNav({ href, className, activeClassName, children, displayName, ...rest }: NavPluginProps): JSX.Element;
+export declare function TopBarNav({ href, className, activeClassName, children, displayName, ignoreQueryParams, ...rest }: NavPluginProps): JSX.Element;

package/dist/ui/top-bar-nav/top-bar-nav.js

@@ -61,9 +61,10 @@ function TopBarNav(_ref) {
       className,
       activeClassName,
       children,
-      displayName
+      displayName,
+      ignoreQueryParams
     } = _ref,
-    rest = (0, _objectWithoutProperties2().default)(_ref, ["href", "className", "activeClassName", "children", "displayName"]);
+    rest = (0, _objectWithoutProperties2().default)(_ref, ["href", "className", "activeClassName", "children", "displayName", "ignoreQueryParams"]);
   const {
     search
   } = (0, _reactRouterDom().useLocation)(); // sticky query params
@@ -73,7 +74,7 @@ function TopBarNav(_ref) {
   // but not for regular menu links (overview, compositions, etc).
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const preventPassingDisplayNameToLink = displayName;
-  const target = href && `${href}${search}`;
+  const target = href && !ignoreQueryParams && `${href}${search}` || href;
   return /*#__PURE__*/_react().default.createElement(_baseReactNavigation().Link, (0, _extends2().default)({}, rest, {
     className: (0, _classnames().default)(className, _topBarNavModule().default.topBarLink),
     activeClassName: (0, _classnames().default)(activeClassName, _topBarNavModule().default.active),

package/dist/ui/top-bar-nav/top-bar-nav.js.map

@@ -1 +1 @@
-{"version":3,"names":["TopBarNav","href","className","activeClassName","children","displayName","rest","search","useLocation","preventPassingDisplayNameToLink","target","classnames","styles","topBarLink","active"],"sources":["top-bar-nav.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { useLocation } from 'react-router-dom';\nimport { Link } from '@teambit/base-react.navigation.link';\nimport { NavPluginProps } from '../menu/nav-plugin';\n\nimport styles from './top-bar-nav.module.scss';\n\nexport function TopBarNav({ href, className, activeClassName, children, displayName, ...rest }: NavPluginProps) {\n  const { search } = useLocation(); // sticky query params\n\n  // @hack - this is so that the displayName will not pass to the link and cause a warning in the console.\n  // it is used for component page nav link widgets (code, aspects etc),\n  // but not for regular menu links (overview, compositions, etc).\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const preventPassingDisplayNameToLink = displayName;\n\n  const target = href && `${href}${search}`;\n\n  return (\n    <Link\n      {...rest}\n      className={classnames(className, styles.topBarLink)}\n      activeClassName={classnames(activeClassName, styles.active)}\n      href={target}\n    >\n      <div>{children}</div>\n    </Link>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAGA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAEO,SAASA,SAAS,OAAuF;EAAA,IAAtF;MAAEC,IAAI;MAAEC,SAAS;MAAEC,eAAe;MAAEC,QAAQ;MAAEC;IAAqC,CAAC;IAAtBC,IAAI;EAC1F,MAAM;IAAEC;EAAO,CAAC,GAAG,IAAAC,6BAAW,GAAE,CAAC,CAAC;;EAElC;EACA;EACA;EACA;EACA,MAAMC,+BAA+B,GAAGJ,WAAW;EAEnD,MAAMK,MAAM,GAAGT,IAAI,IAAK,GAAEA,IAAK,GAAEM,MAAO,EAAC;EAEzC,oBACE,+BAAC,2BAAI,+BACCD,IAAI;IACR,SAAS,EAAE,IAAAK,qBAAU,EAACT,SAAS,EAAEU,0BAAM,CAACC,UAAU,CAAE;IACpD,eAAe,EAAE,IAAAF,qBAAU,EAACR,eAAe,EAAES,0BAAM,CAACE,MAAM,CAAE;IAC5D,IAAI,EAAEJ;EAAO,iBAEb,4CAAMN,QAAQ,CAAO,CAChB;AAEX"}
+{"version":3,"names":["TopBarNav","href","className","activeClassName","children","displayName","ignoreQueryParams","rest","search","useLocation","preventPassingDisplayNameToLink","target","classnames","styles","topBarLink","active"],"sources":["top-bar-nav.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { useLocation } from 'react-router-dom';\nimport { Link } from '@teambit/base-react.navigation.link';\nimport { NavPluginProps } from '../menu/nav-plugin';\n\nimport styles from './top-bar-nav.module.scss';\n\nexport function TopBarNav({\n  href,\n  className,\n  activeClassName,\n  children,\n  displayName,\n  ignoreQueryParams,\n  ...rest\n}: NavPluginProps) {\n  const { search } = useLocation(); // sticky query params\n\n  // @hack - this is so that the displayName will not pass to the link and cause a warning in the console.\n  // it is used for component page nav link widgets (code, aspects etc),\n  // but not for regular menu links (overview, compositions, etc).\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const preventPassingDisplayNameToLink = displayName;\n\n  const target = (href && !ignoreQueryParams && `${href}${search}`) || href;\n\n  return (\n    <Link\n      {...rest}\n      className={classnames(className, styles.topBarLink)}\n      activeClassName={classnames(activeClassName, styles.active)}\n      href={target}\n    >\n      <div>{children}</div>\n    </Link>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAGA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAEO,SAASA,SAAS,OAQN;EAAA,IARO;MACxBC,IAAI;MACJC,SAAS;MACTC,eAAe;MACfC,QAAQ;MACRC,WAAW;MACXC;IAEc,CAAC;IADZC,IAAI;EAEP,MAAM;IAAEC;EAAO,CAAC,GAAG,IAAAC,6BAAW,GAAE,CAAC,CAAC;;EAElC;EACA;EACA;EACA;EACA,MAAMC,+BAA+B,GAAGL,WAAW;EAEnD,MAAMM,MAAM,GAAIV,IAAI,IAAI,CAACK,iBAAiB,IAAK,GAAEL,IAAK,GAAEO,MAAO,EAAC,IAAKP,IAAI;EAEzE,oBACE,+BAAC,2BAAI,+BACCM,IAAI;IACR,SAAS,EAAE,IAAAK,qBAAU,EAACV,SAAS,EAAEW,0BAAM,CAACC,UAAU,CAAE;IACpD,eAAe,EAAE,IAAAF,qBAAU,EAACT,eAAe,EAAEU,0BAAM,CAACE,MAAM,CAAE;IAC5D,IAAI,EAAEJ;EAAO,iBAEb,4CAAMP,QAAQ,CAAO,CAChB;AAEX"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/component",
-  "version": "0.0.958",
+  "version": "0.0.959",
   "homepage": "https://bit.dev/teambit/component/component",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "component",
-    "version": "0.0.958"
+    "version": "0.0.959"
   },
   "dependencies": {
     "@teambit/any-fs": "0.0.5",
@@ -27,45 +27,45 @@
     "@teambit/documenter.ui.heading": "4.1.1",
     "@teambit/documenter.ui.separator": "4.1.1",
     "@teambit/explorer.ui.command-bar": "2.0.3",
-    "@teambit/design.navigation.responsive-navbar": "0.0.2",
     "@teambit/base-ui.layout.breakpoints": "1.0.0",
     "@teambit/component-id": "0.0.425",
     "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.497",
-    "@teambit/aspect-loader": "0.0.958",
-    "@teambit/graph": "0.0.958",
+    "@teambit/aspect-loader": "0.0.959",
+    "@teambit/graph": "0.0.959",
     "@teambit/legacy-bit-id": "0.0.421",
     "@teambit/toolbox.path.match-patterns": "0.0.9",
     "@teambit/toolbox.string.capitalize": "0.0.490",
-    "@teambit/cli": "0.0.642",
-    "@teambit/express": "0.0.740",
-    "@teambit/graphql": "0.0.958",
+    "@teambit/cli": "0.0.643",
+    "@teambit/express": "0.0.741",
+    "@teambit/graphql": "0.0.959",
     "@teambit/bit-error": "0.0.402",
-    "@teambit/command-bar": "0.0.958",
-    "@teambit/component.ui.deprecation-icon": "0.0.503",
-    "@teambit/preview": "0.0.958",
-    "@teambit/pubsub": "0.0.958",
-    "@teambit/react-router": "0.0.958",
+    "@teambit/command-bar": "0.0.959",
+    "@teambit/component.ui.deprecation-icon": "0.0.504",
+    "@teambit/preview": "0.0.959",
+    "@teambit/pubsub": "0.0.959",
+    "@teambit/react-router": "0.0.959",
     "@teambit/ui-foundation.ui.is-browser": "0.0.495",
     "@teambit/ui-foundation.ui.main-dropdown": "0.0.497",
     "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.501",
-    "@teambit/ui-foundation.ui.use-box.menu": "0.0.131",
-    "@teambit/ui": "0.0.958",
+    "@teambit/ui-foundation.ui.use-box.menu": "0.0.132",
+    "@teambit/ui": "0.0.959",
     "@teambit/component-issues": "0.0.85",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.500",
     "@teambit/cli-table": "0.0.41",
     "@teambit/component-descriptor": "0.0.212",
     "@teambit/ui-foundation.ui.react-router.use-query": "0.0.496",
-    "@teambit/design.ui.empty-box": "0.0.363",
+    "@teambit/design.ui.empty-box": "0.0.364",
     "@teambit/harmony.ui.aspect-box": "0.0.497",
+    "@teambit/compositions": "0.0.959",
+    "@teambit/deprecation": "0.0.959",
+    "@teambit/envs": "0.0.959",
+    "@teambit/legacy-component-log": "0.0.399",
     "@teambit/design.ui.pages.not-found": "0.0.366",
     "@teambit/design.ui.pages.server-error": "0.0.366",
-    "@teambit/compositions": "0.0.958",
-    "@teambit/deprecation": "0.0.958",
-    "@teambit/envs": "0.0.958",
-    "@teambit/legacy-component-log": "0.0.399",
     "@teambit/design.ui.styles.ellipsis": "0.0.357",
     "@teambit/envs.ui.env-icon": "0.0.495",
-    "@teambit/component.ui.version-dropdown": "0.0.708",
+    "@teambit/design.navigation.responsive-navbar": "0.0.4",
+    "@teambit/component.ui.version-dropdown": "0.0.709",
     "@teambit/lanes.hooks.use-lanes": "0.0.106",
     "@teambit/lanes.ui.models.lanes-model": "0.0.68",
     "@teambit/ui-foundation.ui.full-loader": "0.0.495",

package/ui/menu/menu-nav.tsx

@@ -19,6 +19,10 @@ export type MenuNavProps = {
   widgetSlot?: OrderedNavigationSlot;
   navPlugins?: [string, NavPlugin][];
   widgetPlugins?: [string, NavPlugin][];
+  /**
+   * A className to pass to the secondary nav, i.e dropdown
+   */
+  secondaryNavClassName?: string;
 } & React.HTMLAttributes<HTMLElement>;
 
 export function CollapsibleMenuNav({
@@ -27,6 +31,8 @@ export function CollapsibleMenuNav({
   navPlugins = [],
   widgetPlugins = [],
   className,
+  secondaryNavClassName,
+  children,
 }: MenuNavProps) {
   const plugins = useMemo(() => {
     const _navPlugins = navPlugins.length > 0 ? navPlugins : navigationSlot?.toArray();
@@ -48,24 +54,29 @@ export function CollapsibleMenuNav({
         const widgetDisplayText = menuItem.props.displayName && isInMenu && menuItem.props.displayName;
         return (
           <TopBarNav
+            {...menuItem.props}
             className={classnames(menuItem.props.className, styles.topBarNav, isInMenu && styles.noBorder)}
             key={id}
-            {...menuItem.props}
           >
             {widgetDisplayText || menuItem.props.children}
           </TopBarNav>
         );
       },
       style: { ...firstWidgetStyle, ...lastPluginStyle },
+      className: menuItem.props.className,
     };
   });
+
   return (
     <ResponsiveNavbar
       navClassName={classnames(styles.tab, className)}
+      secondaryNavClassName={secondaryNavClassName}
       style={{ width: '100%', height: '100%' }}
       priority="none"
       tabs={links}
-    />
+    >
+      {children}
+    </ResponsiveNavbar>
   );
 }
 

package/ui/menu/nav-plugin.tsx

@@ -6,6 +6,7 @@ import { ComponentModel } from '../../ui';
 
 export type NavPluginProps = {
   displayName?: string;
+  ignoreQueryParams?: boolean;
 } & LinkProps;
 
 export type NavPlugin = {

package/ui/top-bar-nav/top-bar-nav.tsx

@@ -6,7 +6,15 @@ import { NavPluginProps } from '../menu/nav-plugin';
 
 import styles from './top-bar-nav.module.scss';
 
-export function TopBarNav({ href, className, activeClassName, children, displayName, ...rest }: NavPluginProps) {
+export function TopBarNav({
+  href,
+  className,
+  activeClassName,
+  children,
+  displayName,
+  ignoreQueryParams,
+  ...rest
+}: NavPluginProps) {
   const { search } = useLocation(); // sticky query params
 
   // @hack - this is so that the displayName will not pass to the link and cause a warning in the console.
@@ -15,7 +23,7 @@ export function TopBarNav({ href, className, activeClassName, children, displayN
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const preventPassingDisplayNameToLink = displayName;
 
-  const target = href && `${href}${search}`;
+  const target = (href && !ignoreQueryParams && `${href}${search}`) || href;
 
   return (
     <Link