LinkedIn GitHub Medium

FloatingMenuButton is a lightweight SwiftUI floating action button (FAB) that expands into a menu of actions.

FloatingMenuButton renders a FAB anchored to an edge of your view. When tapped, it expands a menu card with a list of items. The menu dismisses when you tap an item or tap outside the card.

• Swift 6
• SwiftUI
• Platforms:
  • iOS 16
  • macOS 12
  • tvOS 16

In Xcode:

1. File > Add Package Dependencies...
2. Paste the repository URL:

   https://github.com/andr3a88/FloatingMenuButton
   

3. Add the FloatingMenuButton product to your target

Or in Package.swift:

dependencies: [
 // Replace "main" with your preferred branch or version tag
 .package(url: "https://github.com/andr3a88/FloatingMenuButton", from: "1.0.0")
],
targets: [
 .target(
 name: "YourTarget",
 dependencies: [
 .product(name: "FloatingMenuButton", package: "FloatingMenuButton")
 ]
 )
]

import SwiftUI
import FloatingMenuButton
struct ContentView: View {
 var body: some View {
 ZStack(alignment: .bottomTrailing) {
 Color(.systemGroupedBackground).ignoresSafeArea()
 FloatingMenuButton(
 items: [
 FloatingMenuItem(
 title: "Video",
 subtitle: "Add a video",
 systemImage: "video",
 color: .red
 ) {
 // handle video
 },
 FloatingMenuItem(
 title: "Photo",
 subtitle: "Add a photo",
 systemImage: "photo",
 color: .green
 ) {
 // handle photo
 },
 FloatingMenuItem(
 title: "Message",
 systemImage: "message",
 color: .blue
 ) {
 // handle message
 }
 ],
 fabText: "Add",
 fabTextColor: .black,
 fabColor: .orange,
 fabFont: .body,
 fabIcon: "plus",
 fabIconExpanded: "close",
 fabAssetIconExpanded: "cart"
 )
 }
 }
}

Use assetImage to load icons from your app's asset catalog. You can also provide asset icons for the FAB.

FloatingMenuItem(
 title: "Profile",
 subtitle: "From xcassets",
 assetImage: "CustomIcon",
 color: .purple
) {
 // handle profile
}

public init(
 items: [FloatingMenuItem] = [],
 fabText: String? = nil,
 fabTextColor: Color = .primary,
 fabColor: Color,
 fabFont: Font = .body,
 fabIcon: String = "plus",
 fabIconExpanded: String = "xmark",
 fabAssetIcon: String? = nil,
 fabAssetIconExpanded: String? = nil,
 cornerRadius: CGFloat = 15,
 alignment: Alignment = .bottomTrailing,
 onFabAction: (() -> Void)? = nil
)

Parameters:

• items: Menu items displayed in the expanded card. If empty, the FAB triggers onFabAction.
• fabText: Optional label next to the FAB icon (only shown while collapsed).
• fabTextColor: Color for the FAB icon and text.
• fabColor: Background color for the FAB.
• fabFont: Font for the FAB icon and text.
• fabIcon: SF Symbol name for the collapsed state.
• fabIconExpanded: SF Symbol name for the expanded state.
• fabAssetIcon: Asset catalog image name for the collapsed state (optional).
• fabAssetIconExpanded: Asset catalog image name for the expanded state (optional).
• cornerRadius: Corner radius for the expanded menu card (15 by default).
• alignment: Alignment for positioning inside the container (.bottomTrailing by default).
• onFabAction: Action called when the FAB is tapped and items is empty.

public init(
 title: String,
 subtitle: String? = nil,
 systemImage: String,
 color: Color,
 action: @escaping () -> Void
)

public init(
 title: String,
 subtitle: String? = nil,
 assetImage: String,
 color: Color,
 action: @escaping () -> Void
)

Parameters:

• title: Main title text.
• subtitle: Optional supporting text (up to 3 lines).
• systemImage: SF Symbol name to display.
• assetImage: Asset catalog image name to display.
• color: Accent color for the icon and background.
• action: Closure executed when the user taps the item.

• Tapping the FAB toggles the menu when items is non-empty.
• Tapping outside the menu card dismisses the menu.
• Tapping an item dismisses the menu before executing its action.
• When Reduce Motion is enabled, a subtle fade is used instead of a spring animation.

An example project is included under Example/ to preview the component in action.

MIT. See LICENSE.