Skip to content
Action Menu preview
Rendered from the SwiftUI source on this page.

Action Menu

From syxUI — written for both platforms, not translated between them.

A full action menu with icons.

Navigation · SwiftUI · iOS 17

  • navigation
  • swiftui

The actual source

MenuAction.swift
// Action Menu · syxUI · https://syxui.dev/components/menu-action
// 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 MenuAction: View { var body: some View { menuCard(280) { VStack(spacing: 0) { ForEach(Array([("Make available offline", "checkmark.circle"), ("Download", "arrow.down"), ("Copy link", "link"), ("Send a copy", "arrowshape.turn.up.right"), ("Rename", "pencil"), ("Remove", "trash")].enumerated()), id: \.offset) { i, a in menuRow(a.0, a.1, destructive: a.0 == "Remove"); if i < 5 { Divider().padding(.leading, 14) } } } } } }
iOS 17 · No dependencies

Dependencies

SwiftUI
No external dependencies

Requires iOS 17