SideMenuKitSwiftUI is a framework for displaying menus on the left side of the screen. Two types of menu styles are provided: sliding menu and sidebar menu. A sliding menu is a menu with a title and an icon. Sidebar menu is a menu with only icons.

Slide Menu

Sidebar Menu

You can add this package on Xcode. See documentation.

How to Use

You can just import SideMenuKitSwiftUI to use the package.

import SwiftUI
import SideMenuKitSwiftUI

struct ContentView: View
  enum Menu: Int, Hashable
    case fine
    case cloudy
    case rainy
    case snow
    case bolt
    case wind
    case tornado

  private let items: [SideMenuItem<Menu>] = [
    (title: "Fine",    icon: "sun.max.fill",  tag: Menu.fine,    color:,
    (title: "Cloudy",  icon: "cloud.fill",    tag: Menu.cloudy,  color: Color.gray),
    (title: "Rainy",   icon: "umbrella.fill", tag: Menu.rainy,   color:,
    (title: "Snow",    icon: "snowflake",     tag: Menu.snow,    color: Color.cyan),
    (title: "Bolt",    icon: "bolt.fill",     tag: Menu.bolt,    color: Color.yellow),
    (title: "Wind",    icon: "wind",          tag: Menu.wind,    color:,
    (title: "Tornado", icon: "tornado",       tag: Menu.tornado, color: Color.indigo)
  ].map({ SideMenuItem<Menu>(title: $0.title, icon: $0.icon, tag: $0.tag, color: $0.color) })

  private let configuration: SideMenuConfiguration = .slide

  var body: some View {
    SideMenu<Menu,MenuContentView>(configuration: configuration, menuItems: items, startItem: .fine) {
      (menu) -> MenuContentView in
      MenuContentView(selected: menu, items: items)

  struct MenuContentView: View
    private let menu: Menu
    private let item: SideMenuItem<Menu>

    init(selected menu: Menu, items: [SideMenuItem<Menu>]) { = menu
      self.item = items.filter({ $0.tag == menu })[0]

    var body: some View {
      VStack {
          .aspectRatio(contentMode: .fit)
          .frame(width: 192, height: 192)
      .frame(maxWidth: .infinity, alignment: .center)

The side menu style can be easily switched by simply changing the configuration value from .slide to .sidebar.

  private let configuration: SideMenuConfiguration = .slide
  private let configuration: SideMenuConfiguration = .sidebar

SideMenuConfiguration Reference

Below you can see all the properties that you can set in the configuration.

Property Type Description
menuStyle MenuStyle Menu-style (slide or sidebar)
sidebarWidth CGFloat Width of the left area
selectedStyle SelectedStyle Selected-style on the slide (none, pinpoint, highlight, underline)
selectedColor Color Color at menu selected on the slide
backgroundColor Color Background color of the left area


This package is licensed under BSD License


View Github