The Menu component is used to display a dropdown list of actions or options triggered by an anchor element such as a button.

• Composable API: Uses anchor and items snippets for full flexibility.
• Trigger-based: Opens via click or hover depending on configuration.
• Action-ready items: Supports interactive menu actions with callbacks.
• Flexible styling: Can adapt to different backgrounds and layouts.

Usage Example

Preview

open on hover

Edit Print

isTranslucent

Edit Print

open 2

Lorem ipsum dolor sit amet consectetur adipisicing elit

Code

<script lang="ts">
  import { Button, Menu } from "@fefade-ui/svelte"
</script>

<div
  style="
    display: flex;
    gap: 1rem;
    justify-content: space-around;
    padding: 1rem;
    flex-wrap: wrap;
    align-items: baseline;
    "
>
  <Menu id="menu1" openOnHover>
    {#snippet anchor()}
      <Button>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          height="24px"
          viewBox="0 -960 960 960"
          width="24px"
          fill="currentColor"
        >
          <path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z" />
        </svg>
        <span>open on hover</span>
      </Button>
    {/snippet}

    {#snippet items()}
      <Menu.Item
        onclick={() => {
          console.log("edit")
        }}
      >
        Edit
      </Menu.Item>
      <Menu.Item
        onclick={() => {
          console.log("print")
        }}
      >
        Print
      </Menu.Item>
    {/snippet}
  </Menu>

  <div
    style="
    background: linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
        height: 150px;
        border-radius: 5px;
        padding: 1rem;
        "
  >
    <Menu id="menu2" isTranslucent>
      {#snippet anchor()}
        <Button>
          <span>isTranslucent</span>
        </Button>
      {/snippet}

      {#snippet items()}
        <Menu.Item
          onclick={() => {
            console.log("edit")
          }}
        >
          Edit
        </Menu.Item>
        <Menu.Item
          onclick={() => {
            console.log("print")
          }}
        >
          Print
        </Menu.Item>
      {/snippet}
    </Menu>
  </div>

  <Menu id="menu3">
    {#snippet anchor()}
      <Button>
        <span>open 2</span>
      </Button>
    {/snippet}

    {#snippet items()}
      <Menu.Item>Lorem ipsum dolor sit</Menu.Item>
      <Menu.Item>amet consectetur adipisicing elit</Menu.Item>
    {/snippet}
  </Menu>
</div>

Props

Menu

Prop	Type	Default	Description
id	string	—	Unique identifier for the menu instance.
openOnHover	boolean	false	If true, opens the menu on hover instead of click.
isTranslucent	boolean	false	Applies a translucent background style to the menu.

Menu.Item

Prop	Type	Default	Description
onclick	function	—	Callback executed when the item is clicked.
children	node	—	Content displayed inside the menu item.

Best Practices

• Always provide a unique id for proper menu isolation.
• Keep menu items short and action-oriented.
• Avoid placing heavy UI inside Menu.Item.
• Prefer clear verbs for actions (e.g. “Edit”, “Delete”, “Export”).
• Use openOnHover only for non-critical actions to avoid accidental triggers.