Skip to content
Sidebar Rail preview
Rendered from the SwiftUI source on this page.

Sidebar Rail

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

A vertical icon sidebar navigation rail.

Navigation · SwiftUI · iOS 17

  • navigation
  • swiftui

The actual source

SidebarRail.swift
// Sidebar Rail · syxUI · https://syxui.dev/components/nav2-sidebar
// 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)

// Vertical sidebar rail
struct SidebarRail: View {
    @State private var sel = 0
    let icons = ["house.fill", "chart.bar.fill", "folder.fill", "gearshape.fill"]
    var body: some View {
        VStack(spacing: 20) {
            Image(systemName: "hexagon.fill").font(.system(size: 24)).foregroundStyle(navBlue)
            ForEach(Array(icons.enumerated()), id: \.offset) { i, ic in
                Image(systemName: ic).font(.system(size: 19)).foregroundStyle(sel == i ? .white : Color.secondary).frame(width: 44, height: 44).background(sel == i ? navBlue : .clear, in: RoundedRectangle(cornerRadius: 12)).onTapGesture { sel = i }
            }
            Spacer()
            Image(systemName: "person.crop.circle.fill").font(.system(size: 30)).foregroundStyle(.secondary)
        }.padding(.vertical, 18).frame(width: 72, height: 340).background(Color.primary.opacity(0.03), in: RoundedRectangle(cornerRadius: 20))
    }
}
iOS 17 · No dependencies

Dependencies

SwiftUI
No external dependencies

Requires iOS 17