Better Side-Bar Menus With SwiftUIMenu

SwiftUIMenu to the rescue

Introduction

Some time ago, I decided to write an article on the implementation of the menu navigation pattern in SwiftUI:

May I See the SwiftUI Menu, Please?

The menu navigation pattern is widely used in many apps. Although some would argue it’s more of an Android thing and that Apple has never tried to serve it as a built-in component, many people still find it useful and require it in their apps.

In this article, I’ll introduce SwiftUIMenu and give you a quick tour of its main features. Finally, we’ll test this framework with a simple example project.

fermoya/SwiftUIMenu

Basic implementation

Creating a new Menu is relatively simple. You just need to pass:

• Binding to the index selected
• Binding to show/hide the drawer
• Items to populate the menu
• ViewBuilder to create the drawer rows
• ViewBuilder to create the section content

Menu(indexSelected: self.$index,
     isOpen: self.$isMenuOpen,
     menuItems: menuItems,
     id: \.name,
     menuItemRow: { item in MyMenuRow(item) },
     menuItemContent: { indexSelected in
         MySectionContent(index: indexSelected) 
     })

By default, the Menu is initialized to be:

• Aligned to the left so it reveals rightward
• It’ll take 100% of the screen when revealed
• Draggable, which means you can drag the drawer in and out