GitHub

Fab menu

Installation

1. Install dependencies

npm install motion

2. Install fab menu

npx shadcn-animated add fab-menu

Usage

1
import { FabMenu, FabMenuContent, FabMenuItem, FabMenuTrigger } from "@/components/ui/fab-menu";
1
<FabMenu>
2
  <FabMenuTrigger />
3
    <FabMenuContent align="center">
4
        <FabMenuItem>📧 Send an email</FabMenuItem>
5
        <FabMenuItem>💬 Send a message</FabMenuItem>
6
        <FabMenuItem>☀️ Make a reminder</FabMenuItem>
7
    </FabMenuContent>
8
</FabMenu>

Add custom trigger

1
<FabMenu>
2
  <FabMenuTrigger>Custom trigger</FabMenuTrigger>
3
    <FabMenuContent>
4
      <FabMenuItem>📧 Send an email</FabMenuItem>
5
      <FabMenuItem>💬 Send a message</FabMenuItem>
6
      <FabMenuItem>☀️ Make a reminder</FabMenuItem>
7
    </FabMenuContent>
8
</FabMenu>

Change alignment

Left
Center
Right
1
<FabMenu>
2
  <FabMenuTrigger>Custom trigger</FabMenuTrigger>
3
    <FabMenuContent align="left">
4
      <FabMenuItem>📧 Send an email</FabMenuItem>
5
      <FabMenuItem>💬 Send a message</FabMenuItem>
6
      <FabMenuItem>☀️ Make a reminder</FabMenuItem>
7
    </FabMenuContent>
8
</FabMenu>
1
<FabMenu>
2
  <FabMenuTrigger>Custom trigger</FabMenuTrigger>
3
    <FabMenuContent align="center">
4
      <FabMenuItem>📧 Send an email</FabMenuItem>
5
      <FabMenuItem>💬 Send a message</FabMenuItem>
6
      <FabMenuItem>☀️ Make a reminder</FabMenuItem>
7
    </FabMenuContent>
8
</FabMenu>
1
<FabMenu>
2
  <FabMenuTrigger>Custom trigger</FabMenuTrigger>
3
    <FabMenuContent align="right">
4
      <FabMenuItem>📧 Send an email</FabMenuItem>
5
      <FabMenuItem>💬 Send a message</FabMenuItem>
6
      <FabMenuItem>☀️ Make a reminder</FabMenuItem>
7
    </FabMenuContent>
8
</FabMenu>

Next