FloatingButton – Easily customizable floating button menu created with SwiftUI
  • July 2, 2025

FloatingButton


Easily customizable floating button menu created with SwiftUI

Usage


  1. Create main button view and a number of submenu buttons — both should be cast to AnyView type.

  2. Pass both to FloatingButton constructor:

FloatingButton(mainButtonView: mainButton, buttons: buttons)

  • You may also pass a binding which will determine if the menu is currently open. You may use this to close the menu on any submenu button tap for example.

FloatingButton(mainButtonView: mainButton, buttons: buttons, isOpen: $isOpen)

  • Chain .straight() or .circle() to specify desired menu type.
  • Chain whatever you like afterwards. For example

FloatingButton(mainButtonView: mainButton, buttons: textButtons)
.straight()
.direction(.top)
.alignment(.left)
.spacing(10)
.initialOffset(x: -1000)
.animation(.spring())

FloatingButton(mainButtonView: mainButton2, buttons: buttonsImage.dropLast())
.circle()
.startAngle(3/2 * .pi)
.endAngle(2 * .pi)
.radius(70)
.layoutDirection(.counterClockwise)

Universal options

spacing – space between submenu buttons
initialScaling – size multiplyer for submenu buttons when the menu is closed
initialOffset – offset for submenu buttons when the menu is closed
initialOpacity – opacity for submenu buttons when the menu is closed
animation – custom SwiftUI animation like Animation.easeInOut() or Animation.spring()
delays – delay for each submenu button’s animation start – you can pass array of delays – one for each element – or you can pass delayDelta – then this same delay will be used for each element mainZStackAlignment – main button and submenu buttons are contained in one ZStack (not an overlay so the menu has a correct size), you can change this ZStack’s alignment with this parameter inverseZIndex – inverse zIndex of mainButton and the children. Use, for example, if you have a negative spacing and want to change the order wholeMenuSize – pass CGSize binding to get updates of menu’s size. Menu’s size includes main button frame and all of elements’ frames menuButtonsSize – pass CGSize binding to get updates of combined menu elements’ size

Straight menu only options

direction – position of submenu buttons relative to main menu button
alignment – alignment of submenu buttons relative to main menu button

Circle only options

startAngle
endAngle
radius – distance between center of main button and centers of submenu buttons
layoutDirection – changes the button layout direction from the startAngle to the endAngle

Examples


To try the FloatingButton examples:

  • Clone the repo https://github.com/exyte/FloatingButton.git
  • Open FloatingButtonExample.xcodeproj in the Xcode
  • Try it!

Installation


Swift Package Manager

dependencies: [
.package(url: “https://github.com/exyte/FloatingButton.git”)
]

Requirements


  • iOS 14.0+ / macOS 11.0+ / watchOS 7.0+
  • Xcode 12+

GitHub


View Github

#swiftui #swiftui-animations #swiftui-components
YOU MIGHT ALSO LIKE...
SwiftUI Charts

Build custom charts with SwiftUI Styles      

SwiftUICharts

A simple line and bar charting library that support accessibility written using SwiftUI.

Swipeable cards

Swipeable Cards with SwiftUI

RGStack

This UI attempts to capture the Quibi Card Stack and the associated User Interaction.

🃏 CardStack

A easy-to-use SwiftUI view for Tinder like cards on iOS, macOS & watchOS.