SwiftUI Tutorial — How to create a Floating Drop Down Menu.

Welcome to a new SwiftUI tutorial. We are going to be creating a Drop Down menu, this is really easy to do in SwiftUI and super fun!

This is what the drop down menu will look like at the end of this tutorial.

Create the DropDown 👍

Let’s open up Xcode and start a new project

Then call the project DropDown_SwiftUI or whatever you want, and then save the project.

Now we are all setup in our ContentView, this is what the View looks like.

I want to add some Text to our View. We are going to do this by adding a VStack this will hold our Text.

Now we have added our Text to the View it’s time to create our drop down menu. But first, we are going to place our DropDown() inside a VStack and a HStack.

We have also created a Struct at the bottom just after the ContentView_Preview. This is where going to be creating the drop down menu.

Now we are in the drop down Struct we are first going to create a

@State var expand = false

This is going to be toggle on or off when we tap on the menu button. So let’s dive in and create this first.

Before we move on I would like to fix some stuff on here. We need to be thinking about what we want to happen when the button animates. The image we are using are from SF Symbols.

Now we have changed the Image so when we are tapping the button we are checking if we are expanding or staying the same so the button image will go up and down.

Now that has been fixed it’s time to create the buttons that will appear inside the drop down.

The buttons have been adding to the drop down, but it is looking a little dull so we are going to add some padding, background colour, corner radius and some light shadow.

Now we need to add some animation to the drop down, this will animate without the animation on the menu but this doesn’t flow with the design. We are going to create a spring animation. This is very easy in SwiftUI to create.

Now that we have done the animation and the drop down flows better. We now need to figure out how we are going to place this on the leading bottom left of our View.

We are going to go back to the top on the ContentView where we adding the DropDown() we are going to add two Spacers and some padding to the HStack.

As you can see we have added the padding with .leading, -240 this is because when we have a HStack you have a up to ten view stack along side one another but because we only have one thing inside the View we need to put in where we want this to be on the View.

Now that this is done we still need to add in one more spacers so we can get the button down to the bottom left of the View.

I just want to go over the Text of the drop down this doesn’t look good for the ui and you can’t really see this on the background colour so we want to change all the Text foregroundColor to .white

This is what is looks like now when we have changed the Text colour to white.

Conclusion 👏

Awesome, we have now finished this tutorial on how to create and drop down menu. We have learned how to use VStacks, HStacks @State and so much more! With this knowledge you should be able to create some dope looking drop down menus.

If you would like the whole source code of this app go to Patreon

I hope you have enjoyed this tutorial! If you want to learn more about SwiftUI, check out our YouTube channel for other awesome SwiftUI tutorials. Also make sure to keep yourself up to date with our upcoming tutorials on our Instagram

Thank you all for reading this content.