diff --git a/packages/twenty-ui/src/navigation/index.ts b/packages/twenty-ui/src/navigation/index.ts
index 031a1c8430..72580cf6eb 100644
--- a/packages/twenty-ui/src/navigation/index.ts
+++ b/packages/twenty-ui/src/navigation/index.ts
@@ -18,39 +18,41 @@ export { UndecoratedLink } from './link/components/UndecoratedLink';
export { CAL_LINK } from './link/constants/Cal';
export { GITHUB_LINK } from './link/constants/GithubLink';
export { TWENTY_PRICING_LINK } from './link/constants/TwentyPricingLink';
+export type { MenuPickerProps } from './menu/components/MenuPicker';
+export { MenuPicker } from './menu/components/MenuPicker';
export type {
MenuItemIconButton,
MenuItemProps,
-} from './menu-item/components/MenuItem';
-export { MenuItem } from './menu-item/components/MenuItem';
-export type { MenuItemAvatarProps } from './menu-item/components/MenuItemAvatar';
-export { MenuItemAvatar } from './menu-item/components/MenuItemAvatar';
-export type { MenuItemCommandProps } from './menu-item/components/MenuItemCommand';
-export { MenuItemCommand } from './menu-item/components/MenuItemCommand';
-export type { MenuItemCommandHotKeysProps } from './menu-item/components/MenuItemCommandHotKeys';
-export { MenuItemCommandHotKeys } from './menu-item/components/MenuItemCommandHotKeys';
-export type { MenuItemDraggableProps } from './menu-item/components/MenuItemDraggable';
-export { MenuItemDraggable } from './menu-item/components/MenuItemDraggable';
-export { MenuItemMultiSelect } from './menu-item/components/MenuItemMultiSelect';
-export { MenuItemMultiSelectAvatar } from './menu-item/components/MenuItemMultiSelectAvatar';
-export { MenuItemMultiSelectTag } from './menu-item/components/MenuItemMultiSelectTag';
-export type { MenuItemNavigateProps } from './menu-item/components/MenuItemNavigate';
-export { MenuItemNavigate } from './menu-item/components/MenuItemNavigate';
+} from './menu/menu-item/components/MenuItem';
+export { MenuItem } from './menu/menu-item/components/MenuItem';
+export type { MenuItemAvatarProps } from './menu/menu-item/components/MenuItemAvatar';
+export { MenuItemAvatar } from './menu/menu-item/components/MenuItemAvatar';
+export type { MenuItemCommandProps } from './menu/menu-item/components/MenuItemCommand';
+export { MenuItemCommand } from './menu/menu-item/components/MenuItemCommand';
+export type { MenuItemCommandHotKeysProps } from './menu/menu-item/components/MenuItemCommandHotKeys';
+export { MenuItemCommandHotKeys } from './menu/menu-item/components/MenuItemCommandHotKeys';
+export type { MenuItemDraggableProps } from './menu/menu-item/components/MenuItemDraggable';
+export { MenuItemDraggable } from './menu/menu-item/components/MenuItemDraggable';
+export { MenuItemMultiSelect } from './menu/menu-item/components/MenuItemMultiSelect';
+export { MenuItemMultiSelectAvatar } from './menu/menu-item/components/MenuItemMultiSelectAvatar';
+export { MenuItemMultiSelectTag } from './menu/menu-item/components/MenuItemMultiSelectTag';
+export type { MenuItemNavigateProps } from './menu/menu-item/components/MenuItemNavigate';
+export { MenuItemNavigate } from './menu/menu-item/components/MenuItemNavigate';
export {
StyledMenuItemSelect,
MenuItemSelect,
-} from './menu-item/components/MenuItemSelect';
-export { MenuItemSelectAvatar } from './menu-item/components/MenuItemSelectAvatar';
+} from './menu/menu-item/components/MenuItemSelect';
+export { MenuItemSelectAvatar } from './menu/menu-item/components/MenuItemSelectAvatar';
export {
colorLabels,
MenuItemSelectColor,
-} from './menu-item/components/MenuItemSelectColor';
-export { MenuItemSelectTag } from './menu-item/components/MenuItemSelectTag';
-export type { MenuItemSuggestionProps } from './menu-item/components/MenuItemSuggestion';
-export { MenuItemSuggestion } from './menu-item/components/MenuItemSuggestion';
-export { MenuItemToggle } from './menu-item/components/MenuItemToggle';
-export { MenuItemLeftContent } from './menu-item/internals/components/MenuItemLeftContent';
-export type { MenuItemBaseProps } from './menu-item/internals/components/StyledMenuItemBase';
+} from './menu/menu-item/components/MenuItemSelectColor';
+export { MenuItemSelectTag } from './menu/menu-item/components/MenuItemSelectTag';
+export type { MenuItemSuggestionProps } from './menu/menu-item/components/MenuItemSuggestion';
+export { MenuItemSuggestion } from './menu/menu-item/components/MenuItemSuggestion';
+export { MenuItemToggle } from './menu/menu-item/components/MenuItemToggle';
+export { MenuItemLeftContent } from './menu/menu-item/internals/components/MenuItemLeftContent';
+export type { MenuItemBaseProps } from './menu/menu-item/internals/components/StyledMenuItemBase';
export {
StyledMenuItemBase,
StyledMenuItemLabel,
@@ -60,8 +62,8 @@ export {
StyledDraggableItem,
StyledHoverableMenuItemBase,
StyledMenuItemIconCheck,
-} from './menu-item/internals/components/StyledMenuItemBase';
-export type { MenuItemAccent } from './menu-item/types/MenuItemAccent';
+} from './menu/menu-item/internals/components/StyledMenuItemBase';
+export type { MenuItemAccent } from './menu/menu-item/types/MenuItemAccent';
export { NavigationBar } from './navigation-bar/components/NavigationBar';
export { NavigationBarItem } from './navigation-bar/components/NavigationBarItem';
export { NotificationCounter } from './notification-counter/components/NotificationCounter';
diff --git a/packages/twenty-ui/src/navigation/menu/components/MenuPicker.tsx b/packages/twenty-ui/src/navigation/menu/components/MenuPicker.tsx
new file mode 100644
index 0000000000..8073a9a765
--- /dev/null
+++ b/packages/twenty-ui/src/navigation/menu/components/MenuPicker.tsx
@@ -0,0 +1,152 @@
+import { css, useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { type IconComponent } from '@ui/display';
+
+const StyledMenuItemPicker = styled.button<{
+ selected: boolean;
+ disabled: boolean;
+}>`
+ box-sizing: border-box;
+ background: none;
+ font: inherit;
+ outline: inherit;
+ color: inherit;
+ align-items: center;
+ border: 1px solid ${({ theme }) => theme.border.color.medium};
+ border-radius: ${({ theme }) => theme.border.radius.sm};
+ cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ gap: ${({ theme }) => theme.spacing(1)};
+ justify-content: center;
+ min-height: ${({ theme }) => theme.spacing(8)};
+ padding: ${({ theme }) => `${theme.spacing(1.5)} ${theme.spacing(1)}`};
+ transition: all ${({ theme }) => theme.animation.duration.instant}s ease;
+ user-select: none;
+ width: 100%;
+
+ ${({ theme, selected, disabled }) => {
+ if (disabled) {
+ return css`
+ background: inherit;
+ border-color: ${theme.border.color.medium};
+ color: ${theme.font.color.tertiary};
+ cursor: default;
+
+ &:hover {
+ background: inherit;
+ }
+ `;
+ }
+
+ if (selected) {
+ return css`
+ background: transparent;
+ border-color: ${theme.color.blue};
+ color: ${theme.color.blue};
+
+ &:hover {
+ background: ${theme.background.transparent.primary};
+ }
+ `;
+ }
+
+ return css`
+ background: transparent;
+ border-color: ${theme.border.color.medium};
+ color: ${theme.font.color.tertiary};
+
+ &:hover {
+ background: ${theme.background.transparent.light};
+ }
+ `;
+ }}
+`;
+
+const StyledIconContainer = styled.div`
+ align-items: center;
+ display: flex;
+ flex-shrink: 0;
+ height: ${({ theme }) => theme.icon.size.md}px;
+ justify-content: center;
+ width: ${({ theme }) => theme.icon.size.md}px;
+`;
+
+const StyledLabel = styled.div<{
+ disabled: boolean;
+ selected: boolean;
+}>`
+ font-family: ${({ theme }) => theme.font.family};
+ font-size: ${({ theme }) => theme.font.size.xs};
+ font-weight: ${({ theme }) => theme.font.weight.semiBold};
+ line-height: 1;
+ max-width: 100%;
+ overflow: hidden;
+ text-align: center;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ ${({ theme, selected, disabled }) => {
+ if (disabled) {
+ return css`
+ color: ${theme.font.color.tertiary};
+ `;
+ }
+
+ if (selected) {
+ return css`
+ color: ${theme.color.blue};
+ `;
+ }
+
+ return css`
+ color: ${theme.font.color.tertiary};
+ `;
+ }}
+`;
+
+export type MenuPickerProps = {
+ className?: string;
+ disabled?: boolean;
+ icon: IconComponent;
+ label: string;
+ onClick?: () => void;
+ selected?: boolean;
+ showLabel?: boolean;
+ testId?: string;
+};
+
+export const MenuPicker = ({
+ icon: Icon,
+ label,
+ selected = false,
+ disabled = false,
+ showLabel = true,
+ onClick,
+ className,
+ testId,
+}: MenuPickerProps) => {
+ const theme = useTheme();
+
+ return (
+
+
+
+
+
+ {showLabel && (
+
+ {label}
+
+ )}
+
+ );
+};
diff --git a/packages/twenty-ui/src/navigation/menu/components/__stories__/MenuPicker.stories.tsx b/packages/twenty-ui/src/navigation/menu/components/__stories__/MenuPicker.stories.tsx
new file mode 100644
index 0000000000..d167edaa12
--- /dev/null
+++ b/packages/twenty-ui/src/navigation/menu/components/__stories__/MenuPicker.stories.tsx
@@ -0,0 +1,86 @@
+import styled from '@emotion/styled';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { IconChartPie } from '@ui/display';
+import { MenuPicker } from '@ui/navigation/menu/components/MenuPicker';
+import { ComponentDecorator } from '@ui/testing';
+
+const meta: Meta = {
+ title: 'UI/Navigation/Menu/MenuPicker',
+ component: MenuPicker,
+ decorators: [ComponentDecorator],
+ args: {
+ icon: IconChartPie,
+ label: 'Chart',
+ selected: false,
+ disabled: false,
+ showLabel: true,
+ },
+ argTypes: {
+ icon: {
+ control: false,
+ },
+ onClick: {
+ action: 'clicked',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Selected: Story = {
+ args: {
+ selected: true,
+ },
+};
+
+export const Disabled: Story = {
+ args: {
+ disabled: true,
+ },
+};
+
+export const WithoutLabel: Story = {
+ args: {
+ showLabel: false,
+ },
+};
+
+const StyledTitle = styled.h4`
+ align-items: center;
+ color: ${({ theme }) => theme.font.color.tertiary};
+ font-size: 12px;
+ margin-bottom: 8px;
+`;
+
+export const AllStates: Story = {
+ render: () => (
+
+
+ Default
+
+
+
+ Selected
+
+
+
+ Disabled
+
+
+
+ No Label
+
+
+