diff --git a/web/src/beta/lib/reearth-ui/components/Breadcrumb/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Breadcrumb/index.stories.tsx
new file mode 100644
index 0000000000..790cf43481
--- /dev/null
+++ b/web/src/beta/lib/reearth-ui/components/Breadcrumb/index.stories.tsx
@@ -0,0 +1,120 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { PopupMenu, PopupMenuItem as PopupItems } from "@reearth/beta/lib/reearth-ui";
+
+import { Breadcrumb, BreadcrumbProp, BreadcrumbItem } from "./";
+
+const meta: Meta<BreadcrumbProp> = {
+  component: Breadcrumb,
+};
+
+export default meta;
+
+type Story = StoryObj<BreadcrumbProp>;
+
+const defaultItems: BreadcrumbItem[] = [
+  {
+    title: "First",
+  },
+  {
+    title: "Second",
+  },
+  {
+    title: "Third",
+  },
+];
+
+const multiLevelItems: BreadcrumbItem[] = [
+  {
+    title: "First Item",
+    icon: "addStyle",
+    subItem: [
+      {
+        id: "one",
+        title: "Sub Item one",
+        subItem: [
+          {
+            id: "sub-one",
+            title: "Item one",
+          },
+          {
+            id: "sub-two",
+            title: "Item two",
+          },
+        ],
+      },
+      {
+        id: "two",
+        title: "Sub Item two",
+      },
+      {
+        id: "three",
+        title: "Sub Item three",
+      },
+    ],
+  },
+  {
+    title: "Second Item",
+  },
+];
+
+const itemMenu: BreadcrumbItem[] = [
+  {
+    title: "First Item",
+    subItem: [
+      {
+        id: "one-1",
+        title: "Sub Menu 1",
+      },
+      {
+        id: "two-2",
+        title: "Sub Menu 2",
+      },
+    ],
+  },
+  {
+    title: "Second Item",
+  },
+  {
+    title: "Third Item",
+  },
+];
+
+const renderPopupMenu = (items: BreadcrumbItem[], level: number) => {
+  return items.map(item => {
+    if (item.subItem) {
+      return {
+        ...item,
+        title: (
+          <PopupMenu label={item.title} menu={item.subItem as PopupItems[]} nested={level > 0} />
+        ),
+        subItem: undefined,
+      };
+    }
+    return item;
+  });
+};
+
+export const Default: Story = {
+  render: () => (
+    <div style={{ margin: "5px", height: "10vh" }}>
+      <Breadcrumb items={defaultItems} />
+    </div>
+  ),
+};
+
+export const DropdownMenu: Story = {
+  render: () => (
+    <div style={{ margin: "5px", height: "10vh" }}>
+      <Breadcrumb items={renderPopupMenu(itemMenu, 0)} />
+    </div>
+  ),
+};
+
+export const MultiLevelMenu: Story = {
+  render: () => (
+    <div style={{ margin: "5px", height: "10vh" }}>
+      <Breadcrumb items={renderPopupMenu(multiLevelItems, 0)} />
+    </div>
+  ),
+};
diff --git a/web/src/beta/lib/reearth-ui/components/Breadcrumb/index.tsx b/web/src/beta/lib/reearth-ui/components/Breadcrumb/index.tsx
new file mode 100644
index 0000000000..2e6e6eae1e
--- /dev/null
+++ b/web/src/beta/lib/reearth-ui/components/Breadcrumb/index.tsx
@@ -0,0 +1,68 @@
+import { FC, ReactNode } from "react";
+
+import { Icon, IconName, Typography } from "@reearth/beta/lib/reearth-ui";
+import { styled, useTheme } from "@reearth/services/theme";
+
+import { PopupMenuItem } from "../PopupMenu";
+
+export type BreadcrumbItem = {
+  title: string | ReactNode;
+  icon?: IconName;
+  subItem?: PopupMenuItem[];
+};
+
+export type BreadcrumbProp = {
+  items: BreadcrumbItem[];
+  separator?: ReactNode;
+  onClick?: () => void;
+};
+
+export const Breadcrumb: FC<BreadcrumbProp> = ({ items = [], separator = " / ", onClick }) => {
+  const theme = useTheme();
+  return (
+    <Wrapper>
+      {items.map((item, index) => (
+        <ItemWrapper key={index}>
+          <Item onClick={onClick}>
+            {typeof item.title === "string" ? (
+              <>
+                {item.icon && <Icon icon={item.icon} size="small" color={theme.content.weak} />}
+                <Typography weight="bold" size="body">
+                  {item.title}
+                </Typography>
+              </>
+            ) : (
+              item.title
+            )}
+          </Item>
+          {index < items.length - 1 && <Separator>{separator}</Separator>}
+        </ItemWrapper>
+      ))}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  gap: theme.spacing.smallest,
+}));
+
+const ItemWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing.smallest,
+  cursor: "pointer",
+}));
+
+const Item = styled("div")(({ theme }) => ({
+  padding: `${theme.spacing.micro}px ${theme.spacing.small}px`,
+  borderRadius: theme.radius.smallest,
+  display: "flex",
+  gap: theme.spacing.smallest,
+  alignItems: "center",
+}));
+
+const Separator = styled("div")(({ theme }) => ({
+  color: theme.content.weak,
+  userSelect: "none",
+}));
diff --git a/web/src/beta/lib/reearth-ui/components/Button/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Button/index.stories.tsx
index cabd61a2a1..d099db8a10 100644
--- a/web/src/beta/lib/reearth-ui/components/Button/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Button/index.stories.tsx
@@ -19,6 +19,7 @@ export const Default: Story = {
       <Button
         title="Secondary Icon Button"
         icon="settingFilled"
+        iconRight="caretDown"
         onClick={action("secondary-icon-button-click")}
       />
       <Button
@@ -63,6 +64,7 @@ export const Primary: Story = {
         appearance="primary"
         icon="settingFilled"
         onClick={action("primary-icon-button-click")}
+        iconRight="caretDown"
       />
       <Button
         title="Primary Extend"
@@ -113,6 +115,7 @@ export const Dangerous: Story = {
         title="Dangerous Icon Button"
         appearance="dangerous"
         icon="settingFilled"
+        iconRight="caretDown"
         onClick={action("dangerous-icon-button-click")}
       />
       <Button
@@ -164,6 +167,7 @@ export const Simple: Story = {
         title="Simple Icon Button"
         appearance="simple"
         icon="settingFilled"
+        iconRight="caretDown"
         onClick={action("simple-icon-button-click")}
       />
       <Button
diff --git a/web/src/beta/lib/reearth-ui/components/Button/index.tsx b/web/src/beta/lib/reearth-ui/components/Button/index.tsx
index ecced9aa4b..3e343fddf2 100644
--- a/web/src/beta/lib/reearth-ui/components/Button/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Button/index.tsx
@@ -10,6 +10,7 @@ export type ButtonProps = {
   size?: "normal" | "small";
   iconButton?: boolean;
   icon?: IconName;
+  iconRight?: IconName;
   title?: string;
   extendWidth?: boolean;
   minWidth?: number;
@@ -23,6 +24,7 @@ export const Button: FC<ButtonProps> = ({
   size = "normal",
   iconButton,
   title,
+  iconRight,
   extendWidth,
   minWidth,
   onClick,
@@ -38,6 +40,7 @@ export const Button: FC<ButtonProps> = ({
       onClick={onClick}>
       {icon && <Icon icon={icon} />}
       {!iconButton && title}
+      {iconRight && <Icon icon={iconRight} />}
     </StyledButton>
   );
 };
diff --git a/web/src/beta/lib/reearth-ui/components/Icon/Icons/CaretRight.svg b/web/src/beta/lib/reearth-ui/components/Icon/Icons/CaretRight.svg
new file mode 100644
index 0000000000..81ebe96535
--- /dev/null
+++ b/web/src/beta/lib/reearth-ui/components/Icon/Icons/CaretRight.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+<path d="M6 3L11 8L6 13" stroke="#E0E0E0" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/web/src/beta/lib/reearth-ui/components/Icon/icons.ts b/web/src/beta/lib/reearth-ui/components/Icon/icons.ts
index 51efebe804..d77d47e3ba 100644
--- a/web/src/beta/lib/reearth-ui/components/Icon/icons.ts
+++ b/web/src/beta/lib/reearth-ui/components/Icon/icons.ts
@@ -14,6 +14,7 @@ import CaretDoubleLeft from "./Icons/CaretDoubleLeft.svg?react";
 import CaretDoubleRight from "./Icons/CaretDoubleRight.svg?react";
 import CaretDown from "./Icons/CaretDown.svg?react";
 import CaretLeft from "./Icons/CaretLeft.svg?react";
+import CaretRight from "./Icons/CaretRight.svg?react";
 import CaretUp from "./Icons/CaretUp.svg?react";
 import Check from "./Icons/Check.svg?react";
 import Checked from "./Icons/Checked.svg?react";
@@ -128,6 +129,7 @@ export default {
   caretDoubleLeft: CaretDoubleLeft,
   caretDoubleRight: CaretDoubleRight,
   caretDown: CaretDown,
+  caretRight: CaretRight,
   caretLeft: CaretLeft,
   caretUp: CaretUp,
   check: Check,
diff --git a/web/src/beta/lib/reearth-ui/components/Popup/hooks.ts b/web/src/beta/lib/reearth-ui/components/Popup/hooks.ts
index c738cc91eb..8f32f3981b 100644
--- a/web/src/beta/lib/reearth-ui/components/Popup/hooks.ts
+++ b/web/src/beta/lib/reearth-ui/components/Popup/hooks.ts
@@ -7,6 +7,8 @@ import {
   useClick,
   useDismiss,
   useInteractions,
+  useHover,
+  safePolygon,
 } from "@floating-ui/react";
 import { useCallback, useMemo, useState } from "react";
 
@@ -18,6 +20,7 @@ const usePopover = ({
   offset: offsetProps,
   shift: shiftProps,
   onOpenChange,
+  triggerOnHover = false,
 }: Omit<PopupProps, "children" | "trigger">) => {
   const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
 
@@ -55,8 +58,12 @@ const usePopover = ({
 
   const click = useClick(context);
   const dismiss = useDismiss(context);
+  const hover = useHover(context, {
+    enabled: triggerOnHover,
+    handleClose: safePolygon(),
+  });
 
-  const interactions = useInteractions([click, dismiss]);
+  const interactions = useInteractions([hover, click, dismiss]);
 
   return useMemo(
     () => ({
diff --git a/web/src/beta/lib/reearth-ui/components/Popup/index.tsx b/web/src/beta/lib/reearth-ui/components/Popup/index.tsx
index b7298e722e..78d8ede3d9 100644
--- a/web/src/beta/lib/reearth-ui/components/Popup/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Popup/index.tsx
@@ -75,18 +75,26 @@ export type PopupProps = {
   children?: ReactNode;
   trigger?: ReactNode;
   disabled?: boolean;
+  triggerOnHover?: boolean;
   placement?: Placement;
   open?: boolean;
   offset?: OffsetOptions;
   shift?: ShiftOptions;
+  nested?: boolean;
   onOpenChange?: (open: boolean) => void;
 };
 
-export const Popup = ({ children, trigger, disabled, ...restOptions }: PopupProps) => {
-  const popover = usePopover({ ...restOptions });
+export const Popup = ({
+  children,
+  trigger,
+  disabled,
+  triggerOnHover,
+  ...restOptions
+}: PopupProps) => {
+  const popover = usePopover({ ...restOptions, triggerOnHover });
 
   return (
-    <PopoverContext.Provider value={popover}>
+    <PopoverContext.Provider value={{ ...popover, setOpen: popover.setOpen }}>
       <Trigger disabled={disabled}>{trigger}</Trigger>
       <Content>{children}</Content>
     </PopoverContext.Provider>
@@ -96,6 +104,7 @@ export const Popup = ({ children, trigger, disabled, ...restOptions }: PopupProp
 const TriggerWrapper = styled("div")<{ disabled?: boolean }>(({ disabled }) => ({
   width: "fit-content",
   pointerEvents: disabled ? "none" : "auto",
+  flex: 1,
 }));
 
 const ContentWrapper = styled("div")(({ theme }) => ({
diff --git a/web/src/beta/lib/reearth-ui/components/PopupMenu/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/PopupMenu/index.stories.tsx
new file mode 100644
index 0000000000..33aeb79207
--- /dev/null
+++ b/web/src/beta/lib/reearth-ui/components/PopupMenu/index.stories.tsx
@@ -0,0 +1,143 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { BrowserRouter } from "react-router-dom";
+
+import { Button } from "../Button";
+
+import { PopupMenu, PopupMenuProps, PopupMenuItem } from ".";
+
+const meta: Meta<PopupMenuProps> = {
+  component: PopupMenu,
+};
+
+export default meta;
+
+type Story = StoryObj<PopupMenuProps>;
+
+const defaultItems: PopupMenuItem[] = [
+  {
+    id: "1",
+    title: "First",
+  },
+  {
+    id: "2",
+    title: "Second",
+    path: "/second",
+  },
+  {
+    id: "3",
+    title: "Third",
+    path: "/third",
+  },
+];
+
+const menuItems: PopupMenuItem[] = [
+  {
+    id: "menu-1",
+    title: "Text",
+    icon: "textT",
+  },
+  {
+    id: "menu-2",
+    title: "Image",
+    icon: "imageFilled",
+    subItem: [
+      {
+        id: "2-a",
+        title: "menu-item",
+        icon: "book",
+      },
+      {
+        id: "2-b",
+        title: "menu-item",
+        icon: "book",
+      },
+    ],
+  },
+  {
+    id: "menu-3",
+    title: "Camera",
+    icon: "camera",
+  },
+  {
+    id: "menu-4",
+    title: "Video",
+    icon: "videoFilled",
+  },
+];
+
+const multlevelItems: PopupMenuItem[] = [
+  {
+    id: "item-1",
+    title: "First Item",
+    subItem: [
+      {
+        id: "1-a",
+        title: "sub menu-item",
+      },
+      {
+        id: "1-c",
+        title: "sub menu-item",
+      },
+    ],
+  },
+  {
+    id: "item-2",
+    title: "Second Item",
+  },
+  {
+    id: "item-3",
+    title: "Third Item",
+    subItem: [
+      {
+        id: "3-a",
+        title: "Third sub menu-item",
+      },
+      {
+        id: "3-b",
+        title: "Third sub menu-item",
+      },
+    ],
+  },
+];
+
+export const Default: Story = {
+  render: () => (
+    <BrowserRouter>
+      <div style={{ margin: "5px", height: "100px" }}>
+        <PopupMenu label="Dropsown Menu" menu={defaultItems} />
+      </div>
+    </BrowserRouter>
+  ),
+};
+
+export const CustomLabel: Story = {
+  render: () => (
+    <BrowserRouter>
+      <div style={{ margin: "5px", height: "100px" }}>
+        <PopupMenu
+          label={<Button title="Multile Menu" iconRight="caretDown" />}
+          menu={defaultItems}
+        />
+      </div>
+    </BrowserRouter>
+  ),
+};
+
+export const MultilevelMenu: Story = {
+  render: () => (
+    <div style={{ margin: "5px", height: "120px" }}>
+      <PopupMenu label="Multilevel Menu" icon="data" menu={multlevelItems} width={200} />
+    </div>
+  ),
+};
+
+export const IconsMenu: Story = {
+  render: () => (
+    <div style={{ margin: "5px", height: "120px" }}>
+      <PopupMenu
+        label={<Button appearance="primary" iconButton={true} icon="settingFilled" />}
+        menu={menuItems}
+      />
+    </div>
+  ),
+};
diff --git a/web/src/beta/lib/reearth-ui/components/PopupMenu/index.tsx b/web/src/beta/lib/reearth-ui/components/PopupMenu/index.tsx
new file mode 100644
index 0000000000..74bdc0ef54
--- /dev/null
+++ b/web/src/beta/lib/reearth-ui/components/PopupMenu/index.tsx
@@ -0,0 +1,128 @@
+import { FC, ReactNode, useCallback, useState } from "react";
+import { Link } from "react-router-dom";
+
+import { Popup, Icon, Typography, IconName } from "@reearth/beta/lib/reearth-ui";
+import { styled, useTheme } from "@reearth/services/theme";
+
+const MULTLEVEL_OFFSET = 6;
+const DEFAULT_OFFSET = 4;
+const DEFAULT_MENU_WIDTH = 180;
+
+export type PopupMenuItem = {
+  id: string;
+  title?: string;
+  path?: string;
+  icon?: IconName;
+  subItem?: PopupMenuItem[];
+  onClick?: (id: string) => void;
+};
+
+export type PopupMenuProps = {
+  label?: string | ReactNode;
+  icon?: IconName;
+  menu: PopupMenuItem[];
+  nested?: boolean;
+  width?: number;
+  triggerOnHover?: boolean;
+};
+
+export const PopupMenu: FC<PopupMenuProps> = ({ label, menu, nested, width, icon }) => {
+  const [open, setOpen] = useState(false);
+  const [hoveredItemIndex, setHoveredItemIndex] = useState<number | null>(null);
+  const theme = useTheme();
+
+  const handlePopOver = useCallback(() => setOpen(!open), [open]);
+
+  const renderMenuItems = (menuItems: PopupMenuItem[]) => {
+    return (
+      <PopupMenuWrapper width={width}>
+        {menuItems.map(({ title, path, icon, subItem, id, onClick }, index) => (
+          <Item
+            key={index}
+            onMouseEnter={() => setHoveredItemIndex(index)}
+            onMouseLeave={() => setHoveredItemIndex(null)}
+            isHovered={hoveredItemIndex === index}
+            onClick={() => onClick?.(id)}>
+            {icon && <Icon icon={icon} size="small" color={theme.content.weak} />}
+            {subItem ? (
+              <PopupMenu label={title} menu={subItem} width={width} nested />
+            ) : path ? (
+              <StyledLink to={path}>
+                <Typography size="body">{title}</Typography>
+              </StyledLink>
+            ) : (
+              <Typography size="body">{title}</Typography>
+            )}
+          </Item>
+        ))}
+      </PopupMenuWrapper>
+    );
+  };
+
+  const renderTrigger = () => {
+    return typeof label === "string" ? (
+      <>
+        {icon && <Icon icon={icon} size="small" />}
+        <Typography size="body" weight="regular">
+          {label}
+        </Typography>
+        <Icon color={theme.content.weak} icon={nested ? "caretRight" : "caretDown"} size="small" />
+      </>
+    ) : label ? (
+      label
+    ) : icon ? (
+      <Icon icon={icon} size="small" />
+    ) : null;
+  };
+
+  return (
+    <Popup
+      placement={nested ? "right-start" : "bottom-start"}
+      offset={nested ? MULTLEVEL_OFFSET : DEFAULT_OFFSET}
+      onOpenChange={handlePopOver}
+      triggerOnHover={nested ? true : false}
+      trigger={
+        <TriggerWrapper onClick={handlePopOver} nested={nested}>
+          {renderTrigger()}
+        </TriggerWrapper>
+      }>
+      {renderMenuItems(menu)}
+    </Popup>
+  );
+};
+
+const TriggerWrapper = styled("div")<{ nested?: boolean }>(({ nested, theme }) => ({
+  cursor: "pointer",
+  display: "flex",
+  gap: theme.spacing.smallest,
+  alignItems: "center",
+  justifyContent: nested ? "space-between" : "normal",
+}));
+
+const PopupMenuWrapper = styled("div")<{ width?: number }>(({ width, theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: `${theme.spacing.micro}px`,
+  padding: `${theme.spacing.micro}px`,
+  backgroundColor: `${theme.bg[1]}`,
+  boxShadow: `${theme.shadow.popup}`,
+  borderRadius: `${theme.radius.small}px`,
+  width: width ? `${width}px` : DEFAULT_MENU_WIDTH,
+}));
+
+const Item = styled("div")<{ isHovered?: boolean }>(({ theme, isHovered }) => ({
+  display: "flex",
+  gap: theme.spacing.smallest,
+  alignItems: "center",
+  padding: `${theme.spacing.micro}px ${theme.spacing.smallest}px`,
+  borderRadius: `${theme.radius.smallest}px`,
+  cursor: "pointer",
+  backgroundColor: isHovered ? `${theme.bg[2]}` : "transparent",
+  ["&:hover"]: {
+    backgroundColor: `${theme.bg[2]}`,
+  },
+}));
+
+const StyledLink = styled(Link)(() => ({
+  textDecoration: "none",
+}));
diff --git a/web/src/beta/lib/reearth-ui/components/index.ts b/web/src/beta/lib/reearth-ui/components/index.ts
index c090b5826e..97060b3227 100644
--- a/web/src/beta/lib/reearth-ui/components/index.ts
+++ b/web/src/beta/lib/reearth-ui/components/index.ts
@@ -2,10 +2,11 @@ export * from "./Button";
 export * from "./Icon";
 export * from "./NumberInput";
 export * from "./Popup";
+export * from "./PopupMenu";
+export * from "./PopupPanel";
 export * from "./TextArea";
 export * from "./TextInput";
 export * from "./Typography";
-export * from "./PopupPanel";
 export * from "./CodeInput";
 export * from "./Collapse";
 export * from "./Switcher";
@@ -14,3 +15,4 @@ export * from "./Modal";
 export * from "./ColorInput";
 export * from "./DatePicker";
 export * from "./TimePicker";
+export * from "./Breadcrumb";
diff --git a/web/src/services/theme/reearthTheme/common/globalStyles.tsx b/web/src/services/theme/reearthTheme/common/globalStyles.tsx
index a47879ff68..8eb5e873f2 100644
--- a/web/src/services/theme/reearthTheme/common/globalStyles.tsx
+++ b/web/src/services/theme/reearthTheme/common/globalStyles.tsx
@@ -92,6 +92,10 @@ export const styles = css`
   .Resizer.disabled:hover {
     border-color: transparent;
   }
+
+  *:focus {
+    outline: none;
+  }
 `;
 
 const GlobalStyles: React.FC = () => <Global styles={styles} />;