Navigation Links & BannersPro ComponentiOS 16.0+Xcode 15+

Banner NavigationLink with Symbol

Interactive banner row with prominent leading SF Symbol and disclosure arrow.

Download in Compot App Browse all Navigation Links & Banners

SwiftUI Implementation

Pure Vanilla Swift • No Dependencies

bannerNavLinkWSymbol.swift

import SwiftUI

struct BannerNavLinkWSymbol: View {
    var body: some View {
        VStack {
            NavigationLink {
                
            } label: {
                HStack(alignment: .center) {
                    Image(systemName: "heart.fill")
                        .font(.system(size: 20))
                        .foregroundStyle(.white)
                        .padding()
                        .background(.red.gradient, in: Rectangle())
                    Text("Favorites")
                        .font(.system(size: 17, weight: .semibold))
                        .foregroundStyle(.primary)
                    Spacer()
                    Image(systemName: "chevron.right")
                        .font(.system(size: 15))
                        .foregroundStyle(.secondary)
                        .padding(.trailing, 8)
                }
                .frame(maxWidth: 450, alignment: .center)
            }
            .buttonStyle(PlainButtonStyle())
            .background(.thinMaterial)
            .clipShape(.rect(cornerRadius: 8))
        }
        .padding()
    }
}

#Preview {
    BannerNavLinkWSymbol()
}