Skip to content
Context Bar preview
Rendered from the SwiftUI source on this page.

Context Bar

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

A contextual selection action bar.

Navigation · SwiftUI · iOS 17

  • navigation
  • swiftui

The actual source

ContextBar.swift
// Context Bar · syxUI · https://syxui.dev/components/nav2-context-bar
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

let navBlue = Color(red: 0.0, green: 0.47, blue: 1.0)

// Contextual selection bar
struct ContextBar: View {
    var body: some View {
        HStack(spacing: 16) {
            Text("Cancel").font(.system(size: 15)).foregroundStyle(navBlue)
            Spacer()
            Text("3 selected").font(.system(size: 15, weight: .semibold))
            Spacer()
            Image(systemName: "trash").font(.system(size: 17)).foregroundStyle(.red)
        }.padding(.horizontal, 20).padding(.vertical, 14).background(Color(.systemBackground), in: Capsule()).overlay(Capsule().stroke(Color.primary.opacity(0.10))).shadow(color: .black.opacity(0.06), radius: 10, y: 4).frame(width: 340)
    }
}
iOS 17 · No dependencies

Dependencies

SwiftUI
No external dependencies

Requires iOS 17