FloatingMenuButton is a lightweight SwiftUI floating action button (FAB) that expands into a menu of actions.
| Demo |
|---|
|
| System Image | Custom Image |
|---|---|
|
|
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.
| Emoji | Feature |
|---|---|
| 🔘 | Floating action button with optional label text. |
| 🧩 | Expandable menu with multiple items. |
| 🎨 | Customizable item title, optional subtitle, SF Symbol, and accent color. |
| 🔁 | Configurable FAB icon for collapsed/expanded states. |
| 🖼️ | Supports xcassets icons for items and FAB. |
| 🖌️ | Supports custom FAB text color, font, and background color. |
| 🫥 | Dismiss overlay on background tap. |
- Swift 6
- SwiftUI
- Platforms:
- iOS 16
- macOS 12
- tvOS 16
In Xcode:
File>Add Package Dependencies...- Paste the repository URL:
https://github.com/andr3a88/FloatingMenuButton - Add the
FloatingMenuButtonproduct 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 triggersonFabAction.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 (15by default).alignment: Alignment for positioning inside the container (.bottomTrailingby default).onFabAction: Action called when the FAB is tapped anditemsis 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
itemsis 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.