A macOS-style sidebar layout in CSS

Finder, Mail, Notes and Music all share one structure: a sidebar of sources on the left, content on the right. Getting the sidebar right does more for a native feel than any other single component.

The layout

.app {
  display: grid;
  grid-template-columns: 272px 1fr;
  height: 100vh;
}
.sidebar { overflow-y: auto; padding: 52px 10px 10px; }  /* top clears the traffic lights */
.content { overflow-y: auto; }

Only the panes scroll. The window itself never does, which is one of the tells that separates an app from a page.

Rows and sections

.section-title { font: 600 11px/1 system-ui; color: var(--label-tertiary); padding: 12px 8px 4px; }
.item { display: flex; gap: 6px; align-items: center; height: 28px; padding: 0 8px;
        border-radius: 6px; font-size: 13px; cursor: default; user-select: none; }
.item[aria-current] { background: var(--accent); color: white; }
.window:not(:focus-within) .item[aria-current] { background: var(--fill-secondary); color: inherit; }

• 28px rows, 13px text, icons around 16px.
• Section headers small, semibold and secondary coloured.
• Selection as a rounded fill, accent when focused, grey when not.
• The arrow cursor, not the hand.

Translucency

Mac sidebars let the desktop show through, blurred. In Electron, set vibrancy: "sidebar" on the window and keep the sidebar background transparent. In Tauri, window effects provide the same on macOS; check the current Tauri docs, since it requires a transparent window. Without it, a solid dark sidebar a step lighter than the content is a fine choice.

The titlebar above it is covered in a custom titlebar in Tauri, and toolbar controls in a segmented control in CSS.

macOS Native Dark UI has the 272px sidebar under an overlay titlebar as a recipe, with the 13px controls and system colours of Apple's dark appearance.