bottom_panel_open

Button menu

Button that opens a menu of actions.

Button Menu Examples

Expandable menu that wraps a trigger Button and renders menu items + a Close button. Fixed triggers should behave like real UI, so the docs use a portal to keep them out of the preview container.

Fixed showcase (recommended)

A single switch mounts/unmounts a set of fixed menus. The menus are portaled to document.body, so they are truly fixed and not constrained by the preview box.

• The trigger is replaced while the menu is open (expected behavior of Button_menu).

• Use the Show/Hide switch to remount the component (useful while documenting/testing).

Controller (menus render outside)

Menus render via portal to document.body, so they behave as real fixed UI (not inside the preview box).

import React from "react";
import { createPortal } from "react-dom";
import Button_menu from "@/_components/buttons_variants/button_menu/Button_menu";
import { Button } from "@/_components/buttons_variants/buttons/Button";
import Icon from "@/_components/icon/Icon";

function FixedMenusPortal(props: { open: boolean }) {
  const [mounted, setMounted] = React.useState(false);

  React.useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return null;
  if (!props.open) return null;

  return createPortal(
    <>
      {/* Place your fixed Button_menu instances here (up-left / up-right / down-left / down-right). */}
      <Button_menu
        closeLabel="Close"
        directionMenuOpenAndClose="top"
        speedAnimation="fade"
        parentButton={
          <Button
            variant="primary"
            size="large"
            isFixed
            fixedPosition="down-right"
            variantRadio="full"
            ripple
            ariaLabel="Open actions"
            iconContent={<Icon name="add" />}
          />
        }
      >
        {[
          <Button key="a" variant="primary" ripple>Action A</Button>,
          <Button key="b" variant="secondary" ripple>Action B</Button>,
        ]}
      </Button_menu>
    </>,
    document.body
  );
}

export default function Example() {
  const [show, setShow] = React.useState(false);

  return (
    <div style={{ display: "grid", gap: 10 }}>
      <Button variant={show ? "danger" : "success"} ripple onClick={() => setShow((v) => !v)}>
        {show ? "Hide fixed menus" : "Show fixed menus"}
      </Button>

      <FixedMenusPortal open={show} />
    </div>
  );
}

Inline (non-fixed) behavior

If the trigger button is not fixed, the menu expands from the same place in the layout.

Live preview

import React from "react";
import Button_menu from "@/packages/ui/src/_components/buttons_variants/button_menu/Button_menu";
import { Button } from "@/packages/ui/src/_components/buttons_variants/buttons/Button";
import Icon from "@/packages/ui/src/_components/icon/Icon";

export default function Example() {
  const [show, setShow] = React.useState(true);

  return (
    <div style={{ display: "grid", gap: 10 }}>
      <Button variant={show ? "danger" : "success"} ripple onClick={() => setShow((v) => !v)}>
        {show ? "Hide inline menu" : "Show inline menu"}
      </Button>

      {show ? (
        <Button_menu
          parentButton={
            <Button variant="primary" ripple iconPosition="left" iconContent={<Icon name="menu" style="rounded" />}>
              Open menu
            </Button>
          }
          directionMenuOpenAndClose="top"
          speedAnimation="ease-in-out"
          closeLabel="Close"
        >
          {[
            <Button key="a" variant="primary" ripple>Action A</Button>,
            <Button key="b" variant="secondary" ripple>Action B</Button>,
            <Button key="c" variant="tertiary" ripple>Action C</Button>,
          ]}
        </Button_menu>
      ) : null}
    </div>
  );
}

On this page

Button Menu Props

Button Menu — Props
Prop	Type	Required	Default	Description
parentButton	ReactElement<IButtonProps, typeof Button>	Yes	—	Trigger button. When closed, only this renders. When opened, a Close button is rendered using the same props as this trigger button.
children	ReactElement<IButtonProps, typeof Button>[]	Yes	—	Menu items rendered inside the open menu container (usually an array of <Button />).
directionMenuOpenAndClose	"top" \| "bottom"	Yes	—	Menu open direction (adds a direction class to the menu root).
speedAnimation	"fast" \| "slow" \| "fade" \| "ease-in" \| "ease-out" \| "ease-in-out"	No	"ease-in-out"	Animation preset (adds an animation class to the menu root).
closeLabel	string	No	""	Optional label text for the Close button (the Close button also shows a close icon).