
Menu Section
From syxUI — written for both platforms, not translated between them.
A restaurant-menu section that expands to dishes and prices.
Accordions · SwiftUI · iOS 17
- accordion
- swiftui
The actual source
AccMenu.swift
// Menu Section · syxUI · https://syxui.dev/components/acc-menu
// Free in any project. Keep this line and credit syxUI where a person can read it.
import SwiftUI
extension View {
func formaCard(_ pad: CGFloat = 18) -> some View {
self.padding(pad)
.background(Color(.systemBackground), in: RoundedRectangle(cornerRadius: 20, style: .continuous))
.overlay(RoundedRectangle(cornerRadius: 20, style: .continuous).stroke(Color.primary.opacity(0.06), lineWidth: 1))
.shadow(color: .black.opacity(0.05), radius: 14, x: 0, y: 6)
}
}
// Restaurant menu section accordion
struct AccMenu: View {
@State private var open = true
let dishes = [("Bruschetta", "$9"), ("Calamari", "$14"), ("Caprese Salad", "$12")]
var body: some View {
VStack(spacing: 0) {
HStack {
Text("Appetizers").font(.system(size: 16, weight: .bold))
Spacer()
Text("3").font(.system(size: 13)).foregroundStyle(.secondary)
Image(systemName: "chevron.down").font(.system(size: 12, weight: .semibold)).foregroundStyle(.secondary).rotationEffect(.degrees(open ? 180 : 0)).padding(.leading, 8)
}.padding(.vertical, 13)
if open {
ForEach(Array(dishes.enumerated()), id: \.offset) { i, d in
Divider()
HStack {
Text(d.0).font(.system(size: 15))
Spacer()
Text(d.1).font(.system(size: 15, weight: .semibold))
}.padding(.vertical, 11)
}
}
}.formaCard(16).frame(width: 320)
}
}
iOS 17 · No dependencies
Dependencies
- SwiftUI
- No external dependencies
Requires iOS 17

