
Overflow Menu
From syxUI — written for both platforms, not translated between them.
An overflow (⋯) button with a menu.
Navigation · SwiftUI · iOS 17
- navigation
- swiftui
The actual source
MenuOverflow.swift
// Overflow Menu · syxUI · https://syxui.dev/components/menu-overflow
// Free in any project. Keep this line and credit syxUI where a person can read it.
import SwiftUI
let mnRed = Color(red: 0.90, green: 0.24, blue: 0.28)
func menuCard<C: View>(_ w: CGFloat, @ViewBuilder _ c: () -> C) -> some View {
c().frame(width: w).background(Color(.systemBackground), in: RoundedRectangle(cornerRadius: 14, style: .continuous)).overlay(RoundedRectangle(cornerRadius: 14, style: .continuous).stroke(Color.primary.opacity(0.07), lineWidth: 1)).shadow(color: .black.opacity(0.06), radius: 14, y: 5)
}
func menuRow(_ label: String, _ icon: String, destructive: Bool = false, disabled: Bool = false) -> some View {
HStack { Text(label).font(.system(size: 15)); Spacer(); Image(systemName: icon).font(.system(size: 15)) }.foregroundStyle(destructive ? mnRed : (disabled ? Color.secondary.opacity(0.4) : Color.primary)).padding(.horizontal, 14).padding(.vertical, 11)
}
struct MenuOverflow: View { var body: some View { VStack(alignment: .trailing, spacing: 6) { Image(systemName: "ellipsis").font(.system(size: 18, weight: .semibold)).foregroundStyle(.primary).frame(width: 40, height: 40).background(Color.primary.opacity(0.05), in: Circle()); menuCard(200) { VStack(spacing: 0) { menuRow("Edit", "pencil"); Divider(); menuRow("Share", "square.and.arrow.up"); Divider(); menuRow("Delete", "trash", destructive: true) } } }.frame(width: 220) } }
iOS 17 · No dependencies
Dependencies
- SwiftUI
- No external dependencies
Requires iOS 17


